With a logo sitting at the top left of the screen, navigation centred and left aligned content most sites and apps look pretty similar to some degree. It may be tempting to design something different to the convention for originality's sake but you should always ask, should you?
Understanding these principles are one of the major cruxes in the difference between understanding UX/UI and not.
When starting designing creative project, as designers we often approach it from an aesthetics first point of view and look for originality or novelty.
Whilst these can be elements of a website they shouldn't be the focus at the start of a digital project, which is why we usually start with wireframes and the standard design conventions that people expect.
These conventions can be deviated from, but unless they are well considered they may not deliver an experience that is expected from most users.
As an example of the convention in practice, here is the landing screen of Apple's website:
To break it down, this would have been what you did just now:
English speaking audiences are generally trained from an early age to read things from left to right, top to bottom. Even if you aren't actively engaged with the information, you'll tend to subconsciously scan the page that way.
This is the reason why the company logo is usually placed in the top left. It's the first thing a person sees and glosses over - this lets the user know that they've arrived on the site they are looking for. In this case, Apple.
You know Apple is a reputable company so the information on the page will be official, well considered and associate all of your feelings about the company onto the information on the page.
After that, they'll scan right, which is why the navigation is typically placed here. You usually won't read the navigation but if the information on the page isn't what you're after this gives a sort of subconscious bookmark to return to later.
Content comes third. Content varies based on context but generally speaking informational, readable, written content takes priority over aesthetics. This means it should be left aligned where appropriate, though exceptions can be made to keep the experience feeling fresh or for artistic reasons.
Then you have imagery, which is just supporting the content. If at this point you don't see anything engaging, you'd scroll or check in on the menu that you glossed over earlier.
Finally there's footers. Whilst footers can be seen as somewhat outdated, the reason sites have footers is that if the user scrolls to the bottom of any given page they are prompted to do something rather than just leaving your website. This can take the form of a newsletter signup, a secondary site navigation, a back to top button - whatever.
If you are going to forgo a footer I would highly recommend making your navigation fixed (or "sticky") so the user has some way of navigating away without having to scroll all the way back to the top of your content.
All of the points above demonstrate why the layout is so popular. It works and it's so pervasive across the internet that it gives users the benefit of knowing how to use your site as soon as they land on it, which allows them to focus more on your site's content rather than learning how to use it.
It's the default layout for most websites. However, we can override these habits and subconscious behaviours of users to give them a different experience.
For a rough example:
In this case, the "hire us" element is so large and bright that it encourages you to look at the design from the bottom left first - with the detail in the images also dragging your eye down to support it. As demonstrated, you can use size, space and contrast to change the visual hierarchy of elements whilst still getting the benefits of the standard layout users are used to.
Additionally, anything animated will also capture attention - such as the menu in the top left of this site right now, encouraging you to click it and discover the main way to move around site sections.
Although websites should be function-first, I also believe in using them as a vehicle for personal and artistic expression. So if you can break rules with intention to make something more unique - you should go for it.
A creative internet is a more engaging internet, and the fact that creative experiences are anathema to things like popups and ads that choke online spaces is a happy coincidence.
In the example above, french agency Viens-la have played around with the standard layout by instead of having their logo in the top left, they placed their name and services so you get an immediate idea of who they are and what they do upon arriving at their site.
They've then placed their featured projects in the top right and used a bottom aligned menu, which they have added an animated scrolling element to draw your attention to and ensure you don't get lost.
This all creates a more unique, interactive feeling when navigating the site which also works functionally and brings some fun in learning how to engage with it.
It's important however, to not lose sight of the functionality of the layout and have an intent of guiding the user. A good example of this is the Yale school of art's website:
This is a good example of breaking the rules just for the sake of breaking the rules. The menus, titles and elements are all over the place just for the sake of originality.
What does it want the user to do? What do people using it want to do? The orange box probably attracts the most attention, but that's just legal boilerplate that leads nowhere.
Without spending a lot of time reading it's difficult for the user to work out how to get to the information they are looking for. It just seems self obsessed rather than looking to help anyone do anything.
It's that principle you should be thinking about when you break from the standard conventions. What are you aiming to do and why? Whether that is encouraging the user to click a particular element, help them navigate, or have a particular kind of experience.
A good way I've found to test all of this before relying on user testing data is to just turn your brain off and just click on things without thinking about getting to a certain place. Then turn your brain back on, see what you clicked on and think about why you clicked on what you did.
It usually has an answer and you can adjust your design accordingly.
