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

Feature
Post

Category
Design Focus

Design Focus: Experiments & Visualizations

Check out these websites featuring code turned into fun, beautiful explorations—the ultimate interactive treats.

Designs of the Week

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

Offpixel by Martin Pavely

Offpixel by Martin Pavely

You can draw on the webpage, and from the generated dots appears different projects the designer has worked on, all connected to one another in dynamic, 3-dimensional shapes. The more you draw, the more names and vertices get added. Hovering on each shows a pop-up circular thumbnail of the project. Another interesting thing I noticed is some projects are locked with a password.

ACTIVATION NODEPLUS Lab

ACTIVATION NODEPLUS Lab

The homepage is split horizontally into two sections and colors: experiments done in Canvas and WebGL. Inside is a grid of pixelated thumbnails of each demo, and hovering on them displays a more accurate preview. The labels are in various sizes and positions relative to the thumbnails and grids, reinforcing that theme of randomness and chaos from the experiments. The scrolling has also been replaced by a similarly abstract design element to match the design.

Code Sketch

Code Sketch

Here the thumbnails scroll horizontally from right to left, though you can also control the flow manually. A blue triangle circles the graph in the background, indicating the position through the list.

Christmas Experiments

Christmas Experiments

A digital advent calendar that reveals different experiments every day in December, with the 3D blocks of ice (?) showing crystallized thumbnails in the middle when you hover. The secondary pages like About and Artists are revealed with transitions that cover/uncover the main page in geometric portions. The latter page is a more organized way to view the calendar as well.

Numbers

Numbers

This visualizes different numerical sequences like Fibonacci, Pi, and so on. The thumbnails show patterns (or lack thereof) generated by the formulas, while the experiments delve deeper with geometric illustrations and sounds that can be controlled by different parameters.

Social Media Weekly

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

Web DesignWebsites of Christmas Past, Present and Future
“Traditionally, dynamic websites would execute such code on the server, and transmit a simple HTML file to the user. As far as the browser was concerned, this wasn’t much different from the first website, as the additional complexity all happened before the document was sent to the browser.”

Web TypographyState of Web Type
“Up-to-date data on support for type and typographic features on the web.”

CSSAutomating CSS Regression Testing
“It’s the type where you’re trying to test if a change you made to CSS resulted in any unexpected visual problems. This is made more difficult with responsive designs.”

Feature
Post

Category
Design Focus

Design Focus: Light & Shadow

Mesmerizing interactions of light and shadow are on display for this week’s feature.

Designs of the Week

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

Je Suis Unicq

Je Suis Unicq

Very editorial, but not static. Video plays while masked in a silhouette, while text moves, splices, and changes while overlaying brightly filtered photos.

Good Game Club

Good Game Club

A simple blocky layout with one over-the-top effect: interactive long shadows.

astronomyy.fm

astronomyy.fm

The kaleidescope animation is masked under the band name on first load, and clicking Launch loads the full view while playing the tracks—very trippy.

Thought.is

Thought.is

This one looks similar but also interacts with your mouse in 3D space. I also like the hover effect in the Updates section: a swift gradient slides behind the links, which feels like a ray of light streaming past.

Social Media Weekly

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

Web DesignWhat It Takes to Build a Website
“The web is important, so we need to build it right.”

CSS, TypographyTowards a more perfect link underline
“Accompanied with four text-shadows positioned to the left and right of the link text in the color of your background, you even get a nice descender clearing effect.”

Interaction DesignTop prototyping tools for interaction designers
“As with any gamut of tools, each prototyping tool has its strengths and weaknesses. I designed my own grading scale using five characteristics, on a scale of “terrible” to “awesome”.”

Feature
Post

Category
Design Focus

Design Focus: Minty Fresh

The shades of green in this week’s feature are bright, peppy, and almost too harsh on the eyes, but it seems to be all the rage these days. How does it come into play with these designs? Let’s find out:

Designs of the Week

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

Pennies for iPhone

Pennies for iPhone

Most likely inspired by the iPhone 5c’s color options, perhaps?

Bicycle Speed Shop

Bicycle Speed Shop

The background is animated in a familiar illustration style, and you can see the recurring choice to use black text and more rounded, geometric typefaces for a modern feel.

Canopy.co

Canopy.co

A similar typeface with thinner weights and a lighter touch produces this elegant, almost feathery look.

Dubbelfrisss - WTF Moet ik zeggen?

Dubbelfrisss – WTF Moet ik zeggen?

Less subtle is this color combo and retro robot motif, but still lands on that fresh look.

un Projects

un Projects

This shade almost blends into the whites and grays that bound the blocks of content. Another recent trend at play here are those rotated navigation elements on the sides.

Dollar a Day

Dollar a Day

Small logo, large intro text and button. There’s less green on this page save for the accents and calls to action.

High Tide

High Tide

Similarly, the green-tinted video background hides as you scroll down and you only see it resurface as link hover colors and other brand elements on the site.

Social Media Weekly

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

ProgrammingEvolving Code: From the Crust to the Core
“In the world of Object-Oriented Programming, there is a saying: “Make it work, make it small, make it fast.” This is an approach that we’re trying on for size and will hopefully create the right balance of code quality.”

TypographyOn Legibility – In Typography And Type Design
“To keep it simple, while reading, factors like grammar, word expectancy, word form and so on, are not to be excluded when we think about the reading experience.”

