left-aligned

Friday Focus 01/14/11: Coffee Break

January 14, 2011 By Sophia Lucero

It’s all about coffee this week on Friday Focus!

Designs of the Week

Great modern look. Interesting how the logo is at the top right (instead of the usual left). I like the idea of grouping menu items into related blocks so it’s not just one long list.

It’s quite predictable that coffee sites will adapt brown color schemes. What I like here is the fancy script type and the transparency effects. No solid text backgrounds here, probably to make it feel lighter with the already dark color scheme.

Smart idea for a coffee bean to become the arrow in the slideshow. The use of light blue here is a nice contrast to the browns and neutrals. The background pattern and the “I Stay Awake For” section are also nice ideas.

This one puts in more than one contrasting color. I like the raw feel to it although I’m still not comfortable with all the uppercase text everywhere.

I’m surprised how spartan the homepage is, considering the inside pages have large header pictures while this has none. I also find it a little weird that the slideshow boxes stretch only to the width of the headers, so there’s whitespace to the right at times. I do like text styles used though.

The Flash animations are good and warranted, the details are polished, but I think the photos in the 3 right columns could be less cliche.

Again, beautiful design with one glaring problem: the hosting banner at the top. I like the split approach on the front page, and it’s very useful to add store hours (and even Wi-Fi availability) info at an accessible spot.

The logo box blends well with all the picture headers. I also love the woven mat pattern in the footer.

Love the rough, hand-drawn edges everywhere and the giant cup of coffee right down the middle. However, the world map background is a little odd and I’m not sure if you should be so dependent on Flash for menu navigation.

I like the overall look but I noticed that the logo is the same image as the rest of the header. Not sure if it’s such a big issue but the general practice is to have it separately and link back to the the index.

Reuse of the logo everywhere is great. All the design touches here look great. I think the only issue I have is the left alignment.

Social Media Weekly

User Experience – How to Make Your Shopping Cart Suck Less
(Note: I wouldn’t call The Oatmeal an authoritative source for web design but from a consumer perspective, it’s insightful enough.)

Web Standards – Seven things I want to see on the web in 2011
“As I’ve been particularly nice all year, I think I deserve to be allowed to have a wish list of things that should change on the web in 2011.”

Web Standards – Ultimate Guide to Microformats: Reference and Examples
“While HTML has a whole bunch of awesome elements by which to convey meaning, a slew of purpose-built microformats (conventions) have been created to better represent the kind of content that exists on the page. This guide discusses popular microformats that can enhance the semantics and interoperability of your website.”

Design – The Photoshop Etiquette Manifesto for Web Designers
“Helpful and *subtle* suggestions for the process of web design in Photoshop, and making the transfer of PSD’s less painful.”

Business – Should I work for free?
(Start in the middle)

Friday Focus 10/29/10: Irregular Shapes

October 29, 2010 By Sophia Lucero

This week on Friday Focus, we’re looking at designs with edges and figures that you don’t see everyday. Instead of the usual rectangles, rounded corners, and circles, why not try these kooky shapes?

Designs of the Week

It’s always a good idea to echo your logo’s silhouette in the design. I also like how everything is layered one top of the other and stepping out of what would otherwise be boundaries.

I think some of the content areas need a little more distinction, but how snazzy looking is that subscribe box—see what a single slash down a rectangle can do?

Content area distinction, check. Is the shape too repetitive though, and does it make the too-straight edge photo slideshow a little out of place?

Lovin’ every slanted edge here. Despite predominant use of green here, great idea to color the winter sport icons blue.

Great way to convey speed, action, excitement. Also, thin arrows repeat all over the design.

Another design inspired by the logo. It would have been nice, though, if there were more color in other parts of the site.

Social Media Weekly

Design – Create An Animated Gif Banner
“This technique is very useful for any serious marketers of any industry who need create animated banners for ad networks, it’s also good fun.”

Design – Great Questions Lead to Great Design
“Without constraints a designer cannot operate, but if you don’t ask the right questions, small issues can lead to big problems down the line. Here’s a typical set of questions I use to sift out the constraints within a design project.”

Friday Focus 10/08/10: Event Websites

October 8, 2010 By Sophia Lucero

Possibly one of the most exciting website genres out there, we’re focusing on event sites this week on Friday Focus.

Designs of the Week

The photo slideshow effect here works really well. The background bamboo pattern is also a nice idea.

The highlight of this design are the interactive shapes that are not only built with CSS3 effects, but tell stories about the different principles of design.

Another site that has subtle animations, but also time-sensitive design. When implementing a one-page site it’s important to remember that scrolling from one section to another is important, so a back to top button that appears only when you’ve left the top section gives a more striking notice than a button that’s constantly there. The large headings and and photos are great as well.

This one’s a little modest compared to the others we’ve seen, but still nicely organized and even cheerful (read: not boring). Always a good idea to format dates calendar-style and have an “important dates” to remember section.

Love the irregularly shaped menu items and other buttons. I wish the large banner switched to show different attractions at the state fair though, and not just have them appear in the footer.

I love how the introductory text is styled, not to mention the colors. Relatively simple design but no detail was missed here.

A little bit of the split and centered approach here. The date stamps are a nice touch, and the details of the project/event are nicely mapped out in one table.

Great idea to hide the tall header and keep the menu as you scroll down (it doesn’t have to be all or nothing). Some sections are a little too text heavy, but it’s the toasts section that could have been styled to be more meaningful looking.

Very nicely designed website. Every button and heading has its own little icon too. Good idea to include sample tracks of the artists playing at the festival.

The intro blurb below the header isn’t quite perfect, but everything’s easy to find and read.

This year’s FOWD conference website keeps the bold look with a little realignment. The information link is a simple graphic right alongside a summary by the numbers. Not sure what the list of years in the footer is doing in the timeline, but using images from NASA is a great move.

Social Media Weekly

SEO – SEO for the Average Joe
“From about 10 lists I found, I gathered only the points that we would need and would make sense to the average person looking to ensure their SEO is up to snuff.”

CSS – Hardboiled CSS3 Media Queries
“Since I started using Media Queries extensively over the last few months, I’ve revised the queries several times for each project, so it made sense to build a boilerplate to use as a starting point. These hardboiled CSS3 Media Queries are empty placeholders for targeting the devices and attributes I’m interesting in making responsive designs for right now.”

Friday Focus 07/23/10: Bento Boxes

July 23, 2010 By Sophia Lucero

This week on Friday Focus: websites whose content are arranged into boxes like those cute bento meals. This time, you must think inside the box!

Designs of the Week

Let’s start with the poster child of this week’s collection. A little too busy for me, perhaps the other columns that aren’t at the center of the page can be faded out? I do like the vertical approach here though, as the header becomes the leftmost sidebar.

For a design like this, you always need to pay attention to what you’re publishing. Here everything blends in nicely and looks like a happy quilt!

Love the horizontal and vertical scrolling, which makes total sense for a grid-based design like this. The experience feels great and makes you want to browse more stuff.

Disappointingly unusable site—it uses one big image map—but I like the concept.

Looking at this site quickly, it looks okay, but eventually you’ll have to wonder why the boxes aren’t lined up properly. I know that it’s a trend to let the floating behavior determine where they’ll land, but in some ways it feels lazy as well.

Better example. The stark black and white plus the bold titles make for a striking look, no doubt.

I like this fairly colorful look as well as the controls for filtering the content, although I’m not happy with the “myster meat” collection of boxes beside it. Of course the footer provides a more useful version of that.

Interface imitation is a growing trend, and here it’s still pretty subtle but memorable (click on the “slant” box, you get a marching ants effect, then of course the blinking cursor). Love the navigation effect.

One of the most peculiar implementations I’ve seen; the images appear only on hover, using pretty dated JavaScript techniques.

I like the use of primary (and secondary) colors for a “designy” feel. But this one doesn’t know how to use semantic HTML either.

I like the boxes and circles used all over, although I wish the sidebars were a little less distracting from the main content area.

I had a pleasant time browsing this site; it looks warmly welcoming and elegant.

Very nifty concept!

Boxy designs don’t just mean you have to put content in boxes, follow the grid rhythm, be done with it. See how this site played with its logo and the placement of its text and photos.

Love the use of the browser’s full width and height.

Really elegant looking, and I admire the fact that even the menus are typed out in HTML even when they could have just used a full image.

Social Media Weekly

JavaScript – JavaScript Minification Part II
“This article emphasizes what you should do to take advantage of YUI Compressor’s best feature for minification: local variable name replacement.”

JavaScript – Say No to noscript
“Despite early accessibility advice advocating use of the noscript element, best practice is to use unobtrusive JavaScript for progressive enhancement, rather than relying on fallback content.”

CSS – Bulletproof CSS3 media queries
“I tried to resolve this problem by providing pure CSS solution for 95% of market share PC browsers and JavaScript solution for the rest of the browsers.”

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 01/14/11: Coffee Break

Designs of the Week

Social Media Weekly

Friday Focus 10/29/10: Irregular Shapes

Designs of the Week

Social Media Weekly

Friday Focus 10/08/10: Event Websites

Designs of the Week

Social Media Weekly

Friday Focus 07/23/10: Bento Boxes

Designs of the Week

Social Media Weekly

Friday Focus 05/07/10: Power Lines

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Vectr: a free graphics editor on your desktop and in the browser

Search