Design Focus

Friday Focus 08/26/11: Guilloché

The featured designs in this week’s Friday Focus have something subtle in common: thin, repeating patterns you often see in important documents such as bills, checks, and passports, known as guilloché, and similar to the patterns generated by spirographs.

Designs of the Week

OpenPublic website


The featured pattern above repeats like a curtain in other areas, and there’s also a thinner border with matching qualities. I like that there are tiny flag icons beside the section headings, which come from the logo itself. I also like how the dark blue background from the top area stays fixed as the linen background scrolls underneath.

LessMoney Workshop website

LessMoney Workshop

There’s a bit of vintage typography again although it seems isolated to the logo and would’ve been nice if we saw it elsewhere on the page. I do like that the text blocks are literally bounded by borders and fit in like LEGO pieces. I also like that the background is translucent, hinting more at the background and what their event feels like.

BlinkSale website


There’s that layered screens slash Time Machine effect at work, but with more skewing for additional perspective. The top menu uses glowing lights for its hover effects. There’s a bit of a “wall of text” going on in the FAQs and Testimonials section; I wish there were more contrast to the area. Browse the inner pages to discover different textures, patterns, and design elements that spice up but still unify the look that says spells finance.

Social Media Weekly

User Experience6 Epic Forces Battling Your Mega Menus
“On the surface, mega menus seem like they are the perfect solution. Yet something’s not quite right with these interaction design jewels.”

ProgrammingProgramming Achievements: How to Level Up as a Developer
“How do I go from being a good developer to a being really good developer?”

Mobile Web DesignA Mobile Web Divided
“The tools we use should not create a web divided between mobile and desktop.”

TypographyHTML Tricks: Cross Hatched Shadows
“I’ve nicknamed it “Afterburning”, and the idea is simple: Copy the text behind the element, offset it slightly, and apply a background image over for masking.”


Design Focus

Friday Focus 08/19/11: Retro Fit to Print

This week’s crop of website designs boast of stunning typography and that vintage poster look, it almost feels like you’re in a different decade, all the while taking advantage of what today’s web technologies have to offer. Welcome to this week’s Friday Focus!

Designs of the Week

Tom, Dick & Harry website

Tom, Dick & Harry

My favorite part has to be the top menu, bento-style and each item typeset differently. In the news section, even though I’m not a fan of Courier New, and the size is a tad small, the look works. Lots of different fonts used on this page, but they come together harmoniously. The photos and map blend in with the background by getting their own textures, while the company’s different departments have their own seals, how awesome is that?

Daniel Martín website

Daniel Martín

Yellow and black, distressed elements, and many different arrow styles at play. This is another site that’s got a lovely designed map, and even a QR vCard.

Warehouse Twenty One website

Warehouse Twenty One

Love the infographics on the homepage, as well as the bright orange and green color scheme everywhere. I think the sub-sections per page guided by left and right arrows on opposite sides of the website are a nice idea, makes things feel horizontally oriented and almost slideshow-like. The logo and main menu are fixed on either side of the page and out of the way as the content scrolls beneath.

Kitchen Sink Studios website

Kitchen Sink Studios

There are lovely little details here like the sheared “paper” edges and the variety of icons representing this designs studio’s services, but it’s really the typography that takes centerstage here, transforming this site into one long poster I’d love to hang up on my wall. I have to wonder though, where is their logo?

Pixelschupser website


Nice use of bright blocks of primary and secondary colors, combined with some hand-drawn background watermarks and you get a playful look. However, I do think the layout in the 3 middle pages could be further improved if they weren’t all the same three circles, and perhaps used different shapes instead. Scrolling back and forth between those may look confusing as the only differentiator would be color. Other trends at play: one diagonal line int the last section, and the over-under + parallax effect.

Brock Kenzler's website

Brock Kenzler

This one’s also fit for a poster, although on screen it would be nicer if the intro text could be resized automatically for smaller resolutions. Despite the big and detailed look, the site seems to be lacking in branding and navigation in the inner pages, apparently because the portfolio frame, which is a browser window, has a back button which is supposed to serve that purpose. Still, that doesn’t explain why there isn’t any other indicator of what the page is about; breadcrumbs and all the familiar navigation patterns have been established in the web design world for a reason.

Rivers & Robots website

Rivers & Robots

I like how much of the graphic elements on the site are inspired by tickets, both the shapes and dotted lines, and of course the paper-y textures. You can also see how closely the site color scheme matches the album of the artist.

Social Media Weekly

HTML, MobileAnatomy of a HTML5 Mobile App
“Can HTML5 do the job? Absolutely, but…” Find out what you need to know to build an HTML5-powered mobile app.

JavaScriptConvert a Menu to a Dropdown for Small Screens
Exactly what it says.

UsabilitySearch Fields — What To Do and What Not To Do
ZURB investigates different search boxes and tells you what to emulate and avoid.

SoftwareThe perfect web design app… and why it doesn’t exist
Find out which apps certain designers use to create websites. What would a program build specifically for web design require?



Branding Your Website Using Simple Graphic Design Principles

