4 Essential Steps in Creating the Ideal Website Layout

In the spirit of New Year and with subtle urging by Marie Kondo, late January I decided to clean up my room of all the junk that’s been accumulating since I moved in here in late 2015. I expected that the cleaning up would be the hard part but it turns out that it’s the rearranging part that I have the most problem with, especially when it comes to my collection of books. I ended up placing things somewhat haphazardly and once everything’s been said and done, my room isn’t actually more organized than when it started, just with considerably less junk.

Trying to come up with the ideal layout is much harder than it seems, even when it relates to something as simple as my room, and this has never been clearer than in the world of web development. There is no such thing as a perfect website layout, it has always been a compromise between design and functionality and a compromise in trying to decide just how much and which information to show. As with pretty much everything in life, website layout is a balancing act and it would take serious effort in achieving that elusive ideal balance.

The search for the ideal layout

Even to this day, I cannot look at the Frankenstein that is the Nintendo 64 (N64) controller and not recoil from the horror. It was weird when I first laid hands on that thing and it’s still weird now whenever I read some retrospective on the console or the games for that console. It wasn’t the fact that the N64 still uses cartridge when everybody else were moving to optical discs that confounds me, it’s that weird layout that was eventually superseded by Sony’s DualShock, which eventually set the standard for the video game industry.

Still, what’s most peculiar is that the weird layout surprisingly works. It was a bit awkward to handle and the fact that the controller could be held in one of three ways was somewhat complicated but even with those niggling problems, I don’t think I’ve ever had any actual problems with the controller in the 4 years or so I actively played the N64. It might not look pretty, but the fact that it works while still incorporating something that was then considered novel, an analog stick, shows that Nintendo at least achieved what they set out to do.

As I’ve mentioned at the beginning, the perfect layout is something of a myth and trying to achieve the maximum result in all possible metric is just not possible. If it’s up to me for example, I don’t think layout should be beautiful as long as it fits with the overall design language and that it works the way it was intended but obviously, that’s just me. Coming up with the ideal layout involves more than the actual design process, the planning stages should also be taken seriously, as explained in these 4 elements in the creation of an ideal website layout.

Define exactly what you’re looking for

If this is for a client, ask them what they want this layout to be and simply ‘good’ is not an option. You should always keep in mind that depending on what kind of website it is, the goal what the layout is supposed to achieve differs accordingly and there is no one-size-fits-all approach when it comes to designing layout. The N64 controller is a shining example of this where the goal was to create something that could reasonably work with 2D games that had been the norm and the newer 3D games, such as Nintendo’s Super Mario 64.

Put your design on paper first

Back when I first started writing regularly, I approach the task using the same method I’ve been using for the past five years or so, by writing in a stream of consciousness way. This is acceptable when dealing with shorter texts but whenever I tried writing something more substantial, I tend to meander from my original scope simply because it turns out that I keep finding more things to say on the subject at hand. I finally realized just how big of a problem it is when I kept working on a single piece that eventually ballooned into a 5,000 word piece.

As of now, I’ve began using an outline to keep my writing more focused. This approach also works well when trying to design a layout; instead of immediately jumping straight into your computer, it might be useful to first do things the analog way and sketch out a rough draft of the design in a physical medium. Tinker with this design as many times as you would like and then once you have a fuller picture of what you’re looking for, it’s time to create the actual design on your computer.

Start working on the framework first

You know how when you’re trying to work on a jigsaw puzzle you’re advised to work on the edge pieces first before you move on to the middle pieces? The same line of thinking also applies to website layout. Instead of trying to tackle the overall layout or the main content section, try working on the framework first, which is the section of the UI that surrounds the main content and play host to some of the main navigation elements in your website. Always try to be systematic with your work instead of trying to tackle everything at once.

Prototypes, prototypes and more prototypes

Yep, even after you’ve sketched out the layout in a physical medium, it’s always best to put together a prototype first to see just how it measures up in a real-life setting. Papers and drawing boards aren’t interactive so you can’t actually test out your layout’s functionality but your prototype is essentially an offline version of your layout with all of the functionalities included. If you’ve been doing well up to this point, there should only be the minimum amount of changes after this stage but always be prepared for any eventualities.