11 websites that perfect UX by focusing on details

Charles 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.

Colophon practiced by Neoteric Design

Though colophons have been used in books since the 15^th 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.

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.

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.

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.

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.

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.

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.

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.

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 piqué curiosity and point to a lovely story.

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.