Web DesignDesigning a website isn’t about just picking a nice color, throwing together a few navigational menus and hoping for the best, a great web designer will tell you that your design should brand your website and fit the industry you are targeting, while each part of the site must work together to form an “identity” that users will immediately recognize through your use of graphic design.

When developing a new property there are several aspects that I always choose to setup before attempting to dig into the deep design elements of the website.

Choosing Website Colors

The color(s) you choose for your site should fit the industry you are attempting to attract, for example a site about celebrity gossip will likely be served well by purple, pink and other colors that appeal to a mostly female demographic, while sports sites tend to do well with bold colors such as dark blue, dark red and even black. Knowing your demographic can help you determine which colors will work well for your purposes. I personally use Colorschemedesigner.com to find colors in the most efficient way possible.

Once you’ve chosen which colors you want to use on your website it’s important that you blend those colors throughout. For example, let’s assume you chose hex color code #3B5998 (Facebook blue), it’s important to include that color in your logo, navigation bars, highlighted links and even sidebar titles. When your users see your sites color scheme they should immediately associate that color with your product. If you don’t want a very bold color on your navigation bar a simple black bar with text or hover highlighting with your sites color scheme is also a nice solution.

Choosing Website Typography

The font you choose for your website is one of the first ways users will experience the content you provide. Just like choosing a color you want to make sure the typography on your website matches the type of content you provide. For example, looking back at our celebrity website, a “fun” font with slightly more curved lettering would be a great way to show off titles on a page. If you look at popular entertainment site TMZ.com they provide bold curvy titles that attract users with sensationalized headlines. When it comes to the actual content on the site however it’s a good idea to choose familiar fonts that users can associate with, for example Arial or Helvetica are both commonly used in the graphic design of websites and are easy to read since our eyes are trained to read them. You want your unique content to stand out among your sites colors, ads and other features, but not so much so that it distracts from your overall branding design elements. To find generally accepted free fonts I recommend google.com/webfonts. Once you have chosen your font type make sure to stick with that font throughout your sites design to create a unifying element.

Blend Social Media Options Into Your Site

Branding your site from a graphic design point of view doesn’t simply mean placing nice social sharing and follow icons on your site, if you want your product to stand out you need to develop icons that match your sites content. For example, if you use the hex code I highlighted earlier, it wouldn’t hurt to have Facebook, Twitter, Digg and other icons created in those colors or perhaps you can use basic sharing buttons but wrap them in a box border that matches your sites background or logo color. After you’ve blended in your social networking icons make sure to customize your Twitter, Facebook and other pages to match your sites color scheme, for example change your Twitter background color to the same color code as your sites logo. Many users will first view your content on social media sites before they click through to your site, if you make those social profiles feel like part of your final website product you can brand your website even when users are not actually on your property.

Website branding from a graphic design perspective comes down to understanding that all of the elements on your website need to work together and that work needs to be consistent. Before you design a website or higher a design consultancy firm you need to ask yourself what you want your site to say and then figure out how you want to deliver that message graphically both on-site and off-site.



Design Focus

Friday Focus 08/12/11: Slashed Text

We’ve seen a lot of slanting, skewed designs before, but there seems to be an even more specific trend related to that: cropping away text by the use of diagonal lines, as though their edges have been slashed away.

Designs of the Week

Ralph Millard's website

Ralph Millard

The way the images are sliced are extremely odd and even unsemantic. Why not just reuse the dividers and background headers per section? Splitting a large image is a little more understandable perhaps to load things faster, but that also means you’re making multiple HTTP requests.

Adriano Brzozowski's website

Adriano Brzozowski

Here’s another site that uses triangles (and a couple of other shapes), and I like how it frames the Work section nicely. The use of green on the hover boxes is a little surprising even you do see it in the logo. Also, the lightbox mentions website URLs, but are not linked. Is that on purpose (some designers don’t like people to see the finished product cause there’s a good chance it’s been wrecked by other people already!) or a limitation of the script?

BUILD Windows website

BUILD Windows

While the Metro user interface that’s coming to Windows 8 impresses me, this Build logo—which is supposed to promote that same slick feel—does not. This also applies to the rest of the site design. Using Segoe with Georgia doesn’t feel that modern at all. There are bits of the Metro look here and there, but they could have taken things much further. Maybe because it’s just a conference site?

Social Media Weekly

A subsection to the site Layman’s Layout, FreeFacing recommends various typographic styles using only the free fonts available on most computers (OS fonts, Adobe fonts, MS Office fonts). There are also diagrams grouping similar styles and looks (lightweights, heavyweights, cheeky, elegant, etc.).

HTML5The <details> and <summary> elements
More information about new semantic elements <details> and <summary>, with further explanations and examples from the HTML5 Doctor.

HTML5, CSS3haz.io
Which HTML5 and CSS3 features does your browser support? Visit load this website to find out.

JavaScriptWhat’s a Closure?
Nathan Whitehead teaches JS closures starting with the most basic lessons and builds from there. Learn by entering code directly on the page.

DesignDeveloper Lorem Ipsum
Need placeholder text? Try paragraphs upon paragraphs of developer buzzwords!


Design Focus

Friday Focus 08/05/11: Masked Text

This week’s Friday Focus tackles exactly what it says on the tin: designs featuring imagery molded into the silhouettes of large type. Unfortunately all of them still use images to achieve the effect instead of actual text, but all are still noteworthy designs.

Designs of the Week

Fox Johnston website

Fox Johnston

Two photos switching in and out, one becomes the background while the other becomes the “content” of the masked text. What’s a little weird is that the “photo text” is in the same dimensions as the full-size images, with the rest of its canvas transparent—instead of using absolute positioning. Also, while I don’t mind that some parts of the text aren’t easily readable, I kind of wish there were more pictures. Of course the possible explanation for that is this is only a splash page, and perhaps the question I should be asking is: should it even still exist in 2011?

Gabriel Aloysius Pang website

Gabriel Aloysius Pang

There’s a little aliasing going on in the edges in my browser, but if you check the source images, including the smaller navigation headers at the right, you don’t find them there, so it could be due to JavaScript. There are a few small shapes used here and there, including triangles, double dots, plus signs, and dashes. Not to mention a slash to divide the content area from the navigation area, which is quite popular among designy portfolios.

Bradley Taunt website

Bradley Taunt

The combination of the colorful space background with the chunky and carved out foreground is a simple technique but creates a stunning look. I think a bit more tweaking is needed with some of the paddings and margins andparagraph text (especially for a wide, one-column layout). The taller text shadow on hover effect is another technique you can easily pull off with CSS3.

Social Media Weekly

Design, Business, IdentityThe Personification of Design
How well designed and well maintained is your online persona via your social media profiles?

CSSThe future of CSS layouts
A discussion of new CSS3 modules for better control over laying out content.

User ExperienceThink Outside the Box, but Don’t Forget the Box Exists
Have fun, but still be consistent and considerate!



Internet Marketing Optimization From Split Testing, Page Optimization and Monitoring

Internet Marketing Optimization isn’t a simple process, users can’t simply pick and choose a smart tag line, throw it up on Google Adwords and other publisher platforms and hope for the best, instead it requires split testing of ads, clearly targeted website pages that draw in a users attention and the constant monitoring of old ads and the ads of competitors. If you plan to optimize your internet marketing there are a few simple steps you can take to get you started, where you go from there is solely based on how your site or product performs.

Split Testing Ads

If internet businesses could become successful by throwing up a single ad and immediately reaping the benefits we would all be millionaires, the truth is finding the right ads for your pages and product can be tricky. Users should begin their internet campaigns with the expectation that campaigns may lose money before gaining. Start by creating several ads with different wording, for example you might try “Samsung Nexus S Free With Activation” if you offer cell phones and then try “Free Smartphone From Samsung” or “Free Samsung Android Phone Activations.” During each campaign write down the number of people who visited your site based on the number of impressions you served through your publisher platform, then determine how many people accepted the offer. The first number (site visitors based on page impressions) is your CTR (Click-Through-Rate), while the number of  buyers are your conversion rate (CTR / buyers). After a day of testing during different times figure out which ad works the best. After you choose a winner split test it against yet another ad until you are satisfied that you have the best converting ad for your website. Through split testing you can determine which ads are working during different times and then optimize your ad display times by ad to gain the biggest audience for the lowest future cost.

Here’s a simple chart demonstrating split testing:

Split Testing

Website Page Optimization

You can split test for weeks and still fail at advertising, however you can avoid the risk of failure by optimizing your website’s pages for better conversion. Start your optimization by installing a heat map on your website. A heat map is a piece of software which shows the “hottest” places on your website in terms of visitor click through rates. For example, users may click the top right ad on your page more than anywhere else, by understanding where a users eyes are traveling and their fingers are clicking you can place your best converting pages and products in those section.

Here’s an example of a Google.com heatmap, the red areas are where users tend to click the most:

Google Heat Map

Not only should you understand where users are clicking, you should also optimize your marketing materials for users. Write your pages for people and not for search engines. Engage your readers with exciting information and make sure they understand the importance of your products or information.

Monitoring Results Against Competing Pages

Creating checks and balances for your internet marketing optimization plan is just as important as setting marketing plans into motion. Split testing may provide results in the short term however trends change, users move on and it’s up to you to ensure they return. Once you have optimized your web pages and set your ads to timed intervals it’s important to continually monitor the success of those campaigns. If a certain page or product stops converting you may want to check your pages keywords or exact product names against competitor pages, are they using different keywords? Perhaps they are highlighting parts of the product or story you missed? If you’re using Adwords, Yahoo Ads or other ad platforms you may also want to check if your competitors are using ads that appear more engaging or offer a different angle.

Internet Marketing Optimization is not an exact science, even the best split testers and optimization firms are constantly tweaking their campaigns and testing new marketing practices, however by monitoring your ads and product pages and monitoring your competitors you can determine new and exciting ways to pitch your products to potential customers.