Skip to main content
Web designWeb development

Key principles of Web Design for the Digital Age

By 15th January 2018January 12th, 2024No Comments
Amazon Alexa

So what does all this mean for web design and are the key principles of design shifting to suit this new digital obsessed era that we are living in?

The answer is of course yes. But how to keep up with the changes, that is the question!

Web developers are some of the key people at the forefront of these massive developments in the technology sector, creatively coding and generating graphics that provide tools for both everyday living as well as for specific purposes for global multinational corporations websites. But it is not the key principles of design have changed – the golden ratio remains high up on it’s pedestal of aesthetic web design rules – but the way we see, hear and interact with the web is something that IS shifting beyond our understanding and control.

The Internet is changing the way we learn and digest information and the fundamental characteristics of humanity are being reshaped, foremost by our capacity to utilise and develop digital technologies using the Internet.

We certainly a clever bunch, aren’t we?

So what is it that drives this desire for an intuitively seamless interconnected web world and what key principles of our craft should we hold onto, in a profession that is in a constant state of flux?

Below we outline some key components of web design that can be incorporated to help maintain your web presence effectively…

MINIMALISM

Space. Breathe. Calm.

No bumf. Just the bare essentials

Minimalism is one design trend that is not going away. Think Scandinavian inspired spaces, carefully selected content and simply intuitive menus.
With the only negative to minimalist websites being that there might be less space for lengthy texts and complex call to actions, this can swiftly be changed into a positive just by forcing you to be more considerate with your content. Minimal doesn’t need to be sparse, it just forces every element to be there for a reason.

Minimalism - Coffee on desk

MICRO-INTERACTIONS

Let’s take a moment to give a huge round of applause to social media. Bravo Facebook! High five Twitter! Way to go Instagram! You have all introduced us (and in part reluctantly) to constant micro interactions and we LOVE them. That’s right we don’t just like them – like the days of the Facebook thumbs up – we love them. <3

We find great joy in tailor made options that personalise our interactions with a webpage and we want to see them everywhere. Why should we have to click onto a new page to leave a comment? Why should I have to search for a sign up to newsletter button on a website? The answer is you shouldn’t and this is all down to designing and refining the ultimate user experience. We want intuitiveness, we want speed and we want to feel like an individual in a sea of keyboard clickers! Micro-interactions help make a user feel valued and part of the community, something to consider in your next site redesign.

PROGRESSIVE WEB APPS

So, what is a PWA I hear you cry. Well a progressive web app is basically a website that looks and feels like an application. No messy menus, no crazy pop ups, just clean user-centred optimised websites, that cater to the user first, then deals with business later. Another option for those who want to offer a no-nonsense web service for users.

MOBILE-FIRST

Although mobile-first design and development has been around for ages and has been adopted as a first port of call for lots of web designers and developers for quite sometime, some companies are reluctant to follow suit due to lack of information around the importance of what mobile-first principles employ. Well, many internet users only ever access the web via there mobile devices (more than you’d think) so this, along with major changes afoot in 2018 from SEO giants Google, mobile-first design should perhaps be where those wireframes begin to take shape.

Google webmaster states:

‘To make our results more useful, we’ve begun experiments to make our index mobile-first. Although our search index will continue to be a single index of websites and apps, our algorithms will eventually primarily use the mobile version of a site’s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results…’

This is HUGE news. Remember back in 2015 when Google practically said RIP to non-responsive websites (Responsive web design blog) well this new shift, is practically digging up all those issues and then burying them away in an even deeper hole. Gulp!

When you think about it, a mobile first approach is obvious. It means that you begin with managing content on small screens, then you can build on that as you go. Start small, then flourish.

Mobile First Design

FULL-WIDTH DESIGNS

Here at Reactive Graphics clients are always coming to us with requests for full-width designs, firstly as they think they will get more for their buck (which is kind of true) and secondly, as it seems to be one of the key trends for 2018!

With Internet enabled devices coming in various shapes and sizes, it is tricky to even comprehend what full-width resolution even is any more. Although 360×640 is the most widely used screen resoultion (mobile), 1920×1080 (full HD) is not far behind and the Apple 27″ iMac and Thunderbolt displays offer an ample resolution of 2560×1440!

So, as mentioned above, scaling up a mobile first design might be the easiest way to achieve a flexible full-width masterpiece website. But a full-width design option has many caveats beyond simply creating a template that fills a display beautifully. As we know bespoke is best and fluid full-width design is as bespoke as it gets, with many configurations of one simple template possible.

Full-width can mean irregular spacing. It can mean adapting to a variety of viewing distances. It can mean wanting to add an array of useless extras in the whitespace because you think you should. But as long as you are aware of these trappings (and we are!) that full-width design offers a beautifully maluable template which ebbs and flows perfectly to fit a variety of screen resolutions.

www.webdesign.tutsplus.com suggests ‘a variety of approaches would set you in good stead; build for mobile first, allow your layout to flow widthways, boost scale (slightly) and reposition modular elements.’

Simple?

VIDEO DESIGN

Ok, so I hate to state the obvious here, but video, is everywhere. And not just on the web. Next time you are out shopping in town, take a quick look around. There are videos to advertise clothes in shop windows, digital billboards showcasing new toothpastes, people watching videos on their phones as they bump into you in the street…it’s endless.

So why would anyone want to add to this all-encompassing visual noise?

Well, the answer is simple. To not be left behind.

Online Video is the optimum way to get across vast amounts of information in a short period of time. The viewer can engage with a 20 second short, promoting your brand and gain over 600 words worth of detailed info. If the video design is well thought-out, it is possible that you could also create memorable visual details that actually endorse the message of the overall video. For example, why have a video of someone saying ‘I am an awesome digital illustrator…’ when you can show them being an awesome digital illustrator!

TYPOGRAPHY

Thankfully over the years, typography and the way we use it, seems to be an art-form that is being refined as fine-tuned as we begin to understand more about screen renderings of text. Gone are the days of comic sans signage (although still a legit font when used cautiously and not just ironically) and sans serif types are taking centre stage.

Sans serif fonts in most cases are the epitome of minimalism in type. And you know how the world fees about minimalism right now. San serifs are clear, crisp and most importantly, legible across various different devices. But perhaps you want to stand out from the crowd and unless forking out for a designer to create a you shaped font from scratch sounds appealing, then you might want to search online to find an answer beyond the parameters of trusty helvetica! (We love you Helvetica, always have, always will!)

We Like You, Too :)

In 2016, Google fonts got a total revamp. If you haven’t used it before, then where have you been? It is now easier than ever to find the right font for the right project. FREE. Google fonts is a library of over 800 fonts that is completely open source, with fonts published under licenses that allow you to use them anywhere in a personal or professional capacity. Along with Google, there are also other possibly funkier directories to consider, like www.dafont.com or www.losttype.com. Where ever you find your fonts, there are so many options out there to choose from for free, that perhaps you could find something that helps revamp your logo as well as bring your website copy to life.

So, if you want to revamp your site or start from scratch in 2018, then please do get in touch and we’d be happy to help! Just drop us a line.

Leave a Reply