8px Magazine
Published in

8px Magazine

6 Basic Design Tips

Common sense, but not really.

“In everything you do, refine your skills and knowledge about fundamental concepts and simple cases. Once is never enough. As you revisit fundamentals, you will find new insights. It may appear that returning to basics is a step backward and requires additional time and effort; however, by building on firm foundations you will soon see your true abilities soar higher and faster.”
Edward B. Burger, The 5 Elements of Effective Thinking

There, that’s my pretentious intro-quote. 😂 Let’s jump into it.

1. Don’t use 100% saturated black.

The first design tip I’ve ever given was to not use full black if possible. Throughout the years I came across designers and artists talking about using a darker shade of colour to replace black to bring depth and interest. Simply using a less saturated black would elevate the overall design.

And as much as how contrast is important, black and white is actually not the ideal match for accessibility, as mentioned in this research paper.

2. Limit font choice.

The more fonts you have on a page, the more complicated and messy it’ll look. Unless you know what you’re doing, don’t attempt.

Also make it a point to choose a font that’s actually readable, unless you’re using it for other purposes like adding texture or depth to the design. Fancy scripts might be nice but if the viewer can’t read it, there really isn’t a point (see point 6).

If you’re unsure about how to pair fonts, you have 3 options:
1. Choose one typeface that has a variety of weight.
2. Use font pairings recommended by sites like Fontjoy, Fontpair and Typespiration.
3. Go read my article on Practical Guide to Font Pairing for starters and build your own eye for font pairing.

3. Alignment as foundation.

Having an alignment helps structure your design. Generally alignment matters especially in type content because of the smaller size or visual weight it takes up as compared to images.

As a general rule for type, align left if your copy is in bullet-point form, it has variable (eg. blog), or formal content. And align justify only if the final output of content is fixed (eg. content for site that will not be changed). Center alignment, imho, should only be used for a small block of text.

If you’re using a grid, definitely check the design from time to time without the grid. The grid system exist for the purpose of alignment (and spacing), so don’t use it blindly. You don’t have to align every single element to something but it’s important to take note of it and judge by eye, which brings us to the next point.

4. Balance by eye, not by tool.

Our eyes always play tricks on us, so sometimes what is aligned using the design tools doesn’t look balanced or aligned.

In physics, balance is calculated by force and distance (f₁ x d₁=f₂ x d₂). 🤓 Translated in design terms that’s visual weight and negative space (with visual weight split further down into colour, size and contrast). If in doubt, trust your eyes (and maybe a few other pair of eyes).

5. Not everything has to be spaced equally.

I’m not referring to negative space in general, but spacing to signify that a group of elements is erm, a group. This point seem like such a silly thing to mention but it’s something that’s surprisingly debatable with some people I’ve worked with.

For example, in type setting, spacing between headings, subheadings and body copy. Instead of spacing the 3 equally, having a spacing between subheading and body copy would be more aesthetically pleasing.

6. ALWAYS consider visibility

Spot the difference. (Answer: the 2 in 2020 and the crop in 2 of the photos on the right)

Your design should be something that you can actually see– meaning the size, colour contrast, font, alignment, and crop of images and type. Make sure that the elements are cut off at a spot where they are still visible, legible and that there are no awkward corners or tiny spots left behind because it’s distracting.

Accessibility is a whole other topic but here’s some articles for further reading:
Designing for accessibility is not that hard
7 Things Every Designer Needs to Know about Accessibility

--

--

--

Life, by designers.

Recommended from Medium

UI/UX Articles and Interesting Tidbits of the Week

E-commerce Mobile Responsive Product

The quick, practical guide to picking colors for your designs

Design Doesn’t Scale.

UX Case Study: reimagine the ecommerce experience for IKEA

Why we gave up on our product’s UX/UI design in order to solve diversity and inclusion issues.

An Indie Approach to An Indie Approach to DataViz—Creating Market Cafe Magazine

The five covers of Market Cafe Magazine

Competitive eSports POC

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Esther Teo

Esther Teo

Human. Designer. Feels a lot. Thinks a lot. Writes sometime. https://esthertch.com

More from Medium

Future of User Interface Design is Amazing!

Becoming an interaction designer: DSI 08 — week 4

UX Design 101: Intro to Figma

EnerServ-Energy Management