Feature
Post

Category
Design Focus

Design Focus: Embrace the Chaos

Understanding and navigating through sites requires a certain amount of order, so when designers get busy with dazzling visualizations and arrangements, there remains a method to their madness.

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.

Chaos

Eduardo del Fraile

Eduardo del Fraile

Digital Haiku

Digital Haiku

Bucharest

Bucharest

Canvas

Canvas

Squid Ink Flat Icons

Squid Ink Flat Icons

Mirumee

Mirumee

Kitasenju Design

Kitasenju Design

Fast Forward Labs

Fast Forward Labs

Social Media Weekly

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

Web DesignCopy & Paste & The Web
“Have you ever tried to copy and paste some text only to find it frustrating, awkward, or even impossible? I bet you have. It’s not random. On the web, you have a decent amount of control over it.”

Design, BusinessHeist
“The line between success and failure is murky. It’s not a binary metric that you can rely on to help you make tough decisions.”

User Interface DesignInterface Writing: Code for Humans
“Focus on the reader’s needs. Think about the implications of what you’re asking for. Be honest about what you’re doing with the data. That’s extremely important.”

Feature
Post

Category
Design Focus

Design Focus: Stacking Order

There are many different ways to provide the illusion of depth, and for these set of featured sites it’s all about stacking different layers of content one on top of the other, resulting in very interesting interaction and interface design.

Designs of the Week

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

TWO5SIX 2015

TWO5SIX 2015

Some cool color-changing going on in addition to the unusual scrolling: sections are arranged by stacks of white “pages” with one in front of the other, and as you scroll downwards each layer drops downward. What’s a little weird is seeing the text move upwards, only to hide downwards when you reach the end of each “page”. You can browse with the top menu or the navigation markers on the right. They’re thin horizontal bars by default, but when you hover on them they become tall rectangles, and have the “pages” peek out halfway like thumbnails.

Susanne Chmela

Susanne Chmela

I love all these different approaches to cycle groups of images a.k.a. the slider or carousel. In this site they’re represented as stacks with blue outlines, where clicking makes the top disappear and you see the next image, until you reach the bottom where the description of the project is revealed. No alternative navigation cues like buttons or arrows are present, but your cursor has the word “click” attached to it. The niftiest part is the subtle movement of the stacks as you scroll—expanding or compressing ever so slightly like an accordion.

Colin Snow

Colin Snow

Scattered layout with different ways of interacting with the projects: either video that play when you enter its area, or gallery of images that cycle as you click on them. Meanwhile, when you hover on the designers name and move the cursor around, different slices of said name flash in different sizes and places on the page, making for an interesting dynamic effect.

ETH Prof Lehnerer

ETH Prof Lehnerer

Different sections of the site are visible in layers, which is a different but possibly more helpful way of knowing where you’re browsing. Clicking on an event shows its page on top of the previous list, while the overview of the site is found at the bottom of the two.

Social Media Weekly

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

User ExperienceSimple UX mistakes to avoid on your blog – Volume 2

Web DesignThe 10 Commandments of Good Form Design on the Web

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