Feature
Post

Category
Design Focus

Design Focus: Pins & Trails

These websites use maps to illuminate information or as a primary motif in their designs.

Designs of the Week

Ready to go out and design your next website? Try building with the Catalyst Framework.

Our Tam

Our Tam

Not flat, but a three-dimensional map traversing the different regions of Mount Tamalpais.

Designers Atlas

Designers Atlas

Not a literal map of designers, but a portfolio of one. Map elements like lines and icons are animated and used as markers.

District Magazine

District Magazine

The logo is oriented and cleverly spins like a compass. Also as your pointer moves around the background map, the coordiantes on the lower left update.

50 problems in 50 days

50 problems in 50 days

It’s always cool to present location-based stories on a map, and here you also have the option of viewing them in a neater grid layout.

Svenska kyrkans Internationella arbete

Svenska kyrkans Internationella arbete

This one also has a side drawer with filter and list views, and I like the subtly pulsing effect on the circular markers and the popup animation with the photos.

Word Map

Word Map

Not only is this a great idea for an informative map, but you can also see how a word is adopted from one country to others.

Social Media Weekly

Get solid WordPress themes, plugins, and even design training from iThemes.

Email Web DesignUsing Images in HTML Email
“ALT text should be baked into your image tags, at least for most images in an email.”

JavaScriptInterview: The Future of Web Animation with Julian Shapiro
“The higher we can push animations to perform — across all browsers and devices — the sooner the slick motion design commonly found in mobile apps will exist without compromise on the Web.”

Mobile Web DesignWhy ‘Mobile First’ May Already Be Outdated
“Only tracking someone on a “mobile device” is an incomplete picture and will result in poor targeting of messages and ads.”

JavaScriptReplacing jQuery with D3
“Although D3 has powerful features like its selectors or an ajax wrapper already built-in, we are often times missing some jQuery functions in our D3 projects. That’s why we will show some approaches on how you can replace jQuery by only using D3.”

Feature
Post

Category
Design Focus

Design Focus: Websites are Made of These

Metaphors are a cornerstone of design, but what if the design itself shows the tools and components used to build a website? The result is an interesting “x-ray” into the web design process, as seen in this week’s featured sites.

Designs of the Week

Get solid WordPress themes, plugins, and even design training from iThemes.

JLern Design

JLern Design

Instead of the usual links or thumbnails, this site uses website wireframes to represent the subpages, showing the actual yet abstracted layout of each page. The cool thing is the transition, where you see the wireframe “come to life” with the live content and color-coded elements. All the pages also appear side by side once you go into one of them, so it’s like you’re zooming in, almost physically exploring the website.

Hand.Gallery

Hand.Gallery

This design is reminiscent of speed painting videos, except done in the context of creating a website. You’re literally watching the site transform in terms of typography, color, and layout live. It’s probably intimidating and gimmicky for certain audiences, but being an online art gallery and still in its coming soon phase makes for an interesting art piece itself.

Dow-Smith Studio

Dow-Smith Studio

Browsing with a browser inside of a browser seems a little on the nose, but the fact that these are live sites shown in each tab speaks to the confidence of the designer in presenting the work—no pixel perfect screens here, you’re interacting with the real deal. In a smaller container of course, but you can click on the “go” icon to see it in a new window. I also like that the description above fades out and the background becomes this powder blue to light gray gradient.

Designers' Friend

Designers’ Friend

And what is a website without HTML? The page shows a Tip dialog which you can close or move out of the way, as if you’re using a Linux OS inside the browser. You can then proceed edit all the code on the page, click on the red links, and hover on the <img> tags. Again, this interface could intimidate non-techies, but that will also tell you whom this page is really for.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

User ExperienceDesigner’s Toolkit: A Primer On Capturing Research
“A good structure is to have a moderator and a note taker, that way one practitioner can focus on conversing with the participant, while the other focuses on capturing what is occurring.”

DesignWhy the Golden Ratio matters
“The visually-inclined — artists, architects and designers, historically keen observers and documentarians of both nature and the human condition and who we can thank for much of what we know about the world — have for ages incorporated this ratio into their work due to its intrinsically alluring balance between symmetry and asymmetry.”

Usability6 Usability tasks you haven’t tried so far, but really should!
“Below you find 6 example task that can provide new and different insights than the standard usability tasks.”

Feature
Post

Category
Design Focus

Design Focus: Circular Navigation

Circular motifs are very much alive these days, and your site will stand out even more when used as a navigational interface.

Designs of the Week

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Mathilde Jacon

Mathilde Jacon

Each concentric circular area with images masked in them lead to pages describing the particular project. On it, the column of website screenshots move quicker than the opposite one containing text. The circular elements continue with a button and arrow that leads to the live site, and a couple others that animate and highlight the currently loading and next/previous pages. On the overlaying list of projects, the circles also pop up as icons beside each name. You’ll enjoy the clever interactions all around.

GiftRocket

GiftRocket

There’s something that feels young about this site, and has this warmth you see a lot less of these days. A textured background, borders and backgrounds that clearly demarcate sections, and a subdued color palette. It’s certainly “flat”, but rounder and kinder around the edges.

Little Black Classics

Little Black Classics

This is essentially a list of books with corresponding quotes, but the way you interact with it via the famous penguin on the circumference of the white sphere, makes all the difference. You can either click on it and have it land on a random book, or drag it around. Clicking on the center area flips the black part to the reveal the quote, and even prompts you with an animation of a tap to do something in case you forget the initial instructions. The auxiliary orange circles bubble up additional ones for shopping and sharing.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

CSSHow to Center in CSS

Typography100 Days of Fonts

Email DesignEmail Lab: A Starter Kit for HTML Emails

Feature
Post

Category
Design Focus

Design Focus: Non-Linear Scroll

Like the previous websites that encourage you to tilt your head, these ones featured below encourage you to rethink browsing interactions and wonder: does scrolling through a page have to happen from top to bottom only?

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

Step and Repeat

Step and Repeat

A quirkily good interaction idea for a blog (or in this case, tumblelog), where the featured acts are a stream of posts scrolling diagonally. The direction of the scrolling alternates after a certain set of posts, and the color scheme switches up too. Clicking to view the post loads the page in diagonally as well, with acommodations for keyboard navigation.

FS Millbank

FS Millbank

The exploratory nature of the interactions on this page is brilliant and actually quite elegantly executed. The movements of sliding, rotating, zooming, and fading all work to emulate the concept of this wayfinding typeface and exhibit its characteristics. It’s like using one of those sci-fi screens you see in the movies, inside the browser.

Simon Sweeney

Simon Sweeney

Whether you scroll to the bottom or to the top, you’ll wind up with this starter card with information about the the designer. The page is a collection of projects connected by one thin string of pixels, infinitely scrolling every which way. Clicking on an image pages through related images to the project, until your reach its description slide. It’s different, kooky take on the portfolio that’s usually laid out on a neat, predictable grid.

Social Media Weekly

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Accessibility, UsabilityAccessibility Wins

UX, UsabilityASK DN: Do you perform user testing?

DesignDesigners checklist advices

Feature
Post

Category
Design Focus

Design Focus: By The Letter

This week’s websites feature beautiful, iconic letterforms that serve as design anchors to the content.

Designs of the Week

Get solid WordPress themes, plugins, and web design training from iThemes.

We are Fox Créateur

We are Fox Créateur

Their about page spells out their company name (logo) in an almost abstract way, and these shapes mask and highlight different photos & videos that tell their story.

FORM

FORM

The letters here are inspired by Google’s Material Design language, and the color-coding per section is nifty. There are a lot of sections for the one-pager though, so a menu that lets you skip should’ve been present.

Taostudio

Taostudio

Card-based layouts are all the rage these days and this in particular reminds me of flash cards from childhood, but the twist is how the project images integrate with letters in a minimal, quirky, modern way. The grid ends with a card that says “what letter are you?”, inviting you to contact & contract them for new work, which I find clever. Other details I like: the sea creatures hanging upside down each page, and the submit button on the Contact page that looks like an actual keyboard key. Again, the design goes for quirky, clever things.

