fixed navigation

Design Focus: Uncover

September 14, 2012 By Sophia Lucero

Our featured designs this week have a nice little effect where you uncover content that seems to be under another.

Designs of the Week

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

Summer School for Freelancers : The Institute of Awesome website — Summer School for Freelancers : The Institute of Awesome

I like the brightly colored twist on the traditional coat of arms and other elements like the arrows.

Another growing trend: combining vertical scrolling with horizontal scrolling or sliders to maximize the amount of information you can consume in a screenful. The changing fixed backgrounds is also a simple but eye-catching effect especially if you switch between light and dark colors.

Suit Up or Die Magazine #1 website — Suit Up or Die Magazine #1

This one does the vertical then horizontal browsing thing too, but it instead of for slider items it’s for each article in the magazine. I also like how each section layered under the previous one don’t have the same heights, they all stretch according to the requirements of the content.

Social Media Weekly

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

Typography – Web Fonts Performance: Making Pretty, Fast
“To discuss this, and more, we sat down with David Kuettel from the Google Web Fonts team, for an in-depth look at web fonts.”

User Experience – 5 Things to Consider Whilst Sketching
“Sketching isn’t about nuance. It’s about emotion, direction, and ideas. Broad gestures.”

Responsive Web Design – Responsive Patterns
“A collection of patterns and modules for responsive designs.”

Friday Focus 06/03/11: North East South West

June 3, 2011 By Sophia Lucero

Here’s an interesting technique to try out in this week’s Friday Focus: designs that have four main navigational items arranged at right angles to each other, much like the four main directions on a compass.

Designs of the Week

I like how each section content is perfectly contained in the boxes. It makes me wish the whole site fit into the height of the browser window so I can see the wide view of the whole site.

There’s a running pixelated theme in the design, as well as blocks of black for the headers. There’s also an interesting peekaboo effect with fixed backgrounds that’s also growing popular these days. I like the idea of placing the navigation at the four corners of the site, but it makes moving back and forth between each screenful of content a hassle—better if there were keyboard navigation too. And for the millionth time, I wish we had a way for Twitter tweet and Facebook like buttons to blend in better with the design.

I never really enjoy the look of Courier or any other fixed-width font on a site, but I do like the hand-drawn touches here, and splashes of red there.

What’s a little surprising with these sites is that they don’t really use the 4 cardinal directions to their advantage and, say, animate the page to scroll to that particular direction. Instead they all still scroll vertically. Here’s another graphing paper pattern meets hand-drawn graphic elements design, with the wildly popular yellow and black combo.

Social Media Weekly

Design – Design Professionalism
“The designer’s guide to taking back your profession.”

Programming – Lost Type
“The Lost Type Co-Op is a Pay-What-You-Want Type foundry, the first of its kind.”

Optimization – zbugs
“Merge, Minify, and GZip Compress JS & CSS”

Accessibility – HTML5 and Accessibility
“HTML5 is not the accessibility disaster that some would have you believe. It tries to build accessibility in by design rather than bolt it on afterwards, and this is A Good Thing; if something is left to authors to add, they won’t. Just look at how many images have no alternate text, or useless alternate text.”

JavaScript – Byte-saving Techniques
“This is a collection of JavaScript wizardry that can shave bytes off of your code. It’s mainly intended as a reference for those creating entries for 140byt.es.”

User Interface Design – The Gap Theory of UI Design

Friday Focus 12/31/10: Go Big or Go Home

December 31, 2010 By Sophia Lucero

The last Friday Focus of the year is going to be all about big, bold designs. Time to go out with a bang!

Designs of the Week

I appreciate all the irregular shapes especially in the Social section. I also noticed that yellow and black is a popular color combination these days.

Very ambitious and is a little on the chaotic side. I also find it a little confusing when the links go to a differently-designed site. This may be a business card-type site but it may be better if the identity is consistent, at least with a logo appearing in both places.

Nice and airy. The animation at the bottom looks great.

The illustrations, animations, and type look great in the top half, but the lower half and inner pages feels cramped in comparison, there’s a little disconnect going on.

A bit overwhelming because of the colors and type, but I love the infographic section below.

Another site with some infographics in it! I think because of the very light color palette it makes sense to lower the opacity a bit until you hover over the images. It’s a little confusing, though, to put the subsection tab navigation for Work at the bottom. What I do like is the tab on the side that lets you move between sections on this one page site. Makes me wish every site had it.

It’s a little weird when the biggest things on a page are social media buttons, but I guess it has merit in this case.

Good idea to keep the navigation fixed, but with the huge logo too? Not sure about that. The folded ribbons in the carousel navigation is a nice touch.

Love the grungy feel everywhere, mixed with ribbons and huge datestamps. Impeccable.

Social Media Weekly

Design – 2011: Time To Push Yourself
“Make sure 2011 (and every year after) is the year you expand your design and development toolbox. Make sure it is the year you take the time and effort to play with these new technologies so you can be prepared for the time they are available on all browsers.”

User Experience – 7 myths about paper prototyping
“Paper prototyping is probably the best tool we have to design great user experiences.”

Interaction Design – The IxD Library
“The IxD Library is a collection of books, articles, and presentations of interest to interaction designers. It attempts to not be the definitive collection of every piece of content about interaction design, only the best and most influential.”

