watercolor

Friday Focus 09/02/11: Over the Moon

September 2, 2011 By Sophia Lucero

This week’s Friday Focus features designs that incorporate the moon in them.

Designs of the Week

Ryan Lottering's website — Ryan Lottering

Let’s talk about the moon and how it’s in the top right, in the foreground, spinning oh so slowly—just enough for people to notice it’s moving. Overall look seems simple, but I think it’s effective and still makes an impact. I think it’s interesting that the site labels the homepage as the About page at the same time. One nit to pick, while not visual, is that there are two different email addresses being used in three email links.

BlackMoon Design website — BlackMoon Design

It’s funny how this site also uses the Star Trek logo as one of its icons in keeping with the outer space theme. I love the illustrated, painted look in the header, including the word “design” in the logo (which doesn’t look like just another handwritten typeface). It’d be nice to have the headings as real web fonts now instead of images, but then I discovered that the whole design—and I mean every graphic you see on the page—is one big sprite, so kudos to that!

Things We Left on the Moon website — Things We Left on the Moon

This is just a demo site created by Dan Cederholm for An Event Apart Seattle 2010, but there are a lot of neat things to be inspired by here, particularly CSS3 features in the hover effects and typography. Love the idea of the halftoned moon landing picture as a background. The use of purple is also a nice touch, since it’s easy to just reach out for midnight blue when depicting skies and space.

Social Media Weekly

Mobile Web Design, E-Commerce – Add to Cart: 5 Ways to Improve Shopping on the Mobile Web
Five steps to optimizing online shopping on mobile devices.

HTML5 – The Current State of HTML5 Forms
Check out the latest browser support and techniques for using form attributes in HTML5.

CSS3 – Sizing with CSS3′s vw and vh units
Another set of measuring units included in CSS3, this time based on viewport dimensions.

CSS – The Minimum Page Project
Another iteration on the CSS resets out there. The idea is to avoid redundancy due to broad-sweeping resets.

Design, CSS – Adapted
Reflections on the challenges and options in adapative, responsive web design.

Design, User Experience – Thoughts On Communicating Design
“Communicating design, in general, needs to be less about documentation and more about clear, concise and ongoing two-way communication.”

Friday Focus 03/25/11: Sassy Sliders

March 25, 2011 By Sophia Lucero

This week’s Friday Focus features designs that use smart, stunning slideshow techniques that are sure to inspire you. Take some notes!

Designs of the Week

The circus theme combined with the sketchy, painted feel looks great. Everything’s bright and cheerful.

Minimal but packs a punch with the clothesline effect. Nice integration of Google Translate for language localization, and the header matches each project color/pattern.

Nice little thumbnail tabs to the right for navigating through the slides, and a nice dark overlay to the left for blending into the background.

A more conventional look, but I like how the text and image areas are separated with a nice curvy cut, breaking the typical rectangular silhouette of carousels.

The splash of milk makes all the difference. This site’s filled with content but it still feels light and nicely organized.

Keeping the color scheme in grayscale to let the purple pop is an interesting technique. Although using black text on it isn’t very readable. So is using italics for majority of the site.

Fun sketchy illustrations everywhere—even the icons for meta information are custom. It also helps that there are tooltips in case they look a little vague. I like the treatment to the scrollbar although maybe some arrows or a change in cursor type would help more.

Love or hate the vintage, classical look, the details on this site are to die for. But really, it’s the main slideshow that’s the best part, which comes together in such a pleasant way.

Social Media Weekly

Accessibility – Web Accessibility Toolbar
“In honour of Jim Thatchers important and continuing contribution to making the web a more accessible medium, I have worked on an update to the Web Accessibility Toolbar for Internet Explorer, which includes new features that he has developed.”

HTML – New HTML elements and surrogate <div>s
“What else can we do to move forward without polluting our documents with non semantic wrappers?”

User Experience – Effective Developer Experience
“Platform product owners must be concerned with assisting developers in accomplishing this if end users are to have a good user experience overall. Attention to these details is called developer experience (DX), and enabling app developers to be successful through better DX will create a more successful UX for the platform product.”

Friday Focus 08/13/10: Let Your Garden Grow

August 13, 2010 By Sophia Lucero

This week on Friday Focus: vines, blooms, and other foliage that do a great job of framing your website.

Designs of the Week

When doing vines on a sky background, it doesn’t make much sense to have drop shadows, does it?

The gradient on the tabs are a little severe but the translucent ones look great. I kind of want more blue in the background though, feels too white.

The use of fixed-width type is curious, but I like the mixed textures. The actual photo of a basket for a shopping cart icon is priceless.

The Quick Search box looks a little cramped; the Map Search could be more accessible.

Some nice watercolor textures here although again the shadows get to me. A little bit of a split layout going on below.

The subtly moving leaves (and the squirrel’s tail) look great—they barely call attention to themselves so when you do notice them, they’re a nice treat. Attention to detail everywhere.

I like how the leaves are behind the large sign up button.

Something more ornate and abstract. I feel a disconnect between the gray-black top and the brown bottom, though.

Another disconnect here. The header is awesome—there’s a bear! carrying a sign!—but the bottom is just too light and doesn’t even carry any hint of nature in it.

Beautiful design. Not sure what a music player is doing on a dentist site, but perhaps they thought it would be a fun little touch.

The flowers look so pretty I they weren’t just in the background. The turquoise is a nice contrast to the floral hues of pink and peach.

I like how the leaves are used as frames for the circular icons here.

Love the purple and fuchsia, it even matches the club photo on the front page. Centered logo alert!

Make sure your eyes are well-rested before you view this site; every color of the rainbow seems to be on here. The content area could have used at least a translucent background to make the text more readable, which is already so small.

Social Media Weekly

UX – Designing with Paper Prototyping
“The basic premise of this method is that a paper prototype of a feature’s UI is crafted and then given to a user who will attempt to complete a task or a scenario. Evaluators record and analyze the results from these sessions, which are then used to create another prototype.”

Accessibility – Misguided accessibility: access keys
“These days, accessibility experts recommend strongly against the use of access keys, instead putting focus on accessibility enhancers such as “skip-to” links and clear navigation and layout, fully tested with assistive technologies like screen-readers.”

Accessibility – What should be the minimum / maximum length of alternate text?
“Putting undue length restrictions on alternate text can undermine the quality of alternate text, limit the amount of information conveyed to readers, and can affect the style of writing in a way that inhibits comprehension.”

Usability – Shlock and Awe: Little Things on Your Website that Drive People Nuts
“No website will ever be perfect (unfortunately), but we’ve compiled a list of little tweaks and changes you can check on your website to make sure you’re not irritating your visitors.”

JavaScript – Commonly Confused Bits Of jQuery
“jQuery brings to the party its own API, featuring a host of functions, methods and syntactical peculiarities. Some are confused or appear similar to each other but actually differ in some way. This article clears up some of these confusions.”

Friday Focus 05/27/10: In Your Face Illustrations

May 28, 2010 By Sophia Lucero

This week on Friday Focus: illustrations that appear front and center in these websites, because we want them big, bright, and beautiful.

Designs of the Week

Highly detailed and scrumptious “pie chart”! The colorful illustration style and metaphors all the way into the footer not only adds interest but are artfully done.

I just love a design that breaks out of the box. Once again this is a lovely work of art, with touches of calligraphy and fascinating shapes growing out of the swirls. The inside page design is more organized but keeps this look in the header.

It’s great that you can find lots of clickable elements in the illustration itself, and the metaphor really works. The hand-drawn, watercolor style carries over to the other page elements like the icons. I wish the form fields and buttons joined in the fun too.

The center-focused layout works well, as does the bold black text and buttons, greens, and oranges.

Showcasing your work in the biggest, widest way possible is a surefire way to set the look and feel of your site. In this case it’s spilling with bright pinks and trendy type.

Some quieter shades of pink in here but still striking. Notice the recycling of the hearts, stars, roses, and leaves in the rest of this one page site.

Super-wide layout with a sprinkle of parallax, -webkit-transform, and subtle jQuery hover effects. The most exciting portion is the contact form at the footer.

I love this sketchy look accompanied by a pattern of ocean waves. (You can actually download it as a wallpaper if you want.)

This isn’t a groundbreaking layout or look but it somehow feels different. A case of letting the picture speak a thousand works, perhaps?

Topnotch icon work and typography. Just look at it. The vignettes in the corners are a bonus.

Fantastic illustrations, but other design details fall a little short of its elegance and whimsy.

This one, on the other hand, overflows with whimsy! Nothing says it like a unicorn and a mustache sign in icon.

I like that the rabbit and its hole is a mini power line leading in to the next section’s boxes. The slanting boxes and buttons are great too.

Social Media Weekly

CSS – Efficiently Rendering CSS
“I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?”

CSS – Using CSS3 Transitions, Transforms and Animation
“These demos are showing of CSS transitions, transforms (2D and 3D) and animations”

JavaScript – Javascript shorthand for cleaner code
“A few ways to save on some bytes in your Javascript code, as well as making it more readable and quicker to write”

Optimization – 46 CRO/Conversion Rate Optimization Resources for Web Design, SEO & Social Media Experts

Friday Focus 05/21/10: Neutralized

May 21, 2010 By Sophia Lucero

I’m seeing a lot of sites whose color palette consists almost exclusively of light grayish, brownish hues. Sounds boring? No such thing for a smart designer.

Designs of the Week

Social Media Weekly

CSS – 13 Pure CSS Techniques for Creating JavaScript-like Interactions
“Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing.”

HTML – The Origins of the <blink> Tag

Typography – 10 Great Tips For Improving Your Web Typography
“Once a specialist occupation, the digital age has opened typography to computer users and web designers. When creating pages and laying out text with other content there are several guiding principles that designers should bear in mind.”

Bloggers – The History of Web Design Blogs
“Although the article may seem rather subjective to you, we hope that it will give you at least some basic understanding of how it all started and evolved into its current state.”

Friday Focus 09/02/11: Over the Moon

Designs of the Week

Social Media Weekly

Friday Focus 03/25/11: Sassy Sliders

Designs of the Week

Social Media Weekly

Friday Focus 08/13/10: Let Your Garden Grow

Designs of the Week

Social Media Weekly

Friday Focus 05/27/10: In Your Face Illustrations

Designs of the Week

Social Media Weekly

Friday Focus 05/21/10: Neutralized

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Going Meta With Circuit-Inspired Design

Search