Dots

Dots

With letters that are just a couple of steps evolved from primary shapes, you can see how close their logo design is to the star of their games: the circle (or in their case, the dot).

Alphabreast

Alphabreast

Color palette is a bit strong, although it totally works with the enclosed illustrations for each letter. I would like to see more of the comic/drawn look to the letters to tie in with the drawing style more.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

JavaScriptThe JavaScript World Domination
“JavaScript seems to creep into the most unexpected places these days. It’s not too long until your very toaster will be running JavaScript… but why?”

User ExperienceChange Blindness: Why People Don’t See What Designers Expect Them To See
“For example, studies have found that people fail to notice that the details of an image have changed.”

Responsive Web DesignResponsive Design with Viewport Control
“To ensure your media queries work on hand-held devices, put this in your <head>!”

Feature
Post

Category
Design Focus

Design Focus: Sites & Sounds

Come for the sounds, stay for beautifully crafted websites you’ll enjoy them in.

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

A Love Like Pi

A Love Like Pi

The music embed is not as clever as far as design goes, but it’s not obtrusive to the rest of the site’s adventurous nature. I like how the illustrations are drawn and animated in, and if you have to do a media gallery, might as well keep it fun with pink, floating rocks.

Jeff Bridges Sleeping Tapes

Jeff Bridges Sleeping Tapes

There are some subtle interactions going on here, like the parallax-y and 3-dimensional nested heads of Jeff Bridges and peekaboos from under the album covers. Since this is one long scroll, it’s always a good idea to have the music player handy as a fixed element to the page.

Palaxy Tracks

Palaxy Tracks

I like the layering of one section on top of the other as you scroll down, reinforced with translucency. The typography and layout are also lovely—doesn’t feel like a typical music site, but one of a portfolio with lots of stories to tell.

Jana Kirschner

Jana Kirschner

The photos are a bit freaky, but there’s a graphic design-y treatment in some places that adds a modern touch. The scattered dots in the track list section let you switch between album covers and additional artistic shots—an interesting take on the carousel/slider we’ve seen so many times.

Sound City Project

Sound City Project

First of all, I love the logo and its overall elegant, Art Deco-esque feel. Second, I like the weird swoosh sound it makes when I go to another page like the About or the City list, although I personally prefer the sound not stopping at all. And for some of these places, you kind of wish there was video if you didn’t use the site as your ambient noise source.

La Grande Evasion

La Grande Evasion

I wish there were playback controls, but this site sticks to the traditional radio station format. You can click through for additional artist info and iTunes links, which is useful.

Social Media Weekly

Create unique, extraordinary websites with Squarespace. No experience necessary!

Interface Design, AccessibilityThe best icon is a text label
“Let’s talk about icons now. They’re an essential part of many user interfaces. The thing is: more often than not, they break clarity.”

Interaction Design, CSSAnimation Principles for the Web
“Long established as fundamental working practices at Disney, the 12 Principles of Animation were published as “The Illusion of Life: Disney Animation” in 1981. These principles describe how animation can be used to immerse viewers in a believable world.”

Feature
Post

Category
Design Focus

Design Focus: Scroll Activated

Have a nice joyride with these energetic sites that are triggered by the page scroll.

Designs of the Week

Ready to go out and design your next website? Try building with the Catalyst Framework.

In Pieces - 30 Endangered Species, 30 Pieces.

In Pieces – 30 Endangered Species, 30 Pieces.

Thirty endangered species deconstructed into thirty geometric shapes, with information and posters/wallpapers to support the cause.

Scroll Slow. Have Fun.

Scroll Slow. Have Fun.

Do as it says! We’ve seen this effect on another site before, but here it’s the focus.

Monocle Voyage

Monocle Voyage

A nice split layout with panes of content that cover one another, in alternate succession.

Hello I'm V

Hello I’m V

A trippy exercise in 3-dimensional graphics and animation, and quite inspirational to boot.

Social Media Weekly

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