CSS – Angled content mask with CSS
“In this article I will show you how to do create angled CSS content “mask”. The idea is pretty simple and it uses CSS transform property (rotation to be more precise).”

CSS – Remote controlled hyperlinks (or multiple links in one hyperlink)
“What I wanted was a cool way of giving the impression of two separate links to the same page but also making clear that the two links both did the same thing.”

CSS – Checkerboard, striped & other background patterns with CSS3 gradients
“What you might not be aware of, is that CSS3 gradients can be used to create many kinds of commonly needed patterns, including checkered patterns, stripes and more.”

CSS – WebKit Image Wipes
“It’s not “spec,” but WebKit browsers support image masks. If you are familiar with Photoshop, they work like that.”

Design – The JESS3™ Design Process.
“you should wireframe more than you design, you should design more than you code. design twice, code once.”

Friday Focus 07/09/10: Background Repeat

July 9, 2010 By Sophia Lucero

This week on Friday Focus: it’s backgrounds with repeating patterns, a well-loved technique that doesn’t go out of style.

Designs of the Week

The logo doesn’t quite match the vintage look but it draws enough attention like the other elements: large headers, power lines, icons.

Love the snappy slide out animations on the images and the gray/pink color scheme. The details are pretty much perfect and it’s just the social media buttons that look out of place.

Great treatment on the text, and the purple/black/white theme is quite elegant.

I absolutely adore the idea of using not just a flat graphic pattern as a repeating background, but multiple patterns and photos in boxes. The only question is if it’s too distracting for the content, which I think isn’t, because if anything it keeps me glued to this page!

Extremely subtle pattern, but it’s there. Social media buttons look better blended; the letterpressed look helps.

Using your logo as your background pattern? Brilliant.

Again, logo as background pattern, but what really catches my attention here is the transparent and angled images in the carousel.

Love how there’s barely a straight edge in this design, just mostly ribbons and fancy frames.

Striking, but is that Comic Sans I see in the footer?

I actually like that the background is a much larger pattern than what we usually see, which makes it look different from the wallpapered look. It’s also great that the images blend in the same pattern to reinforce rhythm and consistency.

I’ve run into this look so many times now, but I don’t really tire of it, and it’s done really well here. However, for such a sweet and elegant design, I’m wondering if the gray in the navigation is a bit too dark.

Doesn’t this make you nostalgic for the high-gloss designs that have now been replaced by the more subtle ones these days? And actual sparkles! What a fun design.

Social Media Weekly

Community – HOW TO: Get the Most Out of Q&A Sites
“There are ways to ask the best questions, provide great answers and ultimately build your reputation; here are eight guidelines that can help.”

Design – Icon Reference Chart
“A comprehensive chart of icon information for various platforms and devices”

Design – 365psd
“Download a free psd every day for a year”

Friday Focus 04/16/10: Slanted

April 16, 2010 By Sophia Lucero

This week on Friday Focus: designs that tilt to one side and keep the perpendicular lines away.

Designs of the Week

Love the warm hues, transparency, and even the tiny polka dots. Everything blends in nicely.

I like how the logo is used as a prominent design element, not just as a header. One thing you will notice with these slanting designs is how they usually mean they’re left-aligned too. More often than not that leaves a lot of whitespace on the right side, which may be a good or bad thing.

Really simple design, but looks fresh with the bold colors changing in each page and the boxy look.

The nice thing about a vertical user-generated gallery is you only have to browse from top to bottom and not from left to right. I really like how the fixed footer has the logo slashed out!

Forget rounded corners, slanting edges is the next big thing! Love the subtle, translucent shapes in the background and behind the content area.

An extremely fun-looking design with not one traditional design pattern in sight! Love how the plus icons turn into arrows.

Instead of the usual horizontal lines to separate sections of a one-page site, this design slopes them upward.

There’s something about slashes and slanted shapes that just fit with designy sites including fashion. Love the hover effect in the inner pages reinforcing this.

That other trend that’s also getting popular, circles, is in here too, but there’s an animated twist. The rainbow-colored header breaks the gray-filled design.

The hand-drawn effect is always a good way to add to slanting lines.

And finally: the easiest, most modern way to implement the slanting look in your design? Use CSS3 transforms!

Social Media Weekly

Design – Holistic Web Browsing: Trends Of The Future
“The future of the Web is everywhere. The future of the Web is not at your desk. It’s not necessarily in your pocket, either. It’s everywhere.”

Design – Designing with Lenses
“A design lens allows you to view the user experience through the eyes of a single design principle. Lenses were originally created for game design but are just as powerful for user experience design.”

HTML – Introduction to HTML 5
“Are you interested in HTML 5 and what’s coming down the pipeline but haven’t had time to read any articles yet?”

JavaScript – RequireJS
“RequireJS can help you manage the script modules, load them in the right order, and make it easy to combine the scripts later via the RequireJS optimization tool without needing to change your markup.”

Design Focus: Uncover

Designs of the Week

Social Media Weekly

Friday Focus 06/03/11: North East South West

Designs of the Week

Social Media Weekly

Friday Focus 12/31/10: Go Big or Go Home

Designs of the Week

Social Media Weekly

Friday Focus 07/09/10: Background Repeat

Designs of the Week

Social Media Weekly

Friday Focus 04/16/10: Slanted

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Randa Clay On Breaking Barriers

Search