Published on

3 Web Design Principles for Beginners

Authors
  • avatar
    Name
    Ronald Luo, MSc
    Twitter

1. Fall back on the Golden Ratio

One of my favourite numbers, and one that many designers and mathematicians know all too well is the value 1.618.

The golden ratio represents a simple geometric relationship observed in nature. Early in its discovery, proponents of the golden ratio believed that the relationship was aesthetically pleasing to the eye. And although outrageous claims have been made regarding its importance, its relevance to painters and architects cannot be understated.

Why should web developers know the golden ratio? The rule is that if you are unsure about the value of a particular font-size, line-height, the width or length of an element in your project, obtaining a value from the golden ratio is the first idea to consider.

For example, pretend we decided to use a font-size of 20px. What should the line height be? Using the golden ratio, we could obtain an aesthetically pleasing line-height simply by multiplying 20px by the golden ratio to obtain 32px, it's that simple.

In theory, this technique can be used for the relationship between any two elements or properties. In practice, results may vary. However, the golden ratio acts as a natural starting point for many web design road blocks, so it's certainly worth considering.

How do we compute the golden ratio? One way to approximate it is by listing out the Fibonacci sequence, and then taking the fraction of every element by its previous element:

  • 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ...

Let's assume we index at 0. Starting at the 2nd element, we can compute 1/1, then 2/1, then 3/2, then 5/3, then 8/5, 13/8, 21/13, 34/21 ... so on and so forth, until we see that the result begins to approximates the golden ratio with ever increasing accuracy. So at the 12th Fibonacci value, 144/89 approximates to 1.6179. Cool, right? We could continue in this way, yielding more precise estimates of the golden ratio, until we die of old age.

2. Don't ignore smartphones!

Mobile first development is a trend that is sweeping the product development industry, and it's no wonder why. Smartphones today account for approximately half of all global web traffic. Statista researcher, Jessica Clement points out that in developing nations, emerging digital markets are predominately mobile-first.

Today, we are a nation of increasingly connected individuals carrying increasingly miniature devices. And if your only focus is to get your product out the door, then it's easy to take those individuals for granted.

It doesn't need to be difficult. Even if your product is intended for the desktop only, a case for mobile-first development can be made on the grounds that a mobile interface is much simpler to design for. It's true, while mobile devices may account for a small percentage of your total expected user base, mobile devices also take up a fraction of the screen real-estate compared to a desktop.

A mobile interface (375 × 812) takes up approximately 6× less area than an average desktop (1920×1080). Ultimately, this means that mobile development is much faster.

A mobile-first work flow obeys physical laws. By and large, it is easier to design a mobile interface and scale it to desktop than to do it the other way around. Think about the second law of thermodynamics, which states that entropy is always increasing in the universe.

In the end, it's up to you how you build your website, but a consideration of mobile interfaces can introduce your work to more users, and doesn't necessarily add much to your total development time.

3. Practice Mise en place

Mise en place is a practice that originates from french cuisine. It's the idea that a chef should put everything in its rightful place, properly prepared, before any actual cooking begins.

Have we overlooked its importance in the field of web development?

Design is often a gruesome, frustrating process for incoming and experienced web developers alike, but it doesn't have to be that way. In fact, web design I would argue is simple, when fonts, font sizes, images, colour palettes, margins, and paddings are picked out ahead of time. It is only frustrating when one creates something from the ground up, and tackles all of these processes together.

Which hat are you currently wearing? You can't do everything at once. If you want to watch someone struggle, look no further than the chef that hastily balances the role of a cooker, chopper, and a cleaner;  or an author that develops the poor habit of editing as they write.

The fact is, building an app or website requires putting different hats on. Sonke Ahren's, author of "How to Take Smart Notes" argues that each task requires a distinct mode of attention. He writes:

"Writing a paper involves much more than just typing on the keyboard. It also means reading, understanding, reflecting, getting ideas, making connections, distinguishing terms, finding the right words, structuring, organizing, editing, correcting and rewriting. All these are not just different tasks, but tasks requiring a different kind of attention. It is not only impossible to focus on more than one thing at a time, but also to have a different kind of attention on more than one thing at a time." Ahrens understands the importance of dedicating distinct modes of attention for different tasks. He argues that there are distinct mental processes associated with everything we do - web development included. Experts, he concludes, are the ones that see these differences, and direct their attention accordingly. Ultimately, we see that mise en place acts by the same means.

Next time, before you start to work on a personal project, pick the font families, sizes, icons, and anything you can think of ahead of time so that when it comes time to put it all together, you can do it with ease.

Closing Thoughts

For some developers, design work is often a tedious and depressing stage of the development cycle.

I often hear stories of how frustrating it is to work with CSS, and how design is at odds with more interesting elements of the project. Likewise, it can be all too difficult to make a webpage look good, and given a need to fully understand UI/UX principles, many developers shy away from design work altogether.

In reality, I believe an adherence to this anti design mindset robs developers of the joy in seeing a page finally come together. Moreover, it over states the importance of fully understanding design elements, when the very few principles are required in practice.


👋  Thanks for making it to the end!

  1. Click here to read more about Deep Work
  2. Click here to check out other articles!
  3. Click here to check out my GitHub!