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

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…