Print Design Archives - Web Design London

Understanding visual hierarchy in web design

Reactive Graphics — Tue, 17 Sep 2024 09:25:06 +0000

Have you ever seen a website that was so messy you didn’t know where to look? If you are having trouble focusing on what is important, it might be because the layout doesn’t have a clear visual hierarchy. To create a successful website, you need to understand how people’s brains read and process information. In this article, we will look at what visual hierarchy in web design is, why it is important and the main principles that guide it.

Related Articles:

What is visual hierarchy?

Visual hierarchy is a way to arrange design elements by their importance to guide user’s attention. A clear visual hierarchy helps direct the eye to the most important parts of the page. A good way to see visual hierarchy in action is through poster design. Posters are often large and placed in busy spots where you only have a few seconds to catch people’s eyes. To do this, they are designed so that the most important information really stands out.

Why is visual hierarchy important in web design?

Visual hierarchy is key to making your website engaging and easy to use. Without it, if every part of your design were treated equally, nothing would stand out. Visual hierarchy highlights the most important elements, helping to guide user’s attention and keep them interested. It also helps people find what they need and do things like fill out forms or make purchases. By making sure important content stands out, it helps visitors navigate your site smoothly. Overall, a good visual hierarchy makes your website more intuitive and user-friendly.

Principles of visual hierarchy in web design

Understanding visual hierarchy in web design is key to creating an effective UI and UX experience. Let’s go over some principles you should consider when designing a website.

Scale

The principle of scale means that bigger elements catch the eye more easily, so using size helps show what is most important. To make scale work effectively in your design, use just three sizes – small, medium and large. This helps keep things clear and organised, like having different sizes for headers, subheaders and body text. Make sure the most important element is the largest to grab attention and keep less important elements smaller. Don’t use too many large elements, ideally just one or two to ensure they stand out and make the hierarchy easy to follow.

Colour

Colour isn’t just for making your site look nice. It’s a powerful way to create a visual hierarchy. Bright colours like red or orange catch the eye, while softer colours like green or blue tend to fade into the background. By using colour wisely, you can highlight important areas of your site, like CTAs or key messages. Just be careful not to overdo it. Stick to a consistent colour scheme that fits your brand identity and use pops of colour sparingly to draw attention where it is needed most.

Contrast

Contrast is important for creating a visual hierarchy in a web design. Contrast helps make certain parts of your design stand out. You can use things like colour, brightness or font-weight to do this. A bright headline on a soft background catches the eye quickly and a dark button on a light page is more likely to get clicked. Good contrast helps people spot important information easily.

Scanning patterns

When people browse the web, they usually don’t read every word. Instead, they scan the page to find the important parts, using different reading patterns. There are two main reading layouts the Z pattern and the F pattern.

The Z-pattern layout draws attention from the top-left corner first, moves to the top-right, then down to the bottom-left and finishes at the bottom-right. Each corner typically features something important, like a logo or a call-to-action button. On the other hand the F-pattern layout, which leads visitors from left to right and then back again is ideal for text-heavy pages.

Proximity

This principle says that elements placed close to each other on a website look more related than those that are further apart. Proximity has a strong effect on visual hierarchy in web design, to the point that it can even override other factors such as similarity in colour or shape.

Density and whitespace

Fitting too many elements into a space can make it feel crowded and messy. If elements are spaced too far apart, it can be hard to see how they are connected. The key is to balance things so that it is easy to tell which elements go together and which don’t. Use whitespace around important information or buttons to reduce clutter. This not only makes your site look better but also helps focus attention on key parts by setting them apart from the rest of the content.

Texture and style

Choosing the right textures and styles helps make your web design clear and appealing. Textures, whether subtle or bold, can make elements stand out and help separate different sections. Common options like gradients, shadows and patterns can make your website more eye-catching. But be careful, too many textures and styles can make the design look cluttered. Keep things balanced to maintain a clean and attractive look.

Consistency

People are often overwhelmed by information and naturally prefer simplicity, sometimes without even realising it. To ease their mental load, users look for shortcuts, patterns and straightforward ways to interact with digital tools and communication channels. Consistency is crucial for achieving this simplicity. It helps show how elements connect and creates a clear visual structure. This involves using the same icons, fonts, image sizes, buttons, labels and other key elements. By placing items consistently on the page, you help make a website easy to scan and well-organised.

Grid-based layouts

Grids help organise your page, making it easier for users to understand the layout and find what they need. Using grids for alignment and spacing helps create a visual structure, adding rhythm and flow that makes the content easier to understand.

Typography

Typography hierarchy makes text easier to read by arranging it to show which parts are most important. Without it, every letter, word and sentence would look the same, making the text harder to understand. In general every design should have three levels of hierarchy: a heading, a subheading and body text. After that, it is up to the designer to decide if any additional levels are needed.

How to test the hierarchy of your website

To test your hierarchy, do a user test. Ask someone who doesn’t know your website to visit the page and tell you which parts they notice first, second, third and so on. It is a good idea to test with several people to get more feedback. Their comments will show you which parts are too noticeable and which need more attention. Then you can adjust your page based on the hierarchy principles mentioned earlier.

Also we recommend checking out tools like Inspectlet, Microsoft Clarity and Hotjar. They offer features like session recordings that show how users interact with your site – where they click, how they move their mouse and more. They also provide heatmaps to help you see which parts of the page attract the most attention and which are overlooked. This insight can be really helpful for tweaking your site and making it more user-friendly.

Visual hierarchy is important in web design, but you need to understand your content and what you want to say before picking your visual hierarchy and style. Sometimes you can use different methods for visual hierarchy, but other times you might have to work with limited space or specific background colours. The best approach is to choose the visual hierarchy techniques that work for your situation and use them to make the content clear and easy to read. The goal is to organise the information so users can understand it easily.

Looking for a new website design?

Our work CONTACT US

The post Understanding visual hierarchy in web design appeared first on Web Design London.

Music Week Designs from Reactive Graphics

Reactive Graphics — Wed, 20 Jun 2018 09:36:09 +0000

Reactive Graphics was commissioned to produce a number of Music Week designs featuring rising star, Kris James. This included a magazine spread, an album sleeve, a web banner and the front cover of the Music Week magazine. You can view some of the work produced below…

Learn more about our Graphic Design services.

The post Music Week Designs from Reactive Graphics appeared first on Web Design London.

Reactive Predictions : Web Trends for 2018

Reactive Graphics — Mon, 23 Oct 2017 11:53:43 +0000

It’s that time of year again, when we at Reactive Graphics take stock and look back at the year we have had, seeing which web design trends for 2018 have been top-notch and which have been a flop. Here are our top 5 predicted web design trends 2018:

Striking video content and fabulous photography

The world is full of outrageously brilliant photography and video content these days. Not only are top of the range DSLR cameras absolutely cheap as chips at the moment, but if you are the owner of a smartphone, then chances are, you are also a pretty awesome smartphone photographer. We are a society obsessed with selfies, Instapics, filters etc. and our collective eye for detail is growing more and more fixated on the perfect pic. Whether it be for your Facebook profile pic, Snapchat story or a Pinterest pin.

So, if your website is lacking perfection when it comes to imagery, it’s probably time to shut up shop and move back to the 20^th Century. Back in simpler times, pixellated pics were considered arty. The fear of falling victim to ‘false internet advertising’ was less real and more humorous. Like when you ordered cowboy boots for your autumn winter wardrobe and they arrived in a matchbox instead of a shoebox and looked just perfect on your nephew’s Woody doll.

So, striking video content and photography is not only about aesthetically pleasing imagery. It’s about accuracy and being true to the services and products you provide. This is vital for building a trusting customer base and providing a service that people would be happy to recommend. Being transparent online is an extremely useful business tactic. If consumers know what to expect from you, then the likelihood of them being let down or misunderstanding what’s on offer is dramatically reduced.

Amazing content not only does wonders for your customer base but also helps significantly with marketing your business. This can be through unrelated ‘sharing’ of your content or reusing your imagery. Either way, you are getting YOUR brand out there, potentially into a different demographic of potential customers.

The hamburger and other delicious icons

The hamburger menu icon is one of those simple symbols, which will go down in history as one of the most effective. Consisting of three straight horizontal lines stacked one on top of the other – the top and bottom lines being the bun and the middle line being the burger – the hamburger takes up little space and is not restricted by language and can be rendered on all web-enabled devices.

The hamburger really is an icon of our generation, something that has gone from ‘what is the deal with those three lines in the corner of that website?’ ‘Where the heck is the menu?’ to ‘……….’ That’s right, silence. Because everyone now, knows exactly what the function of that simple little icon is. We don’t know how these sorts of transitions take place, from something being completely new and ineffectual, to them being a full-on part of our digital lives. From social media icons, the search magnifying glass or the microphone icon, all of these tiny images are now part of a digital language that we all recognise. Despite them all being, for the most part, is less than a decade old. Awesome, effective icons are set to stay and this brings us straight onto our next point about intuitive design…

Intuitive User centred design

Your website design should always consider the user/customer as the most important person in the whole process. If the interface for your website is not user-focused, then is it unlikely that your customer base will be able to interact with your online business without a hiccup, if at all. A glitchy website that doesn’t do what it says on the tin, is the most annoying thing ever. Equally annoying is a super stylish website that is completely dysfunctional and totally style over substance.

