Designers blowing up your email again about white space and infinite shades of gray? Mine sure are. But when does white space become empty space? How many shades of gray is too many? In this post we will talk about five things designers won't shut up about and some ways you can improve as a developer to maybe make them quiet down a bit.

Designing and developing is no easy task. You have to take care of all perspectives: SEO, performance, UX, UI, client satisfaction, and beauty just to name a few. Be it customer engagement, accessibility, or building brand identity; attention to detail and creative insights are extremely vital to building an efficient and well-organized website.

Whether you just entered the web designing territory or have been designing websites for a while, these five tips are surely going to elevate your web designs and add a hint of professionalism to your work.

1. You Need More Negative Space

Consider this the holy grail of web designing tips: you always need more white space in your design. Don’t just take my word for it though. Look at the thumbnails for the top four websites on Awwwards today.

One thing that you should keep in mind is that web design is not only about the spaces that you are filling up with content and imagery. But it is just as much about the spaces that you are leaving undesigned on your website. These spaces or gaps are usually called white space or negative space and they are more important than you might things

Lead Designer at Adobe Wojciech Zielinski says, “Whitespace is like air; it is necessary for design to breathe.” Yes, our websites are alive now. Hopefully I don’t have to feed it croissants too.

Research has shown that 135% micro white space (think line height or space between elements) and 59% (yup that’s 59 not 60 - think page paddings and section separation distance) are the optimal numbers for readability, legibility, and aesthetic.

Whitespace decides the gaps between text and images, the padding between margins and sections, and things like how far from the edges your content will sit. If used smartly, these white spaces can really make a difference to your web designs. It will enable the user to navigate the page layout more efficiently. Intentional spaces will give users the time to digest the information in front of them and focus on it before moving ahead to another section.  It can make your web design look more premium and put together, so use it wisely.

2. Never ever use Pixelated Grainy Images

We as human beings are primarily visual creatures and process images 60,000 times faster than text. This is the reason why it is very important to add imagery that speaks to the customers. Only use high-quality imagery on your websites. I repeat, only use high-quality imagery on your website. You might think it’s an obvious tip since these days we have fancy things like SVG (Scalable Vector Graphics that are images made with math) and the up-and-coming WEBP format. But you should also understand the importance of using the right theme and aesthetic for your images so that they could align with your brand voice.

An issue I have come across a few times in freelancing are complex dashboard images compiled in Figma that combine text, SVG, PNG, and shadow gradients all in one. Export from Figma and it comes out to something like 2-3 MB - way too big for a web image. Compress it on tinypng.com and it comes out less than 1MB, but the text starts showing signs of graininess. It becomes ugly - and it’s still quite large! The solution used in the screenshot below from circle.so is to actually build out the whole dashboard in HTML and CSS!

Whether you are using pictures from a stock website or hiring a professional photographer to take pictures, make sure that they are relevant and elevate the product or service you are offering. I’ve gone to fisticuffs with a few designers over image quality vs. compression (I usually fight for compression) but I almost always lose the battle once the client makes a ruling. Yes, the client chooses beauty over performance every time it seems. Get on board.

As the developer, you are often last in the chain of execution. If designs are locked and no further changes will be made, you may find yourself fighting an uphill battle getting assets changed. One tactic I have used with success is to ask for access to Figma files during the design phase and leave snarky comments like “Hey Designer! This exports to 3MB anything we can do about that?” or “Hey Client, this video file is 1 GB, let’s chat with your videographer about compression.”

3. Use Hierarchal Type to Improve Clarity

Typography is another great aspect of creating a strong website design. The main objective for any developer is to create a website that has clarity. The user should be able to enjoy the experience of using the website. This cannot be done if the user doesn’t know which text is more important and which is not.

This is when type hierarchy comes in. Type hierarchy basically arranges and organizes text content based on priority using size, color, and fonts. Without any type Hierarchy, the user will only encounter a solid wall of text which he will not even skim over.

However, you should not clutter your website with dozens of fonts and colors in your typography. Just choose two or three font sizes and colors and make them your headings, subheadings, and body. You should also play with the formatting and place your text in the right places to catch the audience's eye.

Size differentiation is another factor that plays an important role in typography. It prioritizes your text content based on visibility. The greater the text, the more likely it is that the user will read it first. Hence you should differentiate the size of the sentences that you want your user to read and pay attention to. One tool that I love for creating consistent and unique type hierarchy is Type Scale. It uses musical scale degrees and the golden ratio to produce hierarchies which feels oh so designer-y.

4. Encourage Users to Use Your Site or App as Intended

It is important to give your users feedback. This doesn’t mean literally telling them that they are doing a good job but leaving subtle clues and hover states to indicate that they are going in the right direction. This will make your website easier to use and the visitor will feel at ease when navigating through different pages and sections of your website.

This doesn’t only make your user feel more comfortable and familiar but it will also increase user encouragement. The user will feel like staying on the page and exploring more. These little indicators can be anything like little clickable elements or animations when you move your cursor to an object or a category. It is such a subtle detail that most web designers often overlook it. But it has immense visual appeal and keeps your user hooked and entertained for the whole duration he stays on your website.

5. Use colors wisely

We don’t only see colors, we practically feel them. Colors also have a deep impact on our moods. Imagine that! You control how a visitor feels when he or she is using your website or app.

One trick that is going to help you a lot in selecting your color pallet is the 60/30/10 rule. If you choose your color pallet in 60/30/10 ratio, you can create a better and more engaging design. Think of it like this:

●   60 % will be your dominant color for the background and the majority of the designs

●   30% will be the text and sectioning color

●   While 10% will be reserved for buttons and links (the accent color that pops)

Let your creativity shine, but keep in mind that good constraints can encourage innovation.