webfonts

Friday Focus 04/06/12: By Four

April 6, 2012 By Sophia Lucero

We’re already into the fourth month of the year, and this week we’re featuring designs whose main navigation strictly use that number.

Designs of the Week

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Brand Almanac

There’s a chalkboard look on the homepage, plus circular links that contrast against the four boxes and alternate with slideshow photographs. On the inside it’s a lighter look while still retaining that classic, old school, neutral feel.

Raffaele Leone's website — Raffaele Leone

I like the keyboard navigation all the way into the deeper sections like the portfolio, but using the bright colors as backgrounds on top of the chunky font in white and black, it’s a bit much.

Planet Propaganda website — Planet Propaganda

The navigation’s actually on top of the full-screen slideshow, but arranged in a triangular, X-mark fashion, carrying both the studio’s logo and slogan—smart and effective move. The shape is repeated in their about page as well.

Social Media Weekly

Get solid WordPress themes, plugins, and even design training from iThemes.

Web Design – Responsive Web Design: Missing the Point
“Responsive design is the real deal. It is not a fad. It’s a legitimate attempt to address the massive challenge of delivering great experiences to this explosion of devices and browsers. But don’t feel like it’s the end-all be-all of website construction. This aint religion. This is web design.”

Design, Typography – Fontomas – iconic fonts scissors
“Now it’s trivial to customise fonts for your needs with 3 simple step. At first, you select needed symbols on source fonts. Then rearrange those on destination font. After that, you can download SVG font and make webpack via fontsquirrel generator or other services.”

Business – Sell Yourself: A Creative CV Guide
“This guide lends a helping hand to anyone creating a CV aimed at the creative industries. There are hints, tips and insights into how to inject some creativity into your CV and also how”

Friday Focus 09/23/11: The Dip

September 23, 2011 By Sophia Lucero

Happy Friday Focus! Today we’re looking at designs with a bit of a “dip” in them—one content area leading into another with a nice little curve. Can you spot them? Read on!

Designs of the Week

I like the combination of wood, light grunge, stripes, and glossy (web 2.0) green—all used in moderation. This design is the poster child for “the dip” technique I’m talking about: a nice column containing navigation links at the right instead of the usual header area, ending in a curly brace shape pointing downward to the rest of the sidebar.

This shade of blue is quite popular for girly sites, especially wedding-themed ones, combined with slab serifs and calligraphic fonts. This one looks a little flat, literally, with no textures or gradients, and the girl looks like a cut-out doll with the stark white shadow!

Looking for the content? It’s tucked away in the top drawer. The focus of this design is a parallaxed animation featuring an pixelated rendering of the site owner during different times of the day. Right now the screenshot shows him typing away at his laptop (if you watch long enough, his dog shows up but gets shooed away and floats off into space), but click on the different color swatches at the bottom left and you’ll see him doing other things like dreaming in binary, grabbing coffee from out of nowhere, and playing arcade games. Aside from the fact that the colors per scene are blended really, I think this is a smart, funny way for strangers to get to know this person better, even by a little bit.

First, while the callouts aren’t interactive, I like how the first slide is styled especially the halo around the “view portfolio” circle. Hovering over the top navigation gives you circular backgrounds, too, but the active ones get pointers and turn into speech bubbles. There are cool slopes marking each section, and inner pages crop off the the very large headings to focus on the content below.

The welcome blurb plays with depth by blurring and resizing objects to make them look like they’re in the background. The illustrations are straightforward, but the use of a patch of grass to separate each section is clever. You must also check out the hover effect on each portfolio item, like a store sign or label. I must say, though, the way the contact form is center-aligned in the footer is a little weird!

Social Media Weekly

Business – How Doing Less Work for More Money Saved Client Work (or) How I Finally Became a Professional Designer
Don’t sell yourself short. Find out how “boundaries will set you free”—as in design itself.

Typography – FontDropper 1000
A bookmarklet that lets you test web fonts on any page.

HTML5 – HTML 5 Canvas Deep Dive
Start learning how to work the canvas, now!

UX, Wireframing, HTML, CSS – Building prototypes in HTML and CSS
A step by step guide to creating frames and flows, live, in the browser.

HTML, Accessibility, SEO – Pagination with rel=“next” and rel=“prev”
Google shows you how to add meaning to your navigation (and help their search engine) with semantic markup.

Friday Focus 09/09/11: Denim

September 9, 2011 By Sophia Lucero

This week on Friday Focus we’re featuring a specific type of texture being used in websites: denim. Is it the new wood pattern? Let’s find out.

Designs of the Week

Enliven Labs

I like that the texture used isn’t the typical blue fabric, which also means you aren’t limited by the color palette for the design. You see color swatches at the top, a fixed red ribbon background, and a huge call to action button once you get to the bottom of the page. Also, in the quest for integrating social icons into a design, we come across another technique: there’s a dark silhouette of the Twitter bird, which “lights up” into full color when you hover.

wtfJeans

The jean texture looks interesting but seems to be fighting with the navigation text. I think it’s good that the figure text is actual text, and not merged with the rest of the pants diagram. The “Made In Europe” text looks a little out of place, and could have been styled more like a badge than a button. What I really like is the textured circular backgrounds in the four bottom links—not mind-blowingly stunning but a nice touch.

Alexander Hahn

I love the stitched look especially on the logo. It’s a simple design, based on an existing theme in fact (as noted in the footer credits), but the idea of using two “layers” in the background, bounded by a vertical border on either side, is something I don’t see everyday.

Drupalcamp Atlanta

This site ties many different elements together to create a lovely design: vintage typography, tickets that look like tickets, folded tabs, and even orange-dyed denim shaped as ribbons! However, the orange on dark gray, combined with the Harlow font, is a little taxing on the eyes.

Social Media Weekly

Typography – The 10 best fonts from the Google Webfonts Directory
With Google’s Webfonts list growing, it’s nice to know which are the highly recommended fonts on there.

CSS, Design – Use Google+ to improve your UI
See how they did it! There’s also an Apple OS X version of the guide.

CSS – Why Browsers Read Selectors Right to Left
Understanding how things work always helps people get better.

Business – The Dark Art of Pricing
Jessica Hische lists her experiences in the dirty job of pricing your work.