20 March 2020
As a developer, your code can be pure poetry. You may write the most maintainable piece of art, with comments and indentations to absolute perfection, rendering zero errors when debugged. Yet, without design considerations, your magic show can be reduced to a tacky card trick.
On the receiving end of most software applications are living breathing humans with very human feelings. It’s said that we make 70% of our decisions on an emotional level, and only 30% logically. For your software to appeal to users, you have to acknowledge the part of us that feels before it thinks.
Making a habit of these 6 design tips can level-up your applications without breaking a sweat.
Using a set colour pallet adds a layer of professionalism to your interface. You’ll need a handful of primary and secondary colours, a standard content grey (not back) and a few opacity options.
With css SASS or LESS, you can define these colours in your stylesheet and reference them by name. Otherwise, keep the colour codes in a comment or notepad file and stick to them strictly.
More consistency equals fewer distractions.
Refer to your client’s branding guide for their preferred web-safe font, or keep to something simple like Arial or Calibri. Make sure that your font is applied to all of the text, including form elements and buttons.
Next up, define the font sizes for your paragraph and heading classes. If you have any rogue text like table data or labels, add to the p tag.
Tip: If you’re not using an icon font, you can get away with the asterisk wildcard to apply your chosen font globally.
font-family: Arial, Helvetica, sans-serif;
Hover and active states
On desktop, hover styles show users what interactions the interface affords. On mobile, active styles assure them that their actions are registered by the system.
Pseudo-classes (like :hover, :active and :focus) can ensure that all interactable elements give visual feedback. This is commonly achieved with instant or animated background transitions.
Crisp images can uplift your application’s look dramatically. On the flip side, fuzzy and inconsistent images can have the opposite effect. The first rule is to use images sparingly, and the second is to use them wisely.
A few simple ways to improve your image game:
- If an image serves no purpose, consider removing it
- Use icons from a single icon pack or icon font
- Invest in quality stock images
- Choose images with the same theme or design style
- If it’s pixelated, you’re better off without it
Fibre has transformed the way we use the internet, but not all users have access to a fast and steady connection. Loading delays can cause frustration, and in some cases worsen your bounce rate.
You can compress raster images with free online tools and install a browser extension to measure overall loading times.
Ideally, your solution should be accessible within 3 seconds. To meet this benchmark, you may have to prioritise the loading order of page elements to serve the topmost and primary elements first and add the supplementary items thereafter.
If you’re working on device-agnostic solutions, it’s essential to implement smooth responsiveness. This may include the following small-screen adjustments:
- Collapsing navigation in hamburger menus
- Summarising content-heavy sections with an option to read more
- Increasing the size of form fields, links and buttons to accommodate touch input
- Decreasing font-sizes
- Using fluid containers
- Stacking horizontal columns vertically
- Swapping out large images for mobile-specific ones (for the sake of file size and context)
In addition to the end-user benefits, these recommendations can make your front-end tasks easier too. Have fun unleashing your inner designer, and pop us a mail if there’s anything specific you’d like us to cover next.