May 25, 2015 admin

Why These Unique & Creative Text-Focused Websites Will Inspire You

Typography is an important but often under-represented part of a website’s layout. With so much focus being placed on the presentational aspects of CSS and the use of large images and media that choke bandwidth restraints; it’s nice to occasionally remember that textual content can also make an impact on users and their experience. Content remains king, and a few good fonts can make even the simplest of sites look smart – though not so many that you have to wait for ages for the text to be visible.

Because of this, I’m going to show you a few handpicked examples of sites that make their content look terrific, and why you should consider following their example in your own work. We’re going to take a journey of how elegant typography can make a site shine; looking at the bold, creative, navigational, simplistic and interactive content that makes the designer’s voice speak volumes – so let’s get started!

Beautiful and Bold Typography

With the current trend of big header images, large and bold typography has really become a common part of designing a portfolio. While large background images can certainly help reinforce the heading, it’s important to get your message across with as little effort as possible. All of the following websites use a mixture of impactful large header fonts along with vivid color and simple but effective logos to ensure visitors take note and can grasp the site’s purpose with very little effort. Less is sometimes more, and perhaps replacing large bandwidth hungry images with a simple, well-presented message may help you avoid the need for progress bars and loading dialogs.

kickpoint

kickpoint

Amazee Labs

Amazee Labs

Cirq

Cirq

Root Studio

Root Studio

Nicola Antonazzo

Nicola Antonazzo

Creative Arrangements of Content

Headings grab our attention, but the body of content is what makes us stay. Ensuring that your content is well written and provides all that the user requires is one of the central goals of any web design project. The following websites try to strike a balance between offering just enough content to be useful, and avoiding the risk of information overload. Using color and type to separate sections of content can certainly help you convey a message, and arranging content horizontally and vertically into clearly defined grids can reduce the need for pagination. If all else fails however, progressive disclosure of associated content can help you reduce the visual clutter on a page.

Seed Conference

Seed Conference

Graham Hicks

Graham Hicks

Franz Sans

Franz Sans

Arthur Collin

Arthur Collin

The UX Reader

The UX Reader

Navigation, Sitemaps and Signposts

Typography plays an important role in the headers and body of your site’s content, but something no site can function without is a good navigation menu. From the frequently criticized hamburger menu trend, to one page layouts that function as a launchpad to projects or content on a third party site; it’s important to ensure that navigation is easy to use and locate. The following sites present links in a pretty standard way, but their use of color, scale, and structure should inspire you to try a bit harder than simply providing a basic dropdown menu. If nothing else, the examples I have picked use very different methods to help a visitor locate content on the site.

Yaron Schoen

Yaron Schoen

Coloured Lines

Coloured Lines

Olav Bjorkoy

Olav Bjorkoy

Fabian Schultz

Fabian Schultz

Blake Allen Design

Blake Allen Design

Spacing with Subtle Simplicity

Sometimes in Web Design, the things that aren’t said play an equal role in readability as the things that are. Having a beautiful page with lots of typography flourishes can be good, but if the space between content doesn’t leave enough breathing room, information overload can occur. The following websites use whitespace along with short, snappy, paragraphs to ensure that the user can get to grips with the layout and typographical flourishes with ease. If nothing else, these simple designs make an impact without getting in the way. With enough whitespace on the page, and thought put into how content is portrayed as you scroll, any site can avoid looking messy and uncoordinated.

The Typographic Desk Reference

The Typographic Desk Reference

Mixd

Mixd

Lab Case

LabCase

Where Should You Publish?

Where Should You Publish?

The Next Century

The Next Century

Animation and User Interactions

Since the advent of Flash (and then later CSS3), animation has become a key part of a website’s design. While we certainly don’t hold flash in the same regard as we did back in the 90’s, the ability to use transitions and effects through CSS and JavaScript libraries like jQuery have made us think of animation less as a gimmick and more as useful usability tool. The sites you’ll find below use a mixture of quirky interactions (like typing) and animation effects to draw attention to the site’s content and typography. If you feel inspired to follow the examples in these case studies, just make sure that it’s not annoying, time intensive or requires KB heavy JS libraries (otherwise the subtle fun could become a laggy nightmare).

Budi

Budi

Fresh… Not Canned

Fresh...Not Canned

Curva

Curva

Valentino Borghesi

Valentino Borghesi

Isaac PVL

Isaac PVL

At The Heart of Every Website

Content is at the center of every experience online, and this is something no designer should forget. Having bold, visually engaging type shouldn’t be at the expense of a sensible layout. The layout shouldn’t require limitless scrolling or overloading the visitor with too many options. The navigation menu should be easy to identify and organized with information architecture best practices at it’s core. Whitespace should be used to give the user room to breathe (though not too much either). Furthermore, animation should be used to enhance already useful content and be subtle enough to make someone smile, not cringe. If you do all of this correctly, maybe your site will be the next thing showcased in CSS galleries, with other designers admiring how it was put together. It’ll also make for happy users, and that’s what matters most.


Onextrapixel – Web Design and Development Online Magazine

Tagged: , , , , ,