Feature
Post

Category
Design Focus

Design Focus: Type Guides

Here’s a resource roundup to sharpen your typography skills. This week we’re looking at sites that curate beautiful applications of webfonts, so get inspired!

Designs of the Week

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

Free Faces

Free Faces

My favorite of the bunch — the designer’s own application of the glyphs as featured “posters” is just lovely. On the homepage they make one tall abstract painting.

Typewolf

Typewolf

Pastels seem to abound not only in the base design but the featured ones. Content is set in a utilitarian narrow sans-serif and monospace fonts, and one nice feature here is documenting where you can get your own copy of the fonts. Further below there are top 10 lists for different typeface categories.

Just My Type

Just My Type

With muted, organic colors and zero images, this site is all about the fonts from headlines, to paragraphs, to to footnotes.

Fonts In Use

Fonts In Use

This archive covers not just sites but printed material as well, and you can view inline the names of the fonts used, also typeset for demo purposes. Since this is a more comprehensive compendium, the advanced search and view options come in handy.

Typ.io

Typ.io

I like that the samples or screenshots here are much larger than the rest. The look feels less “designy” than the others as it adapts the traditional blog format, and it works nicely.

Beautiful Web Type

Beautiful Web Type

I love the diverse text samples for each typeface: big quotes, small quotes, multi-column passages, or graphic posters, you can see that they are all inspired by the fonts being used. No meta information needed either: all the words link directly to their respective Google Fonts page.

Social Media Weekly

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

CSS, JavaScriptPixels are expensive
“How pixels get onto your users’ screens is something you should know about. Not for the sake of knowing, but because in order to be effective as a modern web developer you’re going to need to optimize for it.”

Design, User ExperienceDesign is the Experience
“Visual design is just as important as Information design, Interaction design, Strategy, Prototyping, Content design, etc. They’re all tools that enable good design. Parts of the process.”

Feature
Post

Category
Design Focus

Design Focus: Better Bookmarking UX

Here’s another new trend to investigate: the evolution of bookmarking into curated and frictionless user experiences.

Designs of the Week

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

saved.io

saved.io

So simple and clever, I’m surprised godfather of modern online bookmarks, Delicious, didn’t come up with it. Here the design to praise is not just its thin, light colors and lines, but a design of a process that makes bookmarking dead-easy: just append “saved.io” in front of a URL to save it. Then to add it to a list, just use “listname.saved.io” instead.

Kippt

Kippt

On othe other side of the spectrum, we have more visually-oriented interfaces. So you save not just a link, a description, and a tag, but also a snapshot of the page or content. It’s useful because majority of our interactions (with the world around us, really) are estabished through our vision. If you ever had that problem of remembering which bookmark you needed when you returned to your cache of link, a visual cue might jog your memory better. Additionally, you can follow fellow bookmarkers and see their saves in your feed. If you like one of them, you can just re-save to yours as well.

Gibbon

Gibbon

On this site the goal is to compile a bundle of links under a specific learning theme, so the focus should be on browsing through the links in a more optimized way. I like that instead of the expected meta data, there’s also information about reading time as well as who completed reading the link.

Oozled

Oozled

This one also takes a similar approach to bundled, themed links, and even beautiful imagery to convey them. The format is more of the firehose feed, where you subscribe and once those bundles are updated, they will show up reverse-chronologically on your account.

Social Media Weekly

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

Email DesignAntwort
“Originally made for transactional Emails with dynamic content so the layouts are thoroughly tested – in live environments with real data and edge cases.”

Web Development, Product DesignHow are apps made?
“There is a method to making an app. Iterative ceremony. Successive refinement not unlike in other crafts. App making as pottery? Place each button atop your bench wheel, sling your mud, refine the reactions on screen to touch, to sound, refine the movement of text, the size of text, the placement of text, typography macro and micro, to hyphenate or not (and if not, why, dear god, why), consider the images, to full-bleed or not to full-bleed, how to dismiss the images — a swipe or a tap or a dreadful [×].”

Web DesignDesigning with Dynamic Content
“The Web is dynamic, so it’s essential for us to design with these important “what if” questions in mind. We must move away from leaving those questions to the very end of our process if we want to create more thoughtful, realistic, resilient designs.”

Feature
Post

Category
Design Focus

Design Focus: Layering

This brewing design pattern breaks out of your typical grid layouts and layers images and text on top of one another. It’s quite an interesting approach that makes website elements feel more like objects that you can more easily interact with, like stuff on your physical desk.

Designs of the Week

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

Siena

Siena

Photos are littered from top to bottom floating over one another with a bit of staggered scrolling, and hovering brings them to full brightness as well as clickable links. Nice nod to the builder’s yellow in the icon boxes; if you didn’t know this was a construction company you’d think this was a design studio itself.

A Chronology

A Chronology

I like this format for a blog so much I’m almost tempted to steal it. Very minimalist though that it’s not obvious it is one. Can’t find any navigational tools or about pages either, which would have been nice to explore especially on a creative, designy site.

Hatsumatsu

Hatsumatsu

Scrolling down brings up the project “layers” one by one, and when you drill down into one of them, the those thumbnails conversely fly out one by one to reveal each layer. Unlike the previous featured site you can hover on the layer to bring it to the top, and scrolling is how you control that.

Social Media Weekly

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

User ExperienceA User In Total Control Is A Designer’s Nightmare
“We can guide users simply by limiting their creative control, which also makes for a simpler tool.”

Responsive Web DesignHarvard Law Review Case Study
“The design itself is both beautiful and functional. The typography is thoroughly modern while remaining firmly rooted in the publication’s history.”

Feature
Post

Category
Design Focus

Design Focus: Animated Logos

The next avenue for interactivity are logos that look brilliant in both static and animated states. Get inspired here.

Designs of the Week

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

Of Another

Of Another

A familiar typographic layout whose minimal looks is broken by a colorful dance of shapes. One takeaway from this portfolio would be: it’s a good idea to screencast website design work along with screenshots.

Kitchen Prague

Kitchen Prague

I enjoy the touch of quirk brought by the hand-drawn icons and words, which are wiggling like the logo. Clicking on the portfolio image once shows the name of of the project and a short description; clicking on it for the second time loads more information about it. Content blocks load asynchronously with a swinging animation.

AmplifiQ

AmplifiQ

This logo suffers a little from getting blurried with native CSS transformations that animate the canvas element into a wavy banner. Softening it up, however, is an interesting contrast to the hexagon/polygon theme. Is it overkill? I like that arranging the images in a non-linear way following the shape edges makes the top-to-bottom scrolling more interesting.

Social Media Weekly

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

Web Design, User ExperienceDesign principles for a payments experience
“Technology will change. People will want new features. Design for the unknown future.”

Interaction Design, User Interface Design, User ExperienceThe Scroll Up Bar
“Less annoying than bars that just sit there as you scroll down, and makes the menu easy to access without having to scroll up to the top of the page.”

HTML, CSSAdaptive Placeholders
“The person who enters a value first isn’t always the same person who sees it later. To solve this problem I tried making the placeholder persist through the typing.”

Feature
Post

Category
Design Focus

Design Focus: Stories To Tell

Some of the best-designed websites have brilliantly crafted illustrations, animations, and copy that come together to create a new world which you can explore and journey through. Let’s the turn the page and journey through these online stories.

Designs of the Week

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

Fountain of Youth Coconut Water

Fountain of Youth Coconut Water

I enjoy the graphic style and interactions employed in this storybook, reminiscent of exotic and ancient texts, with a 3D and a humorous twist.

The Future of Travel

The Future of Travel

This is a bit of the “flat” aesthetic here with the bright colors and subtle shading. The text boxes have arrows pointing in the order that you’re supposed to read them.

Seize Your Power

Seize Your Power

Another site by the WWF on important environmental issues that’s interactive in more ways than one as it lets you control the scene to symbolically take action.

A Search For Better Information Management

A Search For Better Information Management

Has the same spirit of Ben the Bodyguard in a couple of ways: the bird’s eye view perspective and the comic book touches with particular dialogue panels in between scenery changes.

Social Media Weekly

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

Responsive Web DesignWeb Fundamentals
“Web Fundamentals is a comprehensive resource for multi-device web development.”

DesignRedsgned
“A showcase of the very best redesigns from across the web and design-focused websites, featuring web designs, branding, app designs, UI and GUI, and product design.”

Web DesignDesigning design tools
“Designers are building tools to help them explore, prototype and be more creative.”

Feature
Post

Category
Design Focus

Design Focus: Pointy Pyramids

Using triangles in web design has been around for a few years now but it still has that edgy feel to it. Check out another round of sites where they figure prominently as graphic elements and a means of layout.

Designs of the Week

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

Sjøbygda

Sjøbygda

The triangles make for interesting cropping particularly in the featured artists portraits, although I would have loved to see more integration for the below-header parts of the site.

BAU cargo

BAU cargo

I like the way the sub-section navigation is arranged right in the middle, and how the graphic elements were inspired by the building design itself.

Rally Interactive

Rally Interactive

Cool hover effect that turns the triangle into a circle upon clicking. Another microtrend that’s cropping up is putting the meta or side information much higher up the page rather than in the footer. In this case, since the about, clients, and contact content are super short they are inserted dynamically right after top navigation.

Snowbird

Snowbird

I like that there’s a big weather panel on the top right, because that’s what their customers also want to know besides their products. Of course I also like how the cropped pictures in triangular frames are based on their logo, so it looks quite sporty. Most clever of all would have to be the silhouette of a mountain in place of the usual triangle-shaped marker for the current page in the menu.

brizk design

brizk design

There’s a mix of modern and elegant touches on this straightforward page and it works well.

Social Media Weekly

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

Design, ProgrammingWhy Developers Need to Learn Design
“The trope is often that designers need to learn to write code, but in working as a developer on the web, I’ve learned that the value of a design education pays dividends beyond being able to mock up a page in Photoshop.”

DesignThe 12 Principles of Animation

Feature
Post

Category
Design Focus

Design Focus: Stylish Scrollbars

A few years ago, WebKit resurrected the ability to style browser scrollbars the way Internet Explorer first did. These days customizing the scrollbar is still not as rampant or recommended, since it’s not that advisable to mess with behavior that users are already used to, but featured below are sites that went ahead anyway. Some of them have pretty striking results.

Designs of the Week

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

Mezcal Buen Viaje

Mezcal Buen Viaje

The most fabulous and colorful custom scrollbar I’ve seen, designed to match the festive and tribal-themed illustrations on the page, from the vertical navigation on the left to the social icons in the footer. I like that they added hummingbirds that flap their wings as you scroll down; an animation concept used on Andrew McCarthy’s site featured here. Even the slider and gallery are atypical, framing photos in diamond-shaped containers.

weareanonymous.fr

weareanonymous.fr

I love the use of different head silhouettes as masks against their portfolio images to drive home the “anonymous” concept. Instead of the usual grid of boxes they made it quirky and interesting. Scrolling through the projects section you see the scrollbar a bubble label with the year they were made, which I think is a clever and functional way of customizing it. Lastly: check out the way the form fields were arranged on the About/Contact part.

Fine Goods

Fine Goods

The poster boy for interface realism and fine attention to detail. I love myself some minimalist, “flat” designs but I don’t find this “skeuomorphic” look outdated at all. The different kinds of woodgrain, the sliding out drawers on the sidebar, and the shelves connected by ropes, the price tags punching holes into the product images—they all point to a special creativity that comes with this kind of design, and it’s still a delightful experience to have.

Eyewear Brands

Eyewear Brands

More conservative design compared to the others on this list, although there’s some artsy illustrations found within its pages. One notable interaction pattern here is dimming out the rest of the page when one hovers over the top mega dropdown menu.

Social Media Weekly

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

Web DesignStyle guide links
“As a follow up to my article on A List Apart I thought I would put together a list of links that have been extremely helpful to me as I’ve thought about style guides.”

DesignInside Monument Valley: How ‘Impossible’ Sketches Became An Amazing Game
“Wong cracked open his sketchbooks to give Cult of Mac readers a glimpse at how Monument Valley‘s breathtaking designs came to be.”

Interaction DesignMotion Ui Design Principles
“These basic principles I’ve outlined focus more on the what and why, rather than the how to of motion / animation. With the increasing emphasis on motion (largely thanks to the more paired back design of iOS 7) its important that it is implemented with the same integrity and purpose as all the other aspects of Ui design.”

Feature
Post

Category
Design Focus

Design Focus: Color Chameleon

Adding a color-changing effect is a neat way to instantly make your site more dynamic and fun.

Designs of the Week

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

Metafizzy

Metafizzy

The default state has an uber long text shadow, which is what changes colors, then when you hover it gets these psychedelic rainbow stripes. Even better is that the headers of the links below also change to match the gradiented streaks with complementary colors.

Animate.css

Animate.css

This one’s even more subtle and you might miss it if you don’t stay on the page for very long. It has a bit of the iOS 7 influence, with the colorful gradient color combinations, the thin lines (although not the Helvetica), and the bordered (instead of filled) buttons. Even the hover colors match the current display color.

Barrel Recap 2013

Barrel Recap 2013

Besides the changing solid background color on the landing page that keeps the rest of the site under wraps, which is in shades of blue and green, there are a couple other trends at play: the vertical column layout that scrolls horizontally, a sprinkling of statistics in between portfolio and team shots, and particularly large social media buttons arranged top-down at the far right end.

Social Media Weekly

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

CSSMagic of CSS
“CSS is a mess. We all love it, but it’s a mess. I liken it to English: there are a bunch of rules, and you can learn them. But sometimes you’re better off just trying shit and seeing what works and what doesn’t.”

Responsive Web Design, Email DesignResponsive Email Patterns
“A collection of patterns & modules for responsive emails”

Web DevelopmentWeb Development History Is Amazing
“What is meant exactly by tiered site architecture? The three aspects of any site are presentation, logic, and data. The further you separate these areas, the more layers, or “tiers,” your system has.”

Feature
Post

Category
Design Focus

Design Focus: On The Eyes

Have you ever wondered about the user experience and interface design of shopping for spectacles and sunnies? This week we’re looking at online shops for the eyeglass- and sunglass-wearing crowd.

Designs of the Week

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

The House of Eyewear

The House of Eyewear

No scrolling on this page and you have to go through a few steps to see the products, from Collections and Brands to picking your gender and sun vs. optical. When you finally get to the glasses page, there’s a progress bar at the top that counts down a few seconds until it twirls the product photo to give you a 360-degree view. It seems the only way to get it to turn again is to repeat the page load. On a few other informational pages there are videos playing in the background, which you can also view in full after hiding the box of content, so sometimes the navigation links at the top aren’t too visible.

NewVision

NewVision

The site takes a split-page approach; the menu moves to the left once you pick something and the content appears on the right side. Save for the eyewear pictures the site is pretty much black, white, and gray, even the custom-designed map.

Andy Wolf White Heat

Andy Wolf White Heat

Such a bold statement with their models that it’s gone from to lookbook to almost something of an art piece. Scrolling down peels of the virtual cover and brings you to the lookbook, description, collection, and teaser video all on the same page—no navigation links to skip to each. The product pages show full-width photos of the glasses with the model and without, as well as meta information like color and size.

Oxydo Society

Oxydo Society

Clicking anywhere on video and large logo unfolds a matching diamond-shaped set of links. The photoshoot snaps are for the collection’s different categories, while the individual products have different angles of the glasses and helpful links like an animated, hand-drawn illustration for the size guide, and a pretty psychedelic color guide page animating the letters of Oxydo based on your mouse location. There’s a handful more of animated illustrations on the Society page.

Social Media Weekly

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

Web Design, HTML, CSSWTF, HTML and CSS?
“A curated list of commonly frustrating HTML and CSS quandaries, miscues, and dilemmas.”

User Experience, Interaction DesignIxD (Interaction Design) Checklist
“Form a better understanding of interaction through using the IxD Checklist.”

BusinessWhy I Need to Know Your Budget
“But most of all, what that number tells me is how to guide you toward the appropriate solution for you, and to stay away from solutions that are outside of your price range.”

DesignLayout in Flipboard for Web and Windows
“How do we automate the whole process of layout design and editing? By slotting your content into custom designed page layouts—like fitting puzzle pieces together.”

Feature
Post

Category
Design Focus

Design Focus: Infographic Web

You’ve gotten a glimpse of infographics making their way to the web in people’s portfolios and causeworthy sites. Here, our featured designs are independent websites that put the fascinating discipline of data visualization front and center.

Designs of the Week

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

Make Your Money Matter

Make Your Money Matter

The advantage of websites over single-image infographics is their interactivity, and this one does it better than most. It artfully blends storytelling, scrolling by animation, and important information on one page with great illustrations, scenery, and and smooth transitions. For such heavy content it’s been optimized quite well. The typography is also impeccable, although it would have been nice for the headers to use web fonts instead of images.

FlatGuitars

FlatGuitars

No charts here so these aren’t traditional “infographics” but it’s definitely informative, graphical, and well-designed.

Water - Less Than You Think

Water – Less Than You Think

Uses keyboard navigation and some interesting perspective shifts to take you on a 3-dimensional ride, rather than just a scroll from top to bottom.

Sponge

Sponge

Their English site features an interesting 3D-moving graphic, while this one features a timeline format of their works. The yellow on black flips to black on yellow for inner pages, and uses this more pebble-type of shape (non completely circular but extremely rounded squares) for the images.

Visual history of computing

Visual history of computing

This site lets you embed its infographic as a whole image with an iframe code you can copy. The illustrations here are great, especially as you get to the older decades of computer inventions, but I really wish the first screen looked more interesting.

The Cost of Carbon

The Cost of Carbon