CSSUsing Flexbox today
“Flex’s features will add an important set of tools to how we build, not by replacing what was there before, but improving upon how we build today.”

Interface DesignAffordances: The Designer’s Secret Weapon
“While affordances might not be a top priority for tool-makers, for interaction designers they are absolutely essential – otherwise users wouldn’t know what they can and cannot interact with.”

PerformanceWhat Does My Site Cost?
“Find out how much it costs for someone to use your site on mobile networks around the world.”

Feature
Post

Category
Design Focus

Design Focus: In Depth

The sites featured this week also play with perspective & depth, prominently distinguishing between foreground & background, particularly when one moves the mouse.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Hello Monday

Hello Monday

Each project is a screen of content with a matching color palette, with the description area acting as translucent glass overlay. There’s something quietly elegant about the details here.

Cultural Solutions

Cultural Solutions

Here it’s the layers of circles that move corresponding to the cursor, and you can see it as a repeating graphic element in other places. Unlike the previous design this is quite bold and may even come across as “young”.

2A Studio

2A Studio

All the other objects here blur out of view when you hover on something, then present extra details. It’s probably the most realistic presentation of a 3D space with its freeform images and layout.

Social Media Weekly

Pagelines lets you build WordPress websites and it’s as easy as drag and drop, go check it out!

TypographyModular Scale

Responsive Web Design – Responsive Navigation for 73+ Languages

CSSEasy Textures with CSS Masks

Feature
Post

Category
Design Focus

Design Focus: Tilt Your Head

Gone are the days where websites have to be vertical…or even upright. These websites have changed the design game by challenging you to look at them from a different perspective, literally. Get ready to tilt your head!

Designs of the Week

Get solid WordPress themes, plugins, and even design training from iThemes.

Andrzej Capiński Studio

Andrzej Capiński Studio

Love the geometric, architectural quality reinforced by the rotated images. The overall layout echoes the company logo too. Drilled down content are in an overlaying modal, and you can page through each section (although a “Previous” link is missing). This design also falls under the scattered, freeform look.

Slanted - Enrico Floriddia

Slanted – Enrico Floriddia

Living up to its name, this site is also an interesting text-centric page in which links display thumbnails and sub-content right beside them. That might be confusing for some, but its experimental nature fits the bill.

Hyper Market

Hyper Market

This design delights me so much: the site content looks like a sheet of paper coming out of a “supermarket” cash register, complete with a long shadow that strategically frames the top right navigation menu.

All About David

All About David

Not only does this scroll sideways with the drag of a mouse or the arrows on the lower right corner, the content is actually rotated 90 degrees counterclockwise. Not sure why one would want something harder to read, but the transitions of the layers—text, header, and subtly moving photos—are beautifully done.

Social Media Weekly

Make Headway, make intuitive layouts, make it your WordPress theme of choice!

TypographyDashes in Web Typography

UXLinks are broken. These three alternatives have improved our readers’ reading experience.

Feature
Post

Category
Design Focus

Design Focus: What Words Wear

It’s always nice to welcome back this familiar graphic treatment, executed in fresh new ways. Check out how these websites use masked text in their designs.

Designs of the Week

Build on DIYThemes’ Thesis Framework for rock solid SEO and great layout customization options.

Music

Music

The links in the hamburger menu are the headers of the 10 sections on the one-pager, color-coded with a nice hover animation. Besides the masked title, there’s lots of video on this site, with boxes of content laid out in interesting ways.

Piet Oudolf

Piet Oudolf

Almost completely text-based, except for the wonderful background images that appear when you hover on the large texts. As you switch between pages there’s a gray screen with white text telling you what’s loading, another nice alternative to the usual loading GIF.

Flatstack

Flatstack

The title matches the wood texture in the back, then hovering on each letter shows snippets of the company’s work. There’s also a cool implementation on their team page.

Talk PR

Talk PR

This also falls under an animated logo, while lower on the page there’s a wall of social media updates, blog posts, and case studies all tiled together.

Melquiades Vazquez

Melquiades Vazquez

More tiled rounded squares here, under which does the masking happens not just with letters but various shapes formed. Sections are also color-coded, with fixed navigation markers on the left.

