Introduction to web design
There is a lot to be said about web design. Before you can get into it you need some basic tools.
You will need to have basic familiarity of HTML and CSS if you want to make anything that looks good.
Guidelines
User interfaces are for users. Think about your users and how they will interact with your work.
- Make sure your front-end is discoverable. What would a new user think to do when they arrive for the first time?
- Make sure that your front-end is learnable. If you need your users to take novel actions make sure that the users can remember how to do those actions later.
- The user is always right. If a user gets confused by your website then it means that your website is confusing. Swallow your pride and accept criticism
- Always have an escape strategy. If a user clicks on a button and navigates somewhere strange, they should be able to go back
- Don’t use too many colors. And remember that some of your users will be color-blind
- be consistent
- make sure that the most important parts of your site look important. Make them big, put them at the top. Guide your users to interact with the right components
- Make desired actions easy. Imagine two e-commerce sites with a similar style, selling similar items. On site A the user needs to click the mouse 10 times to make a purchase, on site B the user needs to click the mouse 3 times to make a purchase. Site B will make more sales.
- KISS. Here is a hilarious example of the opposite of KISS.
- Familiarity breeds trust. If your website looks familiar then people will take it seriously
- https://www.orbitmedia.com/blog/web-design-standards/
- https://www.pagecloud.com/blog/web-design-guide
Responsive design
A responsive web site is one that changes shape so that it looks and feels good on many different devices. Since cellphones are so powerful and ubiquitous these days it is usually considered best practice to design your site in a “mobile first” way. This means that you should first make sure that your site works well on a phone, then you make sure it works well on larger devices.
This is generally achieved through use of CSS-Grid.
https://www.freecodecamp.org/news/intro-to-css-grid-layout/
Accessibility
A lot of people have disabilities. When you design a website, you should try keep that in mind.
Here’s a great introduction to web accessibility.
https://www.w3.org/WAI/fundamentals/accessibility-intro/#:~:text=Web%20accessibility%20means%20that%20websites,contribute%20to%20the%20Web
Further learning materials