Design is meant to give the user conscious and subconscious clues as to how you should be able to interact with the digital world. If an App was a Journey, you’re the tourguide. Don’t throw all information to your user’s face and hope he learns.
- (edge) align everything with everything else.
- buttons should look clickable. They need an icon or a hint to visually show what it does.
- start with a monochrome design and color it up, color by color.
The importance of Alignment
Alignment is key in any sort of graphical design. Align everything with everything else.
A fundamental principal is you want to try and minimize the number of alignment lines. This is something low effort, but makes a huge amount of difference.
There are two fundamental types of alignment.
- edge alignment you have all the elements having one side lining up with a single vertical or horizontal line.
- center alignment you line up all the elements by their midpoint.
In terms of user interface design, edge alignment is what we want. Take a screenshot of your interface and draw all the item’s edge lines you find. You want to have as few as possible by aligning everything.
Having a lot of lines looks messy and uncoordinated. Having fewer lines results in a cleaner design that looks more pleasing to the eye.
Colour in User Interface design
I can’t stress this enough, keep it as simple as you can to start with. When creating a web or an App, start with a completely monochrome design. This way you focus on the layout, alignment and making things look good by position without being distracted by flashy colors, images or fancy stuff.
Then give it a single shot of color to highlight key things you want to draw people’s attention to. If everything is black and white, even a hint of color will stand out in a big way. Then maybe add two colors or three and go up from there.
Use Dribbble to search by color and see how different designers combined that particular color.
Make Text Visible on Images
When a text overlays with an image, specially if the image changes and the text does not, you have to be sure there’s enough contrast so the text is always readable.
The easiest option is use a high opacity background just for the text. This makes the text stand out from the background image.
Another option is to apply an overlay to the image with a f.e. 20% opacity. This overlay stands between the image and your text.
If you know that your text is going to be placed in a fixed position relative to the image put a gradient overlay which starts at 0% at the middle of the image, and becomes more and more opaque the further you go.