There’s a bit of a cinematic intro when the page first loads. An endless ticker tape listing the ecological risks of based on every person’s location and its carbon footprint. The small dots on the right show category icons on hover, letting you drill down on the explanations when you click. Though there’s a slight problem with the white when the graph or map is also white, doesn’t even have shadows.

Social Media Weekly

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

DesignResponsive Design Sameness
“Design sameness fades when designers stop focusing on which solutions for their problem are out there and start focusing on the problem at hand.”

TypographyCrafting link underlines on Medium
“The perfect underline should be visible, but unobstrusive — allowing people to realize what’s clickable, but without drawing too much attention to itself.”

Web DesignDrowning in Tools in the Web Development Industry
“This is one of the great things about our industry and, unlike some business strategies, this openness and collaboration doesn’t stifle innovation; it does the opposite.”

Email DesignSome Tips for Email Layout and Responsiveness
“In this article, I’d like to present some techniques I’ve successfully used at Artsy to create emails that look good on your browser or mobile device, in some of the most popular email clients out there.”

CSSPesticide
“Faster CSS layout debugging.”

Feature
Post

Category
Design Focus

Design Focus: Noir & Suspense

For all the clean and minimalist designs out there are sites that evoke a dark, brooding, adventurous mood with illustrations, light, and even sound. The ones featured below also carry that noir, vintage feel.

Designs of the Week

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

Luhse Tea

Luhse Tea

I love the clever touches used to frame certain content, like the smoke from the barrel of the rifle as background for “free shipping” and a blimp as background for the search bar. Even the lightbox for images has an ornate frame with proper branding—makes you wonder why sites don’t do this more often. I would have loved for the animations to be native HTML5 instead of Flash, but they are fun touches nonetheless.

Booking.com's haunted hotels

Booking.com’s haunted hotels

Instead of scrolling down, you go “up the stairs” and view creepy movie posters under flickering lights. When the page loses focus, the current section is rotated and zoomed out a bit, then rights itself when you return to it. The shuddering hover animations on the links and social buttons are also a treat.

Limoncello Studio

Limoncello Studio

Illustrations here are a tad less intimdating but have a great visual style as well. Super clever are the hanging portraits of social media sites as gangsters with their own edgy nicknames.

Social Media Weekly

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

Design, BusinessWhat Advice Would You Give To A Graphic Design Student?
“Be suspicious of lists, advice, and lists of advice.”

DesignCreating a Killer Style Guide
“Get five tips to creating a document that unifies a product’s design, even after launch.”

DesignBadass Lady Creatives
“Badass Lady Creatives celebrates women working in the creative industries.”

Responsive Web DesignDevice-Agnostic
“As web designers, it is our role to consider (and plan for) maximum reach and access, even when final results might seem underwhelming or less immersive.”

Feature
Post

Category
Design Focus

Design Focus: Evergreen

We’re not talking about eco-friendly sites but designs that have taken a liking to this lush hue, now more than ever.

Designs of the Week

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

Verde

Verde

For the minimalists, this is the equivalent of a big photograph, illustration, or video as the homepage header. It color-changes to different shades of green, sometimes coming off too strong for my taste, but one quick swipe downwards and the green disappears into a free-form arrangement of portfolio screens.

Folkelarm

Folkelarm

I like how the logo is broken down into parts and scattered into a circle in the header, then drops down to form it when you scroll down. It also plays with layering a bit by hiding behind the photos in the following screen, and repeats the pattern in the tickets and a couple of other backgrounds. White on blue is a little easier to read than white on green, but these days, the latter is very popular.

Two Minutes With TGD

Two Minutes With TGD

That tall and narrow type definitely reminds me of those movie poster credits, which fits with the video theme of the site. Elsewhere it becomes predominantly black and white, while the lighter shade of green becomes the accent color.

Troi Oiseaux

Troi Oiseaux

Notice exactly two links in the area, info and projects, sliding in their respective directions. Like the first site featured above it does an uncover as you move on to the portfolio.

Prospek

Prospek

Another site that plays with layering: the devices in the first screen are not stuck to the background but go to the foreground and gain full color on hover. The opposite happens to the images below and get a green-and-black treatment. Their 3-column, full-width layout carries over to the rest of the pages, including their blog.

Social Media Weekly

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

Typography Whats the Closest Google Font?
“We have all received design from a client with non-web safe fonts. The client does not want to pay the licensing, and you don’t want to break the law. So you are stuck trying to find a needle in the haystack that is the Google Web Fonts. Stop searching.”

User ExperienceWhat We Mean When We Say “responsive”
“I can tell you how to do Responsive Web Design. How we make things “responsive” is up to us. All of us.”