Feature
Post

Category
Design Focus

Design Focus: By Hand

These websites feature prominent use of the human hand in their designs, and it’s an interesting study in paying tribute to what we really create with, while using it to convey information.

Designs of the Week

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

The Mobile Index

The Mobile Index

The site is a dictionary of technology terms alphabetized, and the hand morphs into each hand sign per letter. It’s a smart connection between the mobile device and how it’s our hands that interact with it.

Studiobema

Studiobema

Bright colors with a dash of pastel gradients, navigation links in the corners, and a page-wide border. It’s a familiar look for sure, and it’s the imagery and projects that will leave an impression on you.

Mark Jaworski Studios

Mark Jaworski Studios

The page is essentially a very long poster held up by the artist. The logos could stand to be arranged more neatly, and the content typography would benefit from a bit more refinement.

Acapo

Acapo

It’s not as obvious as the other designs, but the photographs on these pages are almost always that of hands. Whether this is intentional or not, it’s a good motif.

Social Media Weekly

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

Design – Website Style Guide Resources
“A collaborative collection of resources for creating Front-End Style Guides and Pattern Libraries”

CSS, JavaScript – Let the Browser Handle Your UI Logic for You
“The next time you set out to build something new, look at its core behaviors and ask yourself if there is some pre-written, standardized part of the web browser that can handle some of the work for you.”

Design – Explained Visually
“An experiment in making hard ideas intuitive.”

Feature
Post

Category
Design Focus

Design Focus: Halloween Special

Time to break out the costumes and candy ’cause it’s All Hallows Eve again. Will these websites do a good job of spooking the daylights out of you? Step inside and find out!

Designs of the Week

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

The 7 Deadly Sins of Digital Marketing

The 7 Deadly Sins of Digital Marketing

This microsite is available in two forms: 2d and 3d, which is pretty cool. The effects are good and the copy is on point even with the Halloween theme. This is how interactive infographics should be done.

Halloween Party 2013

Halloween Party 2013

A simple party invite that puts kinetic typography to good use. It’s very flat and clean compared to what you’d expect out of “spooky” designs, which is a nice change.

Halloween Hub

Halloween Hub

Most sites look similar to this one, you got all the quirky fonts and figures representative of the holiday, but not as thoughtfully designed. The more fonts and colors you throw onto a page, the more chaotic and less accessible it feels, but this knows how to tread carefully and have fun.

Drop That Candy

Drop That Candy

This mobile app game about candy put on a slightly darker look for the occasion and put typica Halloween treats front end center, but still has that light personality. Unfortunately the inner pages feel disconnected to the homepage.

The Washed Up Dead

The Washed Up Dead

Besides the funky, zombified illustrations, I like that there’s a blur effect on the modal background when it shows up. I think one nice takeaway from this design is to embrace not just orange, but also the yellows, purples, and greens for Halloween. The typefaces are classic and not particularly eerie, but it’s the illustrations that bring the look and feel home.

Legal Horror Stories

Legal Horror Stories

Not exactly the most brilliant design out there, but it’s fun and campy enough.

Halloween Horror Nights - Universal Studios Orlando

Halloween Horror Nights – Universal Studios Orlando

There’s a disconnect between the theme park logo and the rest of the fonts used on the site, but if you don’t think about that bit too much the pages are actually neatly executed – calendars, packages, social icons and all. Plus, the animated horror attractions in the slider are an excellent feature.

Social Media Weekly

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

Design, Business – Halloween’s 13 Scariest Clients
“Halloween is time for the undead to rise up and bombard us with woeful website requests. Fortunately, we can recognize the warning signs and exorcise the demons!”

Design – Monsters and Thieves
“Amateurs tend to be poor at imitation. When they see an idea, they clone the whole thing and offer it as their own work. The pro knows to chop these things into pieces and find new uses for them.”

 

Feature
Post

Category
Design Focus

Design Focus: Shapely

Here’s a collection of website designs that display excellent use of shapes to style and present content, ranging from the quirky to the stunning.

Designs of the Week

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

This Is Now

This Is Now

The mix of drawn portraits, bright colors, and shapes is a very interesting combination (parallaxed, of course), although in some places the text (which are all italics) is difficult to read on top of all of that.

Reform

Reform

This color-changing site is dedicated to the very same topic of exploring shapes. No text except for the about modal and tooltips.

TTMM

TTMM

Like the previous site, it’s an array of icons which happen to be features in the product. Clicking on each reveals an animated verison on the watch and the description in the opposite column, hiding the icons found in that location. The concept seems so simple for a site design, but perhaps the best way too.

Nat-Ant

Nat-Ant

This design shows scattered icons which look to be deconstructed logos of the companies they represent (and similar icons for those who use wordmarks) and has a lot of subtle animation effects, moving both text and icons as you hover and scroll.

Letters, Inc.

Letters, Inc.

Love the intricacy of these patterns, which also connect to other designs as you scroll down and they draw themselves along the way.

Social Media Weekly

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

User ExperienceUX Thought of the Day
“Five UX thoughts a week to inspire you to do something differently in your design work.”

Design – Stop asking design candidates to redesign your product. It’s unfair and (even worse) it’s ineffective.
“You’re not hiring a designer who goes off into a corner to magically create perfect solutions like she can read your mind. You are hiring someone who can work with a team to identify the right problems, create the best solutions, and test the real-world effectiveness of those choices.”