Good Web design is a result of good processes. While it might be easy to assign every great website we make to sheer creative genius, the behind-the-scenes scenario might be quite different.
Just ask the team at COdesign. After four years of providing web design and development services to clients both local and global, I can vouch for the strict adherence to process and best practices. As talented as the design team might be, it's the creative process that builds a team and ensures project success time after time.
While it might be challenging if not impossible to outline the team's entire process in one blog, I can very well share some of the techniques we use to create our web masterpieces. Find out some of COdesign's best kept design secrets below.
What is UI design?
A User Interface or UI goes back all the way to the first computer. Back then if you wanted to run something by a computer you’d have to connect a bunch of wires to a designated port. Much like how tele operators would do to connect you to your call. As it evolved, we had DOS where lines of text would guide you to write small commands. Finally, with the introduction of Macintosh graphical user interface was created.
The modern definition of UI consists of the ways how we interact with software, website, mobile apps and any other digital devices. I would like to say that UI consists of graphical elements that help you interact with these devices but I’d be wrong. Modern UI is more than that. Today, devices use voice, touch and gestures as part of our User interface and experience.
7 tips to improve your UI Design
1. Establish Hierarchy by using colours and font weights
Hierarchy is one of the fundamentals of Design. It functions as a roadmap for users to understand how elements are connected, which element within the interface holds more importance and how users should navigate from one part of the interface to another.
There are several ways to establish hierarchy. Size, weight, colour and positioning are the fundamental tools that are used but some methods are used more often than others.
Most UI designers would resort to using Size as the primary means to emphasise that one element is more important than the other. But, if a designer only relies on one method, it can have some fatal drawbacks.
For instance, if you use font sizes as your choice of hierarchy, you might find that some texts take too much space on the website while others might be too small to read.
A better way to establish hierarchy is to use a combination of colors and Font weights. Using combinations allow you to keep your design more mobile-responsive and create better looking designs.
2. Avoid Grey texts on a colored background
Grey texts are often used to emphasise texts on your screen. There are times when this works great, like on a white background. However, using grey text on a coloured background makes it harder for users to read.
UI designers can achieve the same impact by using a lighter shade of the background colour.
3. Offset your shadows
Shadows can be tricky. A shadow that works well for a light background might not work for a dark one. Sometimes, we compensate for this fact by increasing the blur radius to make the shadow more prominent. This can result in your UI looking unnatural at times.
Instead of spreading your blur values, try using a vertical offset. This will add a natural touch by stimulating a light source from above much like we are used to seeing in the real world.
4.Start with a lot of negative space
Negative space adds clarity and Organization to your design. A golden rule to follow when designing is to add more negative space than you think you’ll need. Start off with a spacy design and very minimal design elements. Once your draft is ready slowly reduce space where its needed and add new elements as your real estate allows for it.
A reason why this is a helpful tip is that this design process will help you create responsive and cleaner designs. If you’re designing for mobile (which you kinda have to), by minimizing features and incorporating negative space, your design will be well suited for the smallest screens out there. Remember, you can always add more space between elements as your screen grows but if your design has no breathing space to begin with, you will quickly run out of screen real estate when devices start getting smaller.
See examples of minimalistic web designs for better understanding. Owing to its clean outlook and friendly design minimalism has quickly turned into one of the most followed design trends.
5. Use Contrast to deliver accessibility
Good UI is characterised by Accessibility. The first GUI helped make computers accessible to the general public. Today, we are using voice and braille systems to make devices available to the blind. When designing UIs we should consider who we’re leaving behind in our design and how to compensate for it.
A relatively new practice in UI design is to use different shades of colours to identify separate elements of an UI instead of using different colours. This method can help those who are colour blind to navigate your UI more smoothly.
An example of this can be seen in how we use data visualization. If you wanted to design a pie chart and used different colours those who are affected by colour-blindness might not be able to notice the difference between one slice of the pie from another. When you use contrasting colours instead, the UI shines more brightly.
6. Establish a type scale
When you’re designing like a pro, you need to think ahead. As different areas of your interface requires a different size, a good way to quickly find out the right size is to use a type scale.
A type scale limits your choice and makes it faster for you to find the right size for your design. While you can still eyeball and add or subtract font sizes point by point, it is time consuming and creates inconsistencies in your design.
Don’t know where to start? There’s several good type scales already followed by UI designers that are readily available to the public.
7. Create and Follow a layout
A follow up to type scale would be to create layouts for everything. Starting from your colour palettes to your shadows. You should have a pre-set layout of all the elements you will be using in your design.
Call it pre-planning if you will, a layout can help you fix your assets and decide if you have everything you need to start working on your project.
For example, maybe this has happened to you that you were designing a page on your website and suddenly find yourself needing more colours. You can head over to a colour generator and find that none of the other colours in the palette look good in your eyes. You could’ve avoided this whole mess if you fixed your colours before hand.
The same could be said for your shadows, weights and type. Fix it early on so you won’t be scurrying about for a duct-tape fix at the later stages of your design.
