Devlounge

Design, Develop, and Grow

Friday Focus 02/18/11: On the Map

By

This week on Friday Focus: websites featuring maps in their designs.

Designs of the Week

Polecat

I just love everything on this page, but one little detail that caught my eye was how in the navigation, the highlight for the current section matches the design of the current screen. All the content is playful and freeform yet nicely laid out.

Roadify

This one’s kind of an “almost there” design. The overall look is fun and and warm but don’t translate completely to some of the interface elements.

Love Hunt iPhone App

Simple, clean, straightforward; I think it’s just the justified text that throws me off and makes the site look less…romantic?

Fantasy Cartography

I like the almost hazy pastel feel to this design. Clickable areas are designated by the red circles so that helps quite a bit. Using a sans-serif font in the content area, though, kind of breaks the spell of the old world feel.

City Dog

So many interesting design choices on this black and white site: how the navigation items differ in design from one another, how the introductory section is center aligned, how the four link boxes are styled, etc.

Dotvita

The aviation theme looks great, but there’s no hint whatsoever that the site is about a web company (except for a description in the title).

Archibald Studio

One thing I noticed on this page: you can have a short description of your company (or product) at the top, and place a more detailed one in the footer, like the fineprint of a contract.

Global Humanitarian Assistance

Lots of nice details here too. Aside from the Work Streams section, the yellow pull-outs on the left and top areas are quite nifty.

Aboard Entrepreneurship

Stand-out illustrations on this site—you’ll love the contact form at the bottom. The only issue I see is that the layout is built for a wide screen.

Social Media Weekly

Design – Better grids: Lessons learned from Design for Developers
“The next Design for Developers workshop is just a few weeks away, and I thought it would be interesting to highlight some common problems our first group of students had while working on their projects, specifically around grids.”

Programming – Broken Links
“It dawns on me that a word of explanation might be in order for those who normally don’t worry about all the bits and pieces lurking inside a Web address.”

CSS – The Bright (Near) Future of CSS

CSS – CSS3 Tests

CSS – The practicalities of CSS Media Queries, lessons learned.

HTML5 Forms Styled With CSS3

By

Let me start by saying that HTML5 and CSS3 are two different things. Secondly HTML5 is still just HTML and CSS3 is still just CSS. I’ve been noticing that people are confusing these two specifications with each other and making it more complicated then it is.

HTML5 is a set of new specifications added to already existing HTML specifications, plain and simple. CSS3 are the newest specification of CSS, such as box-shadow, text-shadow, transition, etc. We still use HTML to structure content and now with the HTML5 specification we can handle dynamic data such as geo-location for example. CSS is still used to style and create nice effects like shadows, nicer mouse-overs, without needing Javascript. and the old regular things such as color, margin, floats, etc.

Remember HTML5 is HTML, the new doctype; <!DOCTYPE html> is backwards compatible. If you like me always coded using the XHTML way, it is still valid. There aren’t any issues with closing your tags, personally I find it neater and easier to keep the code error free.

But besides all technicality, it will continue to be HTML5 pure for marketing purposes, that’s why the W3C has commissioned a logo to represent HTML5.

html5 logo

Now lets take a look at creating forms using HTML5. While browser support isn’t 100% yet that we can forgo Javascript, we are getting close. There are now standard field attributes to recognize an email address input, placeholder text, autofocus and more.

Once you have created your barebone form it is time to style it with CSS. Add some gradients to the fields, create a nice image free button and use some nice font.

The HTML5 code

A Form of Madness

How to Build Cross-Browser HTML5 Forms

Have a Field Day with HTML5 Forms

Fun with HTML5 Forms

The CSS3 code

Styling a Simple Form using CSS3

Using CSS3 to style forms written in HTML5

Customizing web forms with CSS3 and WebKit

Friday Focus 02/04/11: Realism

By

This week’s picks feature engrossing environments with stunning details and interactions. Design imitating real life is one of the oldest tricks in the book, but never goes out of style.

Designs of the Week

Rastapé - Casa de Forró - Natal

I like the use of custom textures and fonts everywhere, but the parallax effect that activates every time you move your mouse is a little dizzying.

Adfont Calendar 2010

Fashioned after real-life type drawers, the diversity of the woodgrain and nameplates combined with the subtle animations makes for a fascinating microsite.

Doug Neiner

Since this is a tumblelog, it’s a good idea to have markers for the different post types. In this case they differ enough but remain subtle. The datestamps throw in splashes of color to the dominant grays.

Alex Buga

This site has all sorts of interesting design decisions everywhere you look. For instance, the portfolio is built like an iPad with matching user interface to boot. The photos section starts out as a stack of photos that sorts itself out once you click on it. The blog is literally a journal notebook. And so on.

Social Media Weekly

Typography – Eight Ways to Combine Typefaces
“While a lot of what goes into good typography is subjective, there are some guidelines that can point you in the right direction. From there, it’s up to you to experiment and try out different things.”

CSS – Current Color in CSS
“Borders always render with the current color when a border color is not specified, but, till recently, there was no equivalent term for that use – now we do: currentcolor.”

Friday Focus 01/28/11: Site Origami

By

The folded look on websites is still a strong trend. Let’s take a look at a new batch of sites that put it to good use on this week’s Friday Focus.

Designs of the Week

Joyful Giftcard

The introductory content stays on each page but automatically scrolls down to the main content on inner pages. Good solution if you want to keep things on every page but still give the user the option of scrolling back up instead of going back.

Octophant

Love the type, the repeating diagonal stripes, and the arrangement of the images. The logo is barely readable but it’s certainly catchy.

NineFlavors.com

The rainbow stripe thing makes this feel dated but I really like the design of the carousel.

Pražský Majáles

Very cute illustrations, and everything’s neatly arranged.

Andy Knight

The script font softens the chunky blocks a bit. The way the layout is split right down the middle, with text on the left and photos on the right, is effective.

Gavin Wyatt

The navigation looks like a welcome banner here! Not a fan of the justified text and the type could be more refined.

Jon Rundle

The content seems almost too narrow for it to be flushed left, but good idea to put the name in the background on the right. I wish the whole rows of text were clickable, or at least the icons.

Ferocious Quarterly

Sometimes illustration- or portfolio-focused sites tend to keep things minimal to focus on the work being presented, but I love this site for the way it seems to tell its own story through the design. Beautiful details everywhere.

Social Media Weekly

Mobile – Designing Mobile Experiences

CSS – Case Study: Getting Hardboiled with CSS3 2D Transforms
“In this example we’ll use CSS3 two-dimensional transforms to add realism to a row of hardboiled private detectives’ business cards.”

Typography – Web fonts via 2010
“Web fonts got a lot of sensational press last year. I urge you to look past the (obligatory?) handful of web font services that are routinely mentioned, and rather at last year’s extraordinary feats of professionalism that have catalyzed the growth of typography and web design right under our noses.”

Design – Web Design 2011: Normal No Longer Exists
“Web design has come a long way in the last three years. We’re (hopefully) dropping the idea of dogmatic solutions. We’re starting to realise that we need to think on our feet about business cases and target markets. We know that we have zero control over the viewer’s context and environment.”

User Experience – humans.txt
“It’s a TXT file that contains information about the different people who have contributed to building the website.”

HTML – HTML(5) and text-level semantics
“As an absolute type nut and militant web standards advocate, one of the most exciting things that HTML5 brings for me is not the new structural elements like <header>, <aside> et al (although they are pretty awesome) but rather the text-level semantics it brings with the addition and redefinition of certain elements.

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

By

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

Pierre Starkloff

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.

Oliver Kavanagh

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.

Utopic Farm's Experience Labs

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

Bethemiddleman.com

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.

Fusion Ads Holiday Bundle

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

This After That

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.

Steadfast Creative

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.

The Design Koop

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.

MO Blues

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

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge