The Elements of Web Design.

The most important thing to make a website loved by users is pretty much the design. After all, when was the last time you heard someone say "I love how this website works so efficiently. I inspected their code and found no bugs! So cool!" Nobody ever says that, right? The normal, conventional, day-to-day users just care about the design. And, maybe a little bit of functionality (?) but, mostly just the design.

I want you to visit a website called The Internet Archive: Wayback Machine. This website takes us on a time-machine and we can view how websites looked a decade ago. Most of us love to shop on Amazon. If you look at it's website from the early 2000's here, I'm pretty sure many of us would reconsider our decision to shop at Amazon. Why is that? It's because of the design.

If you run an online business, you would be investing a lot of time brainstorming about how to make your product better? How to make your brand stronger? How do you make your sales better? Design is actually the cheapest ways to make your company or product look expensive! It's elevating!

The 4 web design principles that we need to follow to start building great websites.

1. The Color Psychology

The color psychology is the art & science for creating the right palette for your website/brand. The predominant color that is going to be in your design really tells a story and it conveys a message to the user.

For example, let's look at the color Green. It signifies freshness, nature, quality etc.. and that's why you see a lot of grocery companies like The Big Basket or Amazon Groceries use this color as their predominant color palette. It conveys a message telling "Hey Look! This thing is fresh and edible. This is what we're selling!" So, it's really essential for you to make a choice of the color palette with the thought of "What message I am trying to convey here?"

The combination of colors is equally important too. At some point in your designing career, you will have to think of combining colors. The two colors which are right next to each other on the color wheel really work well together. These colors can be great for navigation bar and the body of your website or for logo and it's background. These are called Analogous Colors. If you really want something to stand out then you should use Complimentary Colors which are right opposite to each other on the color wheel. If you want to, you can head over to a website called adobe color to mess around with color combinations.

2. Typography

Fonts really do set the tone or the mood of the content on your webpage. It can make your webpage look so professional or it can also lead to a horrible headache to the user surfing your webpage. Whatever it is that you are selling, you educate and connect with customers through words. And, how those words look matters.

It all depends on the fonts that you use.

Out of all the fonts in the world, there's pretty much two large font families you should know about : Serif and Sans-Serif.

Serif typeface have these little feet at the end of their central beams. Using this makes your design look more serious, more authoritative and a little bit older as well. These can be used for say a letter head of a legal company or a magazine. These fonts are further subdivided into Old Style, Transitional and Modern fonts, we can tell by looking at the difference between the thickest and the thinnest part of each letters. The difference gets more exaggerated as we get towards the more Modern fonts.

The Sans Serif typeface have a more right angled corners at their central beams. And this thing makes them look so much more friendly, more approachable, more novel & more contemporary.

3. User Interface Design (UI)

In simple terms, a user interface is the features of a webpage that allows a user to interact with it. It's about the look of the things, with a view to facilitating usability and to improve the user experience.

To be good at the user interface design, you have to establish hierarchy. This can be achieved by the use of color. So, the colors that really pop and stand out, that have contrast with the background tend to be used for high hierarchy. In addition to color, we should also think of the size of the things on our webpage. As humans, our eyes tend to be attracted to the bigger bolder things.

Then, we must also look at the layout of the webpage. If all the content on our webpage is laid out in a boring bland manner then it is sure to take away the attention of the user. Instead, we can create more interest by creating a block of text and then interspersed with pictures and then create different sizes and different hierarchy to make your design look more interesting. The wikipedia sites are a good example of bad design. The lines here are just too long and makes it difficult to read through.

The Alignment of the content really sets the tone of the user interface design. If we do nothing and just make sure that the content is aligned properly, it already makes our website a lot better. We can make our product/webpage look really classy just by adding white space around the elements of our webpage. If everything is cramped into one another, it looks cheap and ugly. Adding white space is essential for that minimalist look on our webpage.

Last but not the least, design for your audience.

4. User Experience Design (UX)

First things first, I believe there's no one commonly accepted definition of the User Experience Design. UX Design is a concept that has many dimensions, and it includes a bunch of different disciplines—such as interaction design, information architecture, visual design, usability, and human-computer interaction.

The goal of UX design in business is to “improve customer satisfaction and loyalty through the utility, ease of use, and pleasure provided in the interaction with a product.”

Few of the rules that one can follow to improve the user experience are:

1. Simplicity: Keeping things simple is always better than making things complex or more cluttered. A dense webpage is not likely to keep the user attention for a very long time. Instead, a clean and simple webpage with minimalistic design works like a charm.
2. Consistency: Always keep your design consistent but, also keep the functionalities consistent across the webpage. If you site has a particular type of navigation bar in its index page, it's a good idea to keep it consistent across all the pages linked to that as well. Same goes with the functionality.
3. Reading Patterns: We always have to take into account the reading patterns of most of the users. It is found that majority of the users scan the website in "F Shape" So, if you lay out the most important piece of content in that shape, chances of user extracting that information increases drastically. There's also a Z-layout.

Building a webpage which supports all the platforms has become extremely necessary since the domination of mobile users over desktop/laptop users. So, it's essential that your webpage is responsive to any viewport.

The last thing is that some designers take advantage of their knowledge on human psychology and UI/UX Design to do bad things.

In the design world, we call them dark patterns. The patterns which get user to perform an action or behaviour that is beneficial to the company or the designer but it's not necessarily what the user wanted. DO NOT INDULGE IN SUCH THINGS.

Phew! If you actually made it till the end, thank you for reading. I'm glad!

Do let me know what you think about the Article!

Adios.