As a website user, you want to feel that your web browsing experience has been developed with you in mind. A slick, easy experience that allows you to do whatever you need in about 4 clicks. Maximum.

Intuitive design means that the customer doesn’t have to do too much leg work to get what they want. YOU as the business owner are supplying THEM a service. By making their experience easier, you are doing yourselves justice.

2018 is the year when slow load page times are just unacceptable. Websites that require flash or any other random plugin to work are completely obsolete. As well as low-quality design, these simply will not be tolerated. So there you have it, it’s the intuitive way or the high way!

Card design ala Pinterest

The card design has been around for many moons and is set to be here for quite some time yet. With its simple, yet effective layout and structure, card design offers a clean, off-beat style of web design that is very ‘Skandi’. Which is very on-trend. Paired with simple sans serif typography and muted colour palettes, card design can take your website from tired to contemporary. Without having to reshape or redesign the whole concept of your site.

Think cool mood boards, retro colours and clean typography. Card design is a minimalist’s dream and set to be a favourite amongst web designers and developers in 2018. Not only does the simplistic design of a card designed website make it easily navigable, but it also allows your content the space to shine.

Long-form content

For years, businesses have refined their content into snappy, short form-focused nuggets of information that are easily digestible. But the times are a-changin’!

Well, not completely, but this trend of making content so short and focused that it could essentially fit into a tweet. This is something businesses are now reconsidering when they design content for their websites. We think the long-form text approach is, naively, something they do because they anticipate it will increase organic web traffic. Unfortunately, this isn’t always the case. Sometimes the best way to approach content is simply quality rather than quantity.

So, here we are, our top 5 predictions for web design trends 2018. If you want to be ahead of the curve and redesign your website or create a site from scratch then please do get in touch! We’d be happy to help!

P.S we are also now on Instagram so come say hi!

Check out web design trends from previous years:

2016 | 2014 | 2013 | 2011/12

The post Reactive Predictions : Web Trends for 2018 appeared first on Web Design London.

London, the home of design inspiration?

Reactive Graphics — Thu, 19 Feb 2015 11:30:42 +0000

When you close your eyes and think of London, what do you see? A bustling metropolis of busy professionals, ethnically diverse communities and high-speed tube travel. Immersed within this is a rich artistic culture that spans decades of revolutionary creative thinking and innovative designs. With the vast array of arts organisations and famous museums across the whole of London, artists and designers surely cannot help but be inspired and influenced.

The London art scene is a vibrant hub of creative individuals across design, fashion and digital landscapes. Many creative designers embrace technological advances inspiring one another to follow in the footsteps of other London innovators who continue to influence artists worldwide. London is a city with an intrinsic web of arts culture and although you may not even realise it, your day is filled with images that have been considered, developed and reimagined to shape the landscape of our city.

Reactive Graphics are always inspired by other designers. We are creative team of London web designers with multi-discipled artistic backgrounds and interests. Based in London and just moments from Putney Bridge tube we are lucky to have daily reminders of some of the design classics that are recognisable to London.

London Underground

An iconic design that some of us take for granted is the London underground type-face and roundel by Edward Johnston.

Typography is an extremely important part of web design today. Edward Johnston, a Uruguay born British craftsman was one of the Big Daddy’s of modern calligraphy and font design. With commissioning from ‘The Underground Groups’ president Frank Pick, Johnston created a self titled sans-serif type-face that has served as the one of the most recognisable corporate fonts in Europe. The Underground font seen by millions of people every day has been used –and only slightly tweaked – in the last 100 years. ‘The Underground Group’ commissioned the work as a plan to strengthen the branding campaign of London Underground whilst emulating Pick’s desire to use a type-face that had ‘the bold simplicity of the authentic lettering of the finest periods and was unmistakable to the twentieth century.’

Johnston Typeface- Copyright TFL

Johnston was the first font in the humanist sans-serif typeface, taking inspiration from traditional Roman lettering with a simple and professional edge. This timeless branding is something that web and graphic designers in London are always trying to emulate.

The Roundel

The second part of the London Underground branding campaign is the widely used and extremely recognisable Roundel. Seen at every station across London the originally known ‘bar and circle’ first appeared on Underground station platforms in 1908. The make up was a solid red enamel disc and horizontal blue bar. First commissioned to stand out from commercial advertising the roundels were timber framed to add extra prominence. In the late 1920’s Johnston designs several different versions of the roundel symbol in order to create a unified identity for the brand.

Recently, Reactive Graphics were commissioned by Transport for London (TFL) to design a newsletter/eshot that could be used across all platforms to provide news updates to TFL users. Working within a design template that encapsulates decades of minor adjustments but is almost identical to the original design was a great project for us to work with. Drawing inspiration from new designs whilst paying homage to the originals.

