The Basic Principles of Web Design: Introduction

Am so loving this, can’t wait for the article


Thank you! :blush: I hope the first two articles was helpful and enjoyable. Third topic is on the way soon :slight_smile:

1 Like

Yes it was and an also excited see people having common interest to things that interest mhe

1 Like

I found a great way for learning how to practice the Web Design.
At Khan Academy, literally 99.99% of all the people there only do PJS or don’t know how to make webpages properly. On weekends, I will make webpages for the people that need one, following the design instructions that taught.
That site really needs more people who do proper Web Development & Design. Could you add your skills to that site and emphasize the use of Web Development?


Hey, two things! :slight_smile:

  1. Excuse me for being slow, but I am not sure what you meant.

Do you mean the students who are learning a subject at Khan Academy?? Or do you mean the staff who is running KA??

Whatever is the outcome, I think it is a great idea that you are doing something to help and contribute. :blush:

  1. the link you provided is not working

I’m saying that out of everyone that learns programming, a very little amount of them knows how to make webpages. Most of them use Processing.JS to code and not HTML or CSS. On Khan, they don’t actually teach you how to lay out your site properly. They just teach you basic css and there’s a problem: webpages can get to look ugly.

What I’m also trying to say is that I can practice working for people for free now and make websites for them. They will tell me what to do and I will try my best to make it.
Try to make it look like a properly designed one made by a web developer (well, almost since I’m not there yet.)

I have almost completed one of them and it is a Lord Of The Rings club page.

Others are asking for things like portfolios and subscription pages.


First of all, thank you for explaining this in another way. Now, I completely understand what you are saying. :slight_smile:

EXACTLY! This is how I felt with FCC. I think many web learning platforms do this and I can see why they do this as we are only there to learn to code, not design. But, it still doesn’t change that without design knowledge, it will be hard to create webpage with an appealing look.

I think that is a brilliant idea what you are doing there. :slight_smile: Just a word of advice, if you plan to make your own portfolio (or you already have one), I would add a small web design section of all the works you have made and add an explanation of why you are doing this (basically what you have just explained above). By doing this, it will show that you have a strong interest and contribution in the web industry and community. And of course, you get to show off your cool web design layouts you made. Seriously, keep it up! :+1:

I have checked out your LOTR club page. I really like it. I like the colour and font choice you have picked because it worked with the branding identity of LOTR. :slight_smile:


It would be great if you can told more about the wireframing process, smth like that:

I am glad that you have mentioned wireframing. It is one of the process that is simple, but it is what will create an effective design layout. Yet frankly, it is one of the process that is overlooked, and that is why I do plan to explain wireframing when we get to the layout stage.

Having said that, this could be a while as I plan to go through all the smaller design concepts (colours, typography, imagery etc,) first before going into the concept of overall design layout.

So, if it something you want to learn sooner, or you found a resource about wireframing but having trouble understanding, I am happy to give you any advice and tips in the meantime :slight_smile:

When designing a site, what is better to use Photoshop or an online constructor for creating sites (that you can drag and drop blocks, etc.)?

1 Like

First of all, I would like to welcome you to the community! :blush:

Before I answer your question, I would like to explain a few things.

Unless, I am dealing with a raster file, I personally don’t use Photoshop to create a web layout. (I will explain this further down).

These online constructors, would it be the like of Wix or Webflow? If I am correct, I have never use them before, so I can only take the risk and go by what I assume they do.

To answer your question

That really does depends.

If these online constructors has less flexibility with tools (in comparison to PS), but it doesn’t affect me if I were to create very simple layout. Then I would probably go for these online constructors. That is because:

  • They may be simple to use
  • They may be quicker to get the design layout done
  • They may be free where PS is not

If I were to create a design layout where it feels more customisable and I need advanced tools to create something very specific and these constructors cannot do the job, then I would be using PS (that is I cannot use another software).

For a moment, I am going to exclude these online constructors and go more into PS. Software like PS or Adobe Illustrator are valuable and have their own perks in the web design process (PS is great for imagery and AI is great for illustrations, logos, and icons. if you want me to further explain this, please let me know and I would be happy to).

When I said I don’t use PS, this is all down to creating the overall layout. Some web designers still does it, which is nothing wrong with that and maybe there are plugins for what I about to explain. But, at this moment I am using a tool called Figma. This is a fantastic tool because:

  • You are able to create grid column layout. This will help to neatly align elements in place.

  • You are able to create responsive layout. So, if you click on the edge of your design layout and drag it sideway, the elements in the page will move responsively. This is great to see how it would look in desktop mode to mobile phone.

  • You can see to see your layout on your actual mobile devices (phone, tablet) and see how it would actually look if it was in live production

  • Saving the best til last. Figma is free (to a limit).

I hope this will help you out. :slight_smile: