Once upon a time, web sites were ugly!
There was a trade-off between great imagery and useful text.
There was a trade-off when using web standard and non-web standard fonts.
There was also a trade-off between creating a beautiful looking website and an informative one.
Websites used to be text heavy with long paragraphs and essay type content complimented by images as visual aids.
The text and images were placed side by side with no layering or overlapping and web design on a whole was based on ridged tables rather than fluid layouts.
Today, the four elements of graphic design, UX, copywriting and coding have aligned harmoniously to create better websites as a standard.
Programming and graphic design no longer compete, they’re collaborating.
Text and images are no longer fighting for individual attention. They’re having a steamy affair instead.
Web design today is a graphic designers dream.
You can fully utilise visuals and typography with less restrictions to create a beautiful web design that’s not limited by trade-offs.
Bad visual web design still occurs.
Because creating a beautiful web design is not easy.
It requires a master plan to merge technical know-how, a library of information, hundreds of visual assets, functionality, programming, graphic design, communication, maintenance and expertise into one piece of interactive design communication.
A lack of planning and skill, leads to bad web design in terms of functionality and in terms of aesthetics.
And bad visual web design usually occurs for one of three reasons:
- The web designer is an amateur designer
- The web designer is a programmer with no design skills
- The web designer is the client trying to do a DIY job
In any case it’s the lack of graphic design skills that create ugly websites.
Graphic Design for Web Design
Graphic design originally revolved around print design.
It has a bible of technical terms used specifically for design and print, and that’s what most graphic designers know……design for print.
Graphic design for web design is a little different.
Whilst all the design principles and professional practice remain the same, the final medium makes a big difference as to what can be produced and how, for a digital medium that also has it’s own code of best practice.
The five major differences between graphic design for print and web are:
Print design requires high resolution images and the end file size can be any size.
Web design requires hi-res images but with smaller file sizes, ones as small as a low-res file so websites can load graphics fast.
Therefore all artwork needs to be optimised for web to get the best balance of quality vs file size.
- The Medium & Canvas Size
Whilst print has fixed dimensions with standardised sizing, the web has no fixed size.
Artwork needs to be produced at various sizes that can work in multiple layouts and dimensions.
The web canvas is somewhat fluid in size.
- Graphic Design Vs Programming
Sure, you can design an amazing piece of art with text overlaid in Photoshop.
But can that artwork be produced by creative coding?
If not, can some of it be replicated by code? No?
Well, can just the text be produced by coding?
Producing graphics or text by code will produce a leaner, quicker and more optimised website.
With graphic design for web design you need to know where to draw the line and where to program it in, instead.
- Interactivity & UX
Graphic design can be fairly limited in terms of action.
It’s a bit of a point and tell experience.
Web Design is more about interaction.
The level of engagement it produces surpasses any other informative medium.
The point is that you’re not creating a static piece of design, you’re creating a piece of design that provides boundless journeys for the end user.
- Programming skills
Programmers can make wonderful, visual and creative inventions for the web.
The better they are at design, the more impressive their work is.
Likewise, the same goes for graphic designers.
The more a graphic designer knows about programming, the better their web designs will be.
A designer needs to know at least a little programming to create a beautiful website.
These are some of technical aspects to consider when producing a beautiful web site.
But they’re not the only things that make for beautiful web design.
Let’s look at some of the more specific tips and tricks to creating a beautiful web design.
1. Creating tone of voice and emotions through beautiful website design
In 2012 web sites became friendlier.
They lost their old boring corporate look and became personal, informal, trendy and friendly.
This was down to two reasons:
- Social media made everyone social, bringing back that human touch to sales and information.
- The new, big internet businesses were not corporate types in skyscrapers and suits, they were programmers in their garages developing software suites.
A new generation of businesses broke the tone of being formally professional.
Instead, they made themselves likeably professional.
In doing so they created a new era where tone of voice was extremely important in a web design.
Each aspect of vocal and literal communication will be considered to create a brand voice:
Whilst the language will be unique, connecting to a specific demographic, the choice of typography will reinforce a tone of voice with style, to emphasise on what’s being said.
This tone of voice will be apparent throughout the web design, using language, text formatting and typesetting to consistently communicate a specific voice through menu systems, page names, call to actions and literally any text content available.
Make sure you develop a tone of voice for your web design before you start designing.
To do so you may need to figure out what the brand is about and who’s being targeted.
Check out our article about Creating a lifestyle brand to get more info on who you should be targeting and how, to create a tone of voice for a website and brand.
A tone of voice will form the foundation for a web design that communciates originally and beautifully.
2. Beautiful Scrolling Websites & Beautiful Sales Journeys
There was a time when clients were adamant on staying above the fold and cluttering up the hero section.
And to be honest, I’m still asked to do the same thing today.
Whilst I get the whole point of staying above the fold, there’s two great benefits of scrolling.
- Within a browser, a webpage can be as long as you want.
There’s infinite space to tell a well-coordinated story that hits harder than a quick sales pitch above the fold.
- Thanks to smaller devices, everyone will have to scroll at some point when looking at a website.
There’s no escaping the scroll, so use it.
Scrolling is not just back in fashion, it’s a necessity for mobile optimisation.
If you’re building a website, don’t be concerned with going below the fold.
Think how you can use it more effectively to create a compelling sales journey.
Sales journeys on websites are no longer boring novels full of text, they’re short and sweet chapters with illustrations, painting a bigger picture.
Start by writing engaging website copy and create a sales story to take the user down the page.
- Break down your copy into sections
- Plan how it can run down the page
- Use links to drive users to different pages.
Despite the above, you also need to be careful not to go overboard and fill the page with boring, too specific or irrelevant content, making the page too long.
- Think of everything you want to put on the page
- Strip it down to the 5 most important things you think need to go on the page
- Organise it on the page with a hierarchical structure.
The most beautiful sites in the world may captivate you above the fold but they keep you entranced under the fold.
Beautiful web designs scroll and go below the fold.
3. Big and beautiful web site images
The ability to use big images on a web site has always been a dream for web designers.
But those dreams were always smashed due to compatibility and functionality.
Big images on websites:
- Take Longer to load
- Take up too much screen space
- May not display correctly
- May not be visible to certain users depending on the screen size they’re using
However, the fast development of internet and computing technology now allows us to do so.
All of the below are reasons to why we can now use big, high quality images in web design:
- Faster internet connections
- Computers with more processing power
- Better web browsers
- Better Programming
- Better technology
High definition phones, monitors, televisions, screens and broadband have become the norm.
And it’s only natural that we take advantage of all these advancements with high definition design and communication.
A beautiful website will use bigger and better quality imagery because it entertains and raises emotions through graphic design.
Bigger and better visuals provide a solution for attracting attention, telling a story and selling a message with great influence.
If you want a beautiful website? Use high impact, photos and graphics on a large scale
4. Beautiful & Creative Typography
Non-standard web fonts!
Websites have always been restricted to using only a handful of system fonts.
Whilst it makes for good cross device compatibility and accessibility, it also made each website boring with no individuality.
There were plenty of ways to work around this problem and non-standard web fonts for web design, but there was never a full proof solution which resolved all incompatibility or search engine issues.
But just because you can use a lot of different fonts, its doesn’t mean that you should.
One that requires some good and solid design instinct and practice.
If you can get it right though, what you’ll be left with is a beautiful web design.
Take a look at these examples of how web designers have used great typography ro produce beautiful web designs.
5. The Style of Beautiful Web Design
The internet has always had its own periodical style.
- Web 1.0
- Web 2.0
- Web 3.0
Adhering to the latest style can be a great way of freshening up a web design and moving away from an old outdated style.
But over using a style can also make for an unoriginal looking website.
The most beautiful websites tend to acknowledge web styles and utilise them in their own way, minimally, complimenting their own brand identity design.
Use web styles as inspiration but try not to conform to or mimic web styles.
Instead create a new style and use it consistently across your web design for a beautiful finish.
That’s what makes a beautiful web design.
Original and consistent styling.
6. Parallax scrolling
The easiest way to describe Parallax scrolling is 2d animation which looks 3D animation, that’s activated upon scrolling.
It’s actually two elements moving at different speeds within the same space to immerse the user in a depth of field.
It can be used subtly or substantially and can do wonders to tell a story.
Whilst it may have its faults technically, it looks stunning.
If possible, use parallax scrolling to create a beautiful website experience.
Take a look at our blog homepage for an example of parallax scrolling.
To create parallax scrolling you need to know CSS.
Within your CSS set your div with a background image to fixed position and keep your inner content as scrollable.
The HTML Code
<div class="text">Your static text goes here </div>
The CSS Code
background: url(/imageurl.jpg) center center no-repeat fixed #fff;