topic: Introduction to web design

Tags web design

Image

What Is Web Design?

Web design is a Web development process that focuses on the look and feel of the website, factors like

  • Layout
  • Colour
  • User Interface
  • Responsiveness
  • Accessibility

are all considered and organized to create a website or web application that looks good and is easy to use.

Layout & Responsive design

Layout and responsiveness are connected so while learning how to make your site responsive you will learn different layouts to achieve responsiveness.

A responsive website changes shape / or layout to accommodate different devices. Since cell phones are so powerful 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 the 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 to keep that in mind.

Here’s a great introduction to web accessibility.

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#:~:text=Accessibility%20is%20the%20practice%20of,those%20with%20slow%20network%20connections.

Colour

Colour and consistency are important in web applications and sites. Read this article to get a better idea and understanding of this.

Difference between bad and good design?

Image

The main difference between good and bad websites is determined by visual appeal (how good it looks to the user) and consistency. A good website shows a clear structure, easy-to-use navigation, and non-distracting design, while a bad website makes you feel confused or even annoyed.

Guidelines for achieving good Web Design

Please remember user interfaces are for users. Think about your users and how they will interact with your work.

Basics:

  • 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 colours. And remember that some of your users will be colour-blind
  • Be consistent.
  • Make sure that the most important parts of your site look important. Make them big, and 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.
  • Familiarity breeds trust. If your website looks familiar then people will take it seriously

Design Principle: KISS

“Simplicity is the ultimate sophistication” Leonardo Da Vinci

Click Here to read up on this Design Principle that will help you design better user interfaces.

KISS. Here is a hilarious example of the opposite of KISS.

Tools for design

Before developing your site it is normally a good idea to have a clue of what it should look like, this can save you time and have you working towards a better design. You can create your wireframes and prototypes using different software. A great open-source tool to try out is Figma.

Not using Linux or don’t want to download Figma on your machine? No problem, you can use Figma on your browser to get up and running on your next prototype or simple wireframe- Click here

Further learning materials

Found this topic on Web Design interesting? Feel free to check out the material below.

RAW CONTENT URL