Archives for August 2012

Design Focus: Penguins

August 31, 2012 By Sophia Lucero

We’ve checked out owls before, and this week we’re looking at another feathery trend: penguins.

Designs of the Week

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

Impress A Penguin website — Impress A Penguin

Subtle animations and solid colors dominated by orange, with a simple storytelling format. Only down side here is the layout isn’t responsive, which could have been quite easy to do here.

Love the high-tech penguin mascot here, not to mention the use of broken lines and those orange + green boxes for emphasize content. Using turquoise with white text is a bold move too, but I like it!

Oddly enough this carries a similar color scheme but holds its own look. I like the line treatment on the illustrations, the gray background texture that carries over to the dropdown menus, the stylized star accents (even on the social buttons), and the arrow-shaped buttons.

Social Media Weekly

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

Responsive Web Design – Responsive Web Above The Fold
“Few topics in web production can bring a nerd’s blood to a rolling boil as quickly as “The Fold” and “Responsive Web Design”, so it’s high time we combine the two and bring this server to its knees under the sheer weight of trolls sharing how they really feel about me as a person.”

CSS – em>Evolution of CSS Layout: 1990s to the Future
“The specs we write at W3C are what define a correct CSS implementation: they represent an agreement among the borwser vendors as to what, exactly, CSS is and how it behaves.”

Design Focus: Retro Futura

August 24, 2012 By Sophia Lucero

This Friday we’re featuring an interesting typographic trend: designs with a union, vintage feel, featuring lots of blacks and grays, textures, thick borders, uppercase, and letter spacing.

Designs of the Week

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

Lost Type Co-op website — Lost Type Co-op

The shade of green in the menu is a tad surprising given the surrounding grungy look, but it gives a bright and cheery touch. I love the font classification card on the top right of each font page, as well as the Directory of typeface designers on the about page—perfect example of the vintage look being applied today while still retaining its utility.

I like the use of the browser window as the backdrop for each scene in the slider, plus the 3D block treatment on containers (including the map illustrations on the contact page).

Love the almost equal parts usage of bright blue, bright red, gray and black. Everything’s done big and bold here, especially the newsletter subscription button, the Twitter follow section, and the bullseye animation at the footer.

Don’t Fear the Internet website — Don’t Fear the Internet

I feel a little uncomfortable with the kind of spacing I see everywhere, or maybe Futura designs really just have to be like that. Or maybe it’s the amount of black that makes it feel so stark.

Friends of Type website — Friends of Type

Love the huge images, the cut-off painted-style logo (also minty green!), and the hidden top navigation that appears only on hover. It’s also great when you have banners/ads that typographically blend in with your design.

Chitwood & Hobbs website — Chitwood & Hobbs

Also a popular feature with this retro Futura look: bento navigation, featured here in a very subdued hue. The post titles are reminiscent of label-maker tags with their white on black look and going over the post images like that.

Full Stop Interactive website — Full Stop Interactive

Very interesting trick: put a link to your contact form right on the logo. Another tiny detail: the thick divider between each section falls right under the menu when you scroll to it, almost like a color-coded thing. Lastly: the blue period (full stop) at the end of each header, to reinforce their branding of course.

Greenwood Space Travel Supply Co. website — Greenwood Space Travel Supply Co.

I like the subtle parallax and translucency, the mix-and-match fonts, and the little bits of illustration & copy that reinforce the space theme of the site.

Love the grunged-up device illustrations presented like textbook captioned figures. Simple design choices here, and it’s the use of yellow and illustrations that make things pop.

Social Media Weekly

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

User Interface Design – Thinking of interfaces as sets of jobs
“Shifting our focus from visual concerns like pixels and proportions to the jobs an interface should do helps us articulate the function of each element on screen.”

CSS – Don’t Overthink It Grids
“Here’s how I build grids. It’s not hard or complicated. Even making them flexible is no big deal.”

User Interface Design – Visually Reinforce Your Credit Card Fields (89% Get it Wrong)
“Only 11% visually reinforced their sensitive fields to some degree by either visually encapsulating the fields, or by positioning security badges in close proximity. Let’s take a look at those sites and see what they did right.”

Design Focus: Deconstructed Sliders

August 17, 2012 By Sophia Lucero

Our featured designs for the week contain slideshows that don’t just animate a page of content at a time, but breaks down each into their components, then animate them into the viewport one at a time.

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.

Reputation Radar website — Reputation Radar

Not only does this slider animation technique takes the excitement up a notch with objects flying in from all directions, but adding in a bit of perspective also goes a long way. I also like the uneven borders, section dividers, and flyout menus.

Lift Interactive website — Lift Interactive

Love the way their portfolio items are presented in the slider: logo, full site screenshot, mobile site screenshot, icons, and other related objects all arranged neatly. I also find it very interesting that while there’s a fixed menu, their logo isn’t located there, but on the scrolling part of the page. Instead, the top left area is reserved for announcements, e.g. hiring info. Another cool component on the site: each downloadable article from their blog has a “book cover” for an image, and animates 3-dimensionally on hover. The rest are in colorful blocks below.

Webdesign Weblounge website — Webdesign Weblounge

I like how the background in the slideshow changes per slide. I also like how their portfolio items have pics that go beyond their containers.

Social Media Weekly

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

Web Design – Useful Print And Online Magazines For Web Designers
“In this overview of useful magazines you’ll find everything from purely online publications to monthly, glossy print editions, where all subjects relevant to art and design are being investigated in colorful, eloquent detail.”

Usability, User Experience – The Zen of Usability Testing
“If we only designed sites for people in our industry, the results would be quite predictable. On the other hand, trying to design things to work in a way which is logical to someone who doesn’t know the limitations of our software is an enormous challenge. This is when we are pushed to make really clever stuff happen.”

CSS – Tags in CSS files
“What if I want to find any section that handles images, or perhaps I need to know what CSS is available for use on lists? I need a way of searching within sections, not just their titles. Enter CSS tags…”

Design Focus: Tableaus

August 10, 2012 By Sophia Lucero

This week’s featured designs feature illustrations that set the mood and message of the product they’re peddling, much like a tableau.

Designs of the Week

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

Beautiful artwork here, it’s both geometric and organic at the same time. Web design wise, the content is laid out in standard fare, though there’s a very minor parallax effect going on the moment you scroll down.

The double-screen slideshow (iPad and iPhone) is a cool idea. While there’s relatively few content blocks, you don’t miss out, and get even more thanks to the storytelling in the images.

The choice of pictures on the “popups” could have been better but it adds to the charm of the circus act theme going on here. Love the multicolored navigation, the hover effect on the buy buttons (a little tilt and resize goes a long way in giving emphasis), and the framed links in the footer with the mixed fonts. Different social buttons could have been used though, so they can blend in.

Lovely site, it’s both clean and colorful. I like the tall navigation blocks on the lower half of the page; I’m generally used to seeing squares and landscape ones.

Social Media Weekly

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

Usability – Paper Prototyping As A Usability Testing Technique
“User interfaces can be quickly prototyped and tested. Thus, they also facilitate the quick introduction of modifications and refinements needed to address any usability problems that have been identified.”

HTML5 – Multimedia Troubleshooting
“I noticed a number people struggling to get HTML5 audio and video working in different scenarios. From Twitter to Stack Overflow, the same questions kept cropping up, so I’ve put together a list of the most common problems (and some not so common) and their solutions (if there is one!).”

Responsive Web Design – Responsive Line Breaks
“Responsive design doesn’t and shouldn’t conflict with traditional graphic design principles; it can certainly support the tenets of good design when implemented thoughtfully and thoroughly.”

Web Design, Conferences – 10 Conference Videos for Front-End Developers
“Here’s a collection of videos that I’ve stumbled across in recent months.”

Design Focus: Horizontal Storytelling

August 3, 2012 By Sophia Lucero

This week’s featured designs use the not-so-common method of horizontal scrolling to tell their stories, each screenful an idea to absorb on your way to getting to know them fully.

Designs of the Week

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

I love the illustrations, which fit the whole storybook vibe that most horizontal scrolling sites carry. Especially that wide panorama “painting” inside the frame—you don’t see that sort of thing online! There’s no ‘you are here’ indicator in the fixed top left menu, but it’s kind of a good idea that it fades in and out while in the process of scrolling, like a visual cue that you’re doing something. Even the way the site stops on the far right, with book spines, is pretty brilliant.

Reality LA Ruth Series website — Reality LA Ruth Series

Walking animated character, flying in and moving objects, and subtle parallax effects—all token components of this design genre. I also appreciate that the text in each banner uses true webfonts.

The whole look and feel of the movie touches everything here, even the social media icons on the lower right. The fly-out menu meanwhile slides vertically from the bottom, which isn’t too usual, and it’s one big collection of images, which also makes sense since the site is extremely visual and users will remember the pages better by the scenes they’re about.

Social Media Weekly

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

Responsive Web Design, Email Newsletter Design – Responsive Email Design
“In this guide, we’ll look at why designing for mobile has become a necessary skill for email designers, cover the fundamentals of designing and building a mobile-friendly email and back it all up with some neat tips and techniques.”

SEO, Semantics, Web Standards – On web semantics
“Up until today authors were not always certain about what HTML element to use for what functional unit in their HTML page, though, and “living” specs like HTML 5 require authors to keep an eye on what elements will be there going forward to mark up what otherwise calls for “meaningless” fallback elements like div or span.”

CSS – Creeps and Weirdos in the CSS Spec
“So in this post, I’ll run through a bunch of things from the CSS specifications that you might not have heard of yet. None of this is even close to ready to use (unless it degrades really gracefully), but it will serve to get you familiar with some of the rounded corners and drop shadows of the future.”

Web Standards – A future friendly workflow
“User experience director Luke Brooker explains the thinking behind the Future Friendly initiative and how it can help adjust your workflow.”

Design Focus: Penguins

Designs of the Week

Social Media Weekly

Design Focus: Retro Futura

Designs of the Week

Social Media Weekly

Design Focus: Deconstructed Sliders

Designs of the Week

Social Media Weekly

Design Focus: Tableaus

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

How to Ace your Next Web Developer Interview

Search