Mohito x Anja Rubik

Mohito x Anja Rubik

I like the idea of a the big animated logo becoming a fixed background watermark as the rest of the content scrolls over it. Also at play here is a free-form layout with bold text and large photographs.

Social Media Weekly

Get solid WordPress themes, plugins, and web design training from iThemes.

DesignMaking the switch from graphic to UX/UI design

TypographyTypography in Email

User ExperienceHypothesis driven UX design

Feature
Post

Category
Design Focus

Design Focus: Bordered Bento

Besides the “ghost buttons” trend, we’re also seeing a lot of bordered boxes as design elements lately, which gives a classic retro feel in displaying and laying out information on websites.

Designs of the Week

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

Chickenbot

Chickenbot

Gorgeous typography and interesting hover effects. The text is center-focused without resorting to center alignment all the time, and the site uses two major dropdown navigations affixed on the top left and right of the page.

Toga Apartments

Toga Apartments

A fresh take on the ubquitous carousel element, and the thick borders combined with the font choice conveys a builder motif on this property-themed site.

Post-Digital Publishing Archive

Post-Digital Publishing Archive

The bordered box look reminds me of tickets, library cards, and other things that curate and catalog information, so it definitely feels right at home here alongside that black and white palette and bold font weights.

Jova Construction

Jova Construction

There are few icons or graphical elements in the boxes, but here it’s particularly clever to use an electrical symbol for the arrows, blending in nicely. Said boxes are also animated with a “drawn in” effect, and a folding effect on important links. Most stylish construction company site ever? I’d say so!

Social Media Weekly

Ready to go out and design your next website? Try building with the Catalyst Framework.

HTMLCrazy classnames in HTML 4.01

Web DesignAn Exhaustive Look At The Year In Web Design

Feature
Post

Category
Design Focus

Design Focus: The Music of 2014

Say goodbye to 2014 on a musical note: here are some beautifully crafted pages about artists, songs, albums, and lyrics that made their mark this year.

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

Songs We Love 2014

Songs We Love 2014

Love the cassette tape of course, and its pretty immersive layout. It’s all about listening to the playlists and seeing what the NPR writers had to say about each song. This isn’t just a list-type microsite, but a mini webapp itself, remembering your listening history and welcoming you back as you resume.

Top 10 Albums of 2014

Top 10 Albums of 2014

The small squares of at the top and center are actually minified quick links to each album, whose art inspire the color scheme for each section. It’s a good example of a web design side project you can do, and the result is lovely.

2014 in Lyrics

2014 in Lyrics

Musician photos are framed in bubbles that “fizz up” as you scroll down, presumably the larger ones being the more popular. While they’re still tiny though, it’s not very obvious who they are due to the way they’re cropped. Clicking shows the full image and the key verse.

The Best Music of 2014

The Best Music of 2014

I appreciate the pages on this list that carefully considered how the music player would be set up on the page. In this case, the split panel layout places the player interface on the left half, while the navigation and description happens on the right. I like that there’s keyboard controls that slides the song or artist in from right to left, with a nice transition that seems to “pass on” the information on the right half to “hang” it in the “gallery” of the left half.

Year in Music 2014

Year in Music 2014

Spotify fine tunes the storytelling aspect of the musical year in review, putting songs into seasonal, activity, cultural, and regional contexts.

Social Media Weekly

Create unique, extraordinary websites with Squarespace. No experience necessary!

Design, BrandingThe Best and Worst Identities of 2014, Part 1: The Best Reviewed
“Although this is probably one of the “smallest” clients on this list, the resulting identity is the best example of the year of a smart, relevant concept that has been perfectly executed in an unexpected visual direction.”

Accessibility, HTMLThe Art of alt: Writing Great Descriptive Text For Images
“In the majority of cases, the easiest way to compose alt text is to write as if you’re trying to describe the image to someone.”

DesignLeading Designers Share Their New Year’s Resolutions for 2015
“What we do can be confusing at times and clients may need extra assistance in understand what we do and why we do it.”