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

Feature
Post

Category
Design Focus

Design Focus: Christmas ‘Round the Corner

Wishing you the happiest of holidays with these beautiful, useful, and fun Christmas-themed treats!

Designs of the Week

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

Merry Christmallax

Merry Christmallax

Advent Calendar 2014

Advent Calendar 2014

The Maggy Christmas List

The Maggy Christmas List

Christmas.am

Christmas.am

Christmas Gifs

Christmas Gifs

The Merry Maker

The Merry Maker

The Christmas Countdown Calendar

The Christmas Countdown Calendar

The Amiable Snowman

The Amiable Snowman

Social Media Weekly

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

CSSHow To Write Mobile-first CSS
“We know the importance of designing from a mobile-first perspective. Unfortunately, much less was said about coding from a mobile-first approach. Today, I’d like to share with you about the mobile-first approach to styling, why it is much better, and how to work its magic.”

Interaction Design7 Things I Wish Everyone Knew About Interaction Design
“If I could wave a solstice holiday wand this year, I’d implant the following ideas into people’s heads so we could plug those holes and move the practice forward.”

DesignDesign Considerations: Text on Images
“I enjoyed Erik D. Kennedy’s post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically.”