Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Follow Contact

HF Rulez the UniverseHF Rulez the Universe
Cyam
       
uiux ui ux webdesign graphic design

4 Main Web Design Principles

Posted 05-22-2022, 04:26 PM
[Image: 1UlpAxY.png]


Throughout my years as a graphic designer, I've made countless mistakes while working with UI designs. This was mainly seen in my thread & web design quality. At the time, I didn't know that there were principles you are supposed to follow in order to craft a visually appealing design. Frankly, I didn't even care about it as I was in the field for the quick buck, but as my interest and love for the design grew, I decided to do thorough research into UI/UX design.

Today, we will take a look at 4 main web design principles you should always try to follow and keep an eye out for when working on your thread or web design.


1. | Alignment & Grid

[Image: Alignment.png]

Probably the thing I've seen most designers (especially on Hackforums) do wrong is the inconsistent layout. Meaning their alignments are wrong or they do not follow a specific layout grid.

In the example above you can see the bad usage of alignment and grid and how you can fix it by setting a layout before you start designing. The reason why bad aligned web design is so hard on the eye is that we, humans, always strive towards order. Yes, some people enjoy chaos, but most of us love order. This is why you probably don't want to live in a messy room but a thoroughly cleaned one.

How to fix this? Before you even start working on your design, set a proper grid layout that you can follow and stay consistent throughout the whole process. Figma does an amazing job at this as they offer a function to set it up within 10 seconds. In other software, you can simply use ruler to set grids.


2. | Visual Hierarchy

[Image: Hierarchy.png]

You don't want your website to be unpleasing to the eyes. People that arrive at the website and immediately get lost in it are more likely to never come back. This is why visual hierarchy plays a major role in UI design. In the example above, you can take a look at the worst website I've ever seen in terms of visual hierarchy—lingscars

I get that site is made like that on purpose, but due to its appearance, you have no idea where would you look first. This is because hierarchy is non-existent.

In the second example (Mailchimp) you can see how the website is pleasant on the eyes. We can see the main headline that catches your attention, the paragraph below it to further explain their service, and the CTA buttons at the bottom. This is the most common use of hierarchy in modern websites.

How to fix this? I suggest you take a look at some wireframe kits available online. It's always a good idea to start with a low-fidelity wireframe so you get a general idea of how to structure your design. Visiting websites like Dribbble or Behance can be a great source of inspiration and training for visual hierarchy. Learning from the pros is the first step I took when improving my UI/UX design practices.


3. | Typography

[Image: typeface.png]

I've seen my share of bad typography uses and quite frankly, I did that as well before I dived deep into the UI/UX design. Once I understood how fonts affect human psychology, I started to notice more how certain brand niches use only serif fonts and other niches stick to the typical sans-serif. This is because the niche is closely related to a different typeface.

In the example above, you can see how certain (in this case playful) typefaces can look so off-putting in certain niches. This is why you will never see a rounded font being used on a real estate website. The reason is simple human psychology—sans serif fonts are closely connected to luxury and premium brands, while playful fonts are more for holidays, kindergarten etc.

How to fix this? Either read my font psychology blog post or do your research on font psychology. I can give you one niche example per typeface category; Serif: Jewelry, Sans-serif: SaaS, Display: Restaurant.


4. | Negative Space

[Image: Spacing.png]

Many designers fear the white space in their UI designs because they feel like it will make the design look too empty. This, on the one hand, is true because using too much white space might cause that, but putting objects too close to each other will also make the design look bad.

Notice how in the example above I used the same elements in both designs, but it looks way better in the right design as I gave them space to breathe. One of the main reasons why it looks better is because if you move the objects further apart from each other, you immediately make the whole design easily readable.

You might ask why are the buttons so close to each other then? And that would be a good question. The term we use in UI/UX design for this phenomenon is proximity. It states that objects that are closely related to each other should be closer. We have two buttons that use the same size and border radius, so putting them close to each other will not cause a sloppy-looking design.

How to fix this? To stay consistent with your spacing, make sure to track the distance from the object to the object with pixels. Figma allows this function by simply holding the CTRL button. Play around with spacing, but generally, I have set some rules for myself: Headline to paragraph distance should not be more than 20-30px. The paragraph to the CTA button should not be more than 50px.


[Image: Frame-1.png]
06-08-2022, 02:29 PM
Thanks, Parks!
05-30-2022, 02:04 PM
Hey man nice blog. Should show the basics to a few people hopefully.