Left is the TFL newsletter/eshot design updated and reworked by Reactive Graphics.
Below is one of Johnston’s original roundel designs.

Harry Beck: The London Underground map

The design of the London Underground map that we utilise across print and digital platforms of the London Underground map is an evolution of a design conceived by Harry Beck way back in 1913. The somewhat radical schematic transit map of London’s public transit systems were cleverly drawn up by Beck under the premise that passengers riding the underground were not too bothered about geographical accuracy, but were more interested in how to get from one station to another.
Sounds about right to me.

The map was refused on several occasions due to it’s geographical inaccuracy (despite design brilliance!) as stations were plotted like an electricity circuit diagram where distances are not as important as order.

Other London classics

Looking out of your London office window you are likely to see many familiar things. Perhaps a few redesigned ‘pillar-box’ red route-master buses (sadly only two of the originals are still in circulation) or perhaps a Giles Gilbert Scott designed telephone box. Then there’s the digital advertisements amongst a scattering of maybe Banksy’s and pavement artworks. But it is not only those designs and artists that are everyday influences in the London web design scene.

London’s artistic history also involves stars like, English Romanticist landscape painter J.M.W. Turner who’s eclectic works made in the 1800’s hold much precedence in todays society. With bold use of complementary colours, multi-textured strokes and an incredible depth shown in light and shadow through his paintings, you can see why many arts pro’s say his work was ahead of its time. Depth is something that we aspire to create through parallax and responsive web design and was also a challenge for print based artists back in the day.

Frank Kelly, exhibitions curator at the national gallery describes Turner’s ability to create depth using light saying ‘It’s there from the beginning, the early watercolors, where the shafts of sunlight are breaking through that cloudy sky…all the way through the great, late visionary works where you’re really staring at the sun.’ Whether you love his work or you hate it, it is amazing that one artist from down town London – as gallantly played by Timothy Spall in Mike Leigh’s 2014 film ‘Mr Turner’– has inspired across two centuries of artists both print and digital.

Then there’s William Morris, English textile designer, poet and socialist activist (amongst many things) who lived in the big city for most of his life. He is now most commonly known for his textile designs and intricate patterns for tapestry and wallpaper, inspiring many artists, illustrators and designers across the world.He was a London designer who emphasised organic dyes such as walnut shells and roots for various shades of brown in his work offering a very natural feel and texture to the designs he produced. Again, quite ahead of his time in terms of techniques and design innovation, his prints are replicated across many of today’s creative industries including textiles, fashion and graphics.

Morris’ Snakehead print inspired by indian textiles. A tapestry in the 1800’s and an iPhone case in 2015.

He was also a pioneer of the arts and crafts movement which straddled the end of the 19th Century and the beginning of the 20th Century – and amongst his biggest fans was typographic artist Rudolf Koch. (Super fan!) The teachings of Morris were evident in Koch’s use of hand-lettering and type-face design, which saw him to become the (German) daddy of modern Calligraphy. Which brings us full-circle to his contemporary, the (english) daddy of modern calligraphy, Edward Johnston (as mentioned above) with their awesomely influential father-like typographical wizardry.

There are many influential artists whos work is intrinsic to the London design scene of the 21st Century. Here at Reactive Graphics we embrace all types of design in an effort to broaden the spectrum of what the London web design scene can be. We work with clients from very corporate and professional worlds to artists and creative companies who require an open minded and flexible approach to web design. We take pride in our city and we believe that London IS the home of inspiration. Web design is an art, and London is home to a rich and diverse culture that is the perfect workplace for us digital designers.

If you would like more information regarding the services that we provide please visit our services pages. Or if you would like us to design your new website then do get in touch. Our on site cafe serves lovely coffee, so feel free to drop by.

#wearereactive

Save

The post London, the home of design inspiration? appeared first on Web Design London.

Book cover design – Away from the Dead

Reactive Graphics — Thu, 09 Oct 2014 11:27:33 +0000

Take a look at our latest book cover designed for Holland Park Press. Away from the Dead is written by Karen Jennings. Please click here to find out more.

Save

The post Book cover design – Away from the Dead appeared first on Web Design London.

CSC Toolkit

Reactive Graphics — Wed, 03 Sep 2014 11:02:10 +0000

Our latest print design project involved creating a PDF toolkit/guide that is suitable for both print and online distribution. The toolkit written by the charity, Consortium for Street Children (CSC) and designed by Reactive, will be used by organisations across the globe. The document provides facilitators with the tools and guidance needed to support and help young girls living on the streets.

For more information about CSC, please got to: http://streetchildren.org/

Save

The post CSC Toolkit appeared first on Web Design London.