one page sites

Friday Focus 05/07/10: Power Lines

May 7, 2010 By Sophia Lucero

This week on Friday Focus: website designs that use strong lines to guide the eye in navigating around them.

Designs of the Week

I enjoy the textured starry night look and all the rotated text.

Not pictured here, but it’s the microphone wire that traverses the whole site, connected to the amplifier all the way in the footer—very neat. Beautiful illustration work, “Mad Libs” style forms, and typography.

Colorful but not overwhelming. Love the dotted lines repeating everywhere, including the submit buttons, which is a great way to soften the corners up.

Other major design trends going on here: the outerspace look and bold uppercase text.

I like the subtle gradiation of color on the broken lines. But I’m not too sure why one uses <span>s instead of more meaningful tags like <strong> or <em>.

“Follow the road to discover great American craft beer.” Great concept. And the black road echoes the broken lines from the company logo.

We’ve seen this masking effect before and here’s another take on it. Content styling needs a little more refinement (it screams Kubrick, the default WordPress theme) but it’s the illustration that shines.

White on yellow is a little too bright for people, I think, and copy could be improved.

The rainbow stream of rain and the reuse of clouds in the flowchart is really nifty.

The hand-drawn touches here are a bit subtle, you almost want more.

I like that the color-coded folded ribbons also serve as borders for different content areas.

Social Media Weekly

HTML – A Brief History of Markup
This is Chapter 1 of HTML5 for Web Designers by Jeremy Keith.

CSS – CSS Posters
“I decided to create some simple CSS3 posters based on designs that I’ve already created before.”

Design – Visual Hierarchy is the Art of Managing, Not Eliminating
“Visual hierarchy, the classification of elements according to importance and relationship to other elements, tends to be one of the most ignored and underutilized principles of design.”

Friday Focus 04/30/10: Paint Me a Pretty Picture

April 30, 2010 By Sophia Lucero

This week on Friday Focus: lovely scenery and similar eyecandy painted with a virtual brush.

Designs of the Week

Beautiful, beautiful details; I wish there were more pages to explore.

I like the matching image thumbnails for the posts but I’m not sure strokes of paint have shadows.

There’s a bit of disconnect between the content—which is contained only in the top right links—and the art, but it’s still interesting to look at for a portfolio site.

Elegant and airy. I like the blurring of the header image behind the blurb.

It’s a little ambitious to have all the text on this website in a non-web safe font and a script font. I think I’d be a little more okay with it if the text were larger.

I really like this look but I wish they didn’t just stick in the Wufoo form at the footer.

I like the specks sprinkled all over the page, but I feel a little iffy about the logo—it’s almost too cryptic!

Really like how the right blurb background blends from header to main content area. I also find it interesting that a sports-related site would choose this look.

The “Welcome” sign is so good I got a little disappointed to see the art in the inner pages didn’t carry quite the same style.

Completely eyecatching work, it just needs a navigation to the different sections of this one-page site.

Social Media Weekly

Usability – 10 Steps To A More Usable Ecommerce Website

CSS – How to use CSS3 Orientation Media Queries

Tools – 5 Mozilla Labs Projects You Might Want to Know About

Accessibility – Do we need a new game plan to make the Web accessible?

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

Friday Focus 04/02/10: Easter Spheres

April 2, 2010 By Sophia Lucero

Since it’s Easter next Sunday and I haven’t really seen egg-inspired designs yet, circles will have to do for now! More on this growing trend in this week’s Friday Focus.

Designs of the Week

I first noticed the circles “trend” on this site, but it’s really the subtle beauty that draws you in.

Excellent typography and ornate details, and the use of circles for buttons reinforces is neat. I also like how strongly balanced the layout is and a lot of it is center-aligned, but not at the expense of legibility.

The use of circles here isn’t so groundbreaking but the thin, translucent lines blending in with the photographs are the signature look for this design.

Now this uses circles in every possible way—like bubbles floating to the top. Even the lightbox popup for the newsletter was modified into a circle.

Now this one “bubbles” horizontally, and uses other forms to create seemingly animated transitions from one section to the next.

Very simple, but I like the idea of using circles with a grid.

I have some alignment issues with the bottom area but the way you play videos on this site is clever (click on a face, video shows up on the top right circle).

Also clever: spin your mouse around the middle wheel to view different project thumbnails. Using circles as arrows on the left menu is also a nice trick. Finally, I like to overall vibe here: abstract shapes based on but not limited to circles.

Social Media Weekly

HTML – HTML5 Forms Are Coming
“HTML forms have been, to date, quite simplistic. We’ve had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript.”

CSS – CSS Specificity Part 1: Weight, Specificity and Overruling properties
“This article will do its best to map out the problem and will hint at several fixes and workarounds. None of them fool-proof or particularly implementor-friendly. A follow-up article will then take a closer look at the core issue we’re dealing with, diving into the depths of the human mind to uncover the true problem at hand. Sounds exciting, no?”

CSS – CSS Specificity Part 2: Lacking Proximity
“In last week’s article on fuzzy css specificity I presented a case that illustrated the difference between regular specificity and css specificity. While it’s interesting to review these cases, it’s even better to get to the very core of them. This article will do just that.”

UI – An Accessible Pagination Pattern
“Pagination is a basic building block of the web, appearing practically everywhere content is displayed. From a UI perspective, a pagination widget generally ends up being presented in a very straightforward manner as a horizontal list of links, framed by “previous” and “next” links to give the user clear calls to action.”

Friday Focus 03/19/10: Left-Aligned

March 19, 2010 By Sophia Lucero

Here’s an old-school pattern that hasn’t gone the way of the dodo: left-aligned designs. Symmetry is great, but asymmetry? Even better. Welcome to this week’s Friday Focus!

Designs of the Week

Going left-aligned isn’t just about “being different”, sometimes the design really calls for it, like this one does. It also has a fixed area—those two seem to go hand in hand for a lot of sites, don’t they?

Utterly simple formula (photographic background + minimal graphics) but it works!

This one’s the polar opposite of the previous design: a calmer look, Flash for the photographic background transitions, and custom fonts.

Do your users hate long-scrolling pages? Make people love ’em—this site makes it easy with the up/down arrows. I also like that the heading backgrounds match the portfolio color schemes.

Not shown, but I like the treatment of the posts in the lower half. Another example of matching by color (and by icons), and also breaking the boxiness away.

I love elegant, subtle designs. Interesting portfolio technique: display nothing but a full-size screenshot of your work for each client page. That way people experience the designs as close to the real thing as possible. Lightboxes and other solutions usually resize down.

Social Media Weekly

Design – Free Icon Search Engine – FindIcons.com

CSS – CSS Font Shorthand Property Cheat Sheet
“I’ve prepared a printable cheat sheet that you can download and hang next to your computer, which will come in handy in case you decide to use this property yourself, or are forced use it in a stylesheet from an inherited project.”

CSS – The Right Frame of Mind: Applying the Lessons of CSS Frameworks
“The purpose of this article isn’t to debate whether or not you should use a framework, but to examine why the need for such solutions exists. We’ll take the processes used (and lessons learned) in their creation, and try to show how they can be applied to your own style sheets.”

HTML – HTML5 structure—div, section & article
“These elements are replacements for the common ad-hoc semantics we applied before HTML5 with @class and @id, for example <div class="sidebar"> or <div class="nav">.”

« Previous Page

Friday Focus 05/07/10: Power Lines

Designs of the Week

Social Media Weekly

Friday Focus 04/30/10: Paint Me a Pretty Picture

Designs of the Week

Social Media Weekly

Friday Focus 04/16/10: Slanted

Designs of the Week

Social Media Weekly

Friday Focus 03/19/10: Left-Aligned

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Top 6 Online Resources for Designers and Creative Freelancers

Search