10 Tips To Creating A Beautiful Website

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.

old web design
Apple website 1996

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 overlappingand web design on a whole was based on ridged tables rather than fluid layouts.

Apple website today
Apple website today

Today, the four elements, 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.

typography & images

Web design today is a digital designers dream.

You can fully utilise visuals and typography without restriction to create a beautiful web design that’s not limited by trade-offs.

However.

Bad visual web design still occurs.

Why?

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 four reasons:

  1. The web designer is an amateur designer
  2. The web designer is a programmer with no design skills
  3. The web designer is a graphic designer with no programming skills
  4. The web designer is the client trying to do a DIY job

In any case it’s a lack of skill that creates ugly websites.

Graphic Design for Web Design a.k.a Digital 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:

Resolution
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 the web to get the best balance of quality vs file size.

The Medium & Canvas Size
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
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.

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 digital or graphic 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 the 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:

  1. Social media made everyone social, bringing back that human touch to sales and information.
  2. 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.

They created a new era where tone of voice was extremely important in a digital landscape.

Tone of voice is an element of sales that ties in with branding.

Each aspect of vocal and literal communication will be considered to create a brand voice:

  • Language
  • Wording
  • Tone
  • Style
  • Typography
  • Emotion

Whilst the language will be unique 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 your website and brand.

A tone of voice will form the foundation for a web design that communicates originally and beautifully.

2. Beautiful Scrolling Websites & Beautiful Sales Journeys

clicking vs scrolling

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 are two benefits of scrolling.

  1. 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.
  2. 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.

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.

  1. Break down your copy into sections
  2. Plan how it can run down the page
  3. 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.

  1. Think of everything you want to put on the page
  2. Strip it down to the 5 most important things you think need to go on the page
  3. 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.

Our web design for Knoted Dreams that goes below the fold
Our web design for Knotted Dreams that goes 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 and digital 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, highquality 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

At last!

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.

A list of the most common web safe fonts
A list of the most common web safe fonts

Today, you can access a number of different services like Google Fonts or Adobe Typekit to use a ton of different fonts for your web design project.

But just because you can use a lot of different fonts, it doesn’t mean that you should.

The art of combining fonts is a difficult.

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 to 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
  • Skeomorphic
  • Flat
Web Design styles by period
Web Design button styles by period

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.

web design parrallax scrolling
Parrallax Scrolling simulates depth of field

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.

eg.


The HTML Code
<div id="background">
<div class="text">Your static text goes here </div>
</div>

The CSS Code

#background {
background: url(/imageurl.jpg) center center no-repeat fixed #fff;
width: 100%;
clear: both;
margin: auto;
min-height: 700px;
}

.text {
font-size:1.8rem;
}

7. Adapting Navigation

Menu systems are one of the most important parts of a website and they should “just work”.

Because of that, you have to be a little daring to try something different with a menu system for fear of non-compatibility.

But slowly and surely website navigation has got a little more creative, albeit in tiny steps.

A “fixed” menu system that travels with the user down the page has become quite the norm.

Why?

Because it makes sense to have the menu systems accessible at all times.

Some fixed menus, disappear altogether and reappear when scrolling.

Some change size as you scroll.

All in all, these tiny little additions to nav systems make for much more beautiful websites.

Mobile menus are intuitive, helping to achieve a beautiful experience across devices and in some cases, I’ve seen menu systems that go beyond the standard rectangle box space to pop out of all sorts of places.

Whilst it can be a danger to create such a menu system for fear of non-compatibility, if you get it right, you’ll end up with one beautiful navigation system.

Here’s an example of a quick fixed menu that scrolls with the user:
eg.


The HTML Code
<div id="menu">
<div class="menu-item">Link 1</div>
<div class="menu-item">Link 2</div>
</div>

The CSS Code

#menu {
background: #fff;
position:fixed;
width: 100%;
clear: both;
margin: auto;
height: 100px;
top:0;
z-index:1000;
}

.menu-item {
font-size:1.2rem;
text-align:left;
padding:15px;
float:left;
}

By using “position fixed” the menu bar will stay stuck to an area of the screen.

“Top 0” will keep the menu bar specifically stuck to the top of the screen.

z-index ensures that the menu bar stays on top of any other content.

8. Beautiful Website Forms

The web form was once a dull element is web design, boring customers with monotonous forms.

Today it’s a case of getting any data possible in the simplest and quickest way.

Whilst the idea of designing a form may seem dull to many, it doesn’t have to be.

A well designed web form can create a beautiful online experience.

In my eyes a beautiful form consists of 4 things:

Simplicity
Web users are impatient and put off by mundane forms. The ability to shorten forms and ask for just the information you need immediately, will help to make a more responsive and pretty looking form.

Creativity
Forms don’t have to be boring. Integrate colour, typography and icons to transform a time consuming experience into a quicker visual experience.

Interactivity and planning
If you need to create a long form then make it more bearable and intuitive with the use of sections and interactivity.

The wording and language
Nobody wants to fill out a form! But you can make it an inviting experience. Adding creative language and a tone of voice into the form, will attract users to the form.

The design of forms is often over-looked in web design because it looks like a boring job.

But tackling it as a creative task will help remedy that feeling and bring your web design work up a notch.

9. Content Remains King

The term content was once reserved for text copy but today main content could be a button, an image, a video or even a form.

Content doesn’t have to be long pices of text and neither does it have to be too specific.

The best copy works in small chunks.

In my opinion, the higher up the information architecture that the page sits, the shorter chunks of copy it should have.

Content needs to be a King in context.

There’s no need to put detailed pieces of text or long paragraphs on the homepage because you may not know why the user has come to your site or how.

Secondary or third level pages are best for detailed copy, where users can find the specific information they need.

Even then, text copy should be split into short paragraphs so its easily digestible by the user.

Planning text content as well as laying it out can make for a beautiful site that gives the reader what they need when they need it.

A picture speaks a thousand words and that’s what beautiful websites consist of.

Wowing with images and using text sparingly to get users to click through to larger pieces of text.

10. Beautiful Padding & Line-height

Padding is the invisible design element that really separates the ugly from the beautiful when it coms to web design.

Too little will make the site look stuffy.

Too much just makes it look disconnected.

Padding & Line-height used in web design
Top: Text with not enough padding and line-height | Bottom Paragraph: Good padding & Line-height

In reality, having too much padding is never really an issue.

An ugly web design will generally have too little padding or no padding at all, never a case of too much.

Like-wise for line-height (the space between two lines of text).

Padding and line-height are fundamental techniques to create a beautiful website that’s legible.

You could take any bad web design, add padding and adjust line-height to make a 100% improvement on the way it looks, reads and functions.

As a design discipline, padding and line-height add contrast, alignment and negative space to a design.

This gives the design a fresh face with room to exhale.

In terms of the end user viewing the website, padding and line-height improve legibility, cleanliness and adds a professional touch to the web design.

Using padding and line-height in your web design will improve it tenfold.

11. Bonus Tip – CSS

CSS is the graphic design of the programming world.

It’s fun, creative and a joy to use. (and extremely annoying when you make a small mistake.)

Use it for layouts and grids!

Use it to create text styles and even graphics!

What it also does is regulate the styling of your website through a framework of web design.

If you know how to design and know how to write CSS, you’ll know how to create a beautiful web design.

Conclusion

This article was based on creating a beautiful looking web design but what defines beauty?

Beauty can be seen as humour, intelligence, creativity or even class.

It means something different to everyone.

And that’s something to think about.

Your website should be a beautiful visual and interactive experience based on your audience.

But that doesn’t mean it has to be typical.

Ultimately, a beautiful site is one that’s original.

A beautiful website:

  • Is Planned well
  • Has an architecture of information
  • Uses graphics, text and coding creatively
  • Has purpose
  • Works for the business
  • Works for the user

Want a beautiful website?

We’re a design studio in the Romford & Hornchurch areas of Essex, UK and we build and manage websites for our clients locally, nationally and internationally.

Our goal is not to build you a beautiful website and then leave it with you.

We’re here to help you on an on-going basis to market and manage your website and business through creative and technical solutions.

We work with self-employed startups, small to medium size business and global organisations.

We don’t judge a project by its size, only by what we can do for you to help make your brand a success.

For more information on web design and development, speak to us at Speak to us conceptstore.co.uk.



Leave the first comment



Subscribe for top tips on Branding, Marketing & Design

Mailchimp

Close