11 websites that perfect UX by focusing on details

Default avatar.
July 17, 2014
11 websites that perfect UX by focusing on details.

thumbnailCharles Eames said, “The details are not the details. They make the design.” A website is a composite of details—and its content is communicated through them. Whether designed to provide information or serve as an app, a well-executed site is one that has turned a critical eye to everything, from the copy to images to layout.

Details matter in web design because positive impressions, sparked by a website’s overall presentation and usefulness, matter. To echo Eames, they make the design, and inattention to details can have precisely the opposite effect.

Here are a variety of details — some related to the interface, others to interaction — to consider during your next web-based project.

The speed of Basecamp’s password verification

Basecamp is a web-based tool for project management. Since its introduction, speed and efficiency were paramount.

For its verification interface, what is smartly spared is the need to press an “OK” button after entering one’s code. If the code is entered correctly, the default screen automatically displays. Tiny measures like these support Basecamp’s already fast performance.

01_Basecamp_Screen-snap_782x540

Colophon practiced by Neoteric Design

Though colophons have been used in books since the 15th century, their purpose is applicable to the web. Neoteric Design shares the production notes of their website — what was used, from fonts to software to programming languages to the content management system. If a visitor wonders about how a site is created, a colophon is a tidy way to help satisfy this curiosity about certain specifics of a website’s build. It also testifies to the exploration of what aspects from printed communication can be made relevant to web-based communication.

02_Neoteric-Design_Screen-snap_782x540

Versatile typographic grid by Berger & Föhr

Pioneering designer Massimo Vignelli, who passed away in May 2014, championed the typographic grid, which he defined as “the underwear of the book” (from Brain Pickings’ post “Massimo Vignelli on the Secret of Great Book Design”). Minding the underlying grid is a seasoned means to keep the site neatly arranged.

A grid-based structure is evident in Berger & Föhr’s redesign of the site for the Boulder Museum of Contemporary Art. The apparent distinction is the extent to which the typographic grid is thoroughly applied to the site’s content: it is clearly consistent from the search form, to the navigational pull-down menus, to the calendar views, to the footer text and links. More so, the utility of the grid remains consistent in the site’s responsive states.

When rigorously used to organize content, whatever the type and scale, the typographic grid ultimately imbues an overarching sense of coherence.

03_Boulder-Museum-of-Contemporary-Art_Screen-snap_782x540

Pride in place celebrated by Maker’s Row

There is an emerging practice in web design of proudly displaying the place where a website originated. This is commonly found in the footer marked by “Proudly made in…” Maker’s Row emphasizes their team’s roots by revealing their respective hometown as part of their Team page. More than acting as mere “location-based” information, sharing where each team member came from expresses a cherished sense of place.

04_Makers-Row_Screen-snap_782x540

Direct access by TWLOHA to social media

While it’s typical to display a string of icons linking to social-media destinations, TWLOHA uses the entire site name instead. The comprehension is immediate. One obvious benefit: no confusing the icons between “t” of Twitter and the “t” of Tumblr.

05_TWLOHA_Screen-snap_782x540

Desire by MINIMAL to connect

Often, websites include a page marked Contact. Design studio MINIMAL wants to Connect. A different word evokes a different tone (that could help make all the difference to invite an opportunity).

“Connect” sounds more inviting than “Contact.” More human, less perfunctory.

06_Minimal_Screen-snap_782x540

Nudges to access Draft

Because it’s a very spare form, a log-in/sign-up utilizes generous margins. Nathan Kontny, who made writing app Draft, inserted users’ endorsements alongside the form. They may steer a prospective user to try, even adopt, the tool.

From a business perspective, the lesson is: don’t be shy with showing positive impressions by actual users of your web-based app or service.

07_Draft_Screen-snap_782x540

Colors of CreativeMornings

Adjacent to its location, each chapter of CreativeMornings is identified by a distinct color. This element thoughtfully persists throughout CreativeMornings’ site. It appears in the chapter pull-down menu. It accents edges, shapes, and other playful forms. It’s echoed as an animated strip when content is loading.

In substantial and subtle ways, CreativeMornings’ website is elegantly color-coordinated.

08_CreativeMornings_Screen-snap_782x540

Ultra-lean sign-in of Pulley

Created by the same group who make creative marketplace, Big Cartel, for creative practitioners to showcase and sell their art and products, Pulley, is an eCommerce app to sell digital downloads.

Its sign-in requires only the password. This is a purposely trimmed case of web-based entry with highly reduced friction.

09_Pulley_Screen-snap_782x540

Project stories of Crush Lovely

To put a twist on conventional labels such as Case studies and Portfolio, creative studio Crush Lovely presents what they do as Project stories. This approach speaks to the narrative of the work. For a project is essentially a story, bracketed with a beginning (project’s inception) and end (project’s delivery), and bridged with a narrative thread (the process).

This outline is fleshed out after selecting a client example, of the Project stories series, in order to view it. Other labeling tweaks are noticed: as part of the introduction at the top, instead of the “objective,” it’s re-dubbed as “ambition”; as part of the conclusion at the bottom, instead of “see video,” users are invited to “meet the finished product.”

In total, these adjusted labels don’t point the website visitor to a dry description of the firm’s work. They help pique curiosity and point to a lovely story.

10_Crush-Lovely_Screen-snap_782x540

Side projects of Knoed Creative

An About us category relates the staple description of the whom and what of the company, which may include their mission/vision/purpose. Knoed Creative inserted a Beyond Nine to Five section that shares work they do on the side. It taps into the phenomenon (and necessity) of side projects. It also diversifies what an “About us” is expected to show.

Both aspects speak to a proactive character of creativity, extended beyond the regular work day and space.

11_Knoed-Creative_Screen-snap_782x540

Nate Burgos

Nate Burgos runs Design Feast, his long-term project dedicated to creative culture. He wrote “Scratch your niche: Fun and fulfillment through Web-based projects.” He also self-published “BROKEN: Navigating the ups and downs of the circus called work.” Follow Nate on Twitter and Facebook.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…