BlogmyQuery – BMQ

Walk into any design classroom, at any college in America, and you’ll see a comfortable mix of male and female students. Turn your attention to the front of the classroom, or down the hall to the faculty and staff offices, and that wonderful gender balance starts to skew. Travel outside the campus, and there’s really no balance at all.

But why? If there are design classrooms across the country with a 50/50 blend of men and women — and in many classrooms, there are more females than males — then why doesn’t the design field represent the same ratio? Why does creative employment still showcase a male-dominated presence? What happens to these passionate and educated females? Certainly, there must be more to it than child-bearing — or is there? Is a more gender-balanced field really all that important? Why, or why not?

Gender disparities in the design field is a controversial as well as a complex topic. Image credit: Choichun Leung

These questions and many others accompanied me to a design and technology conference this past fall. Minnebar, an annual Twin Cities conference that celebrates vision, niche technology and collective wisdom, provided the perfect platform for such inquiries. I hosted a session aptly named “The Equal Sign� to pitch the dilemma of the field not representing the classroom. I played the role of discussion facilitator, and was eager to see where the conversation would go. What I hadn’t realized, was that I wasn’t the only one perplexed by this phenomenon.

First, the Stats

According to Findings From A List Apart Survey 2009, a poll created by and for Web designers, 82.6% of Web designers are male. Ironically, 66.5% of the same respondents stated there is “definitely not� a gender bias in the design field. Web design is just one segment of the design world, but the statistic is nonetheless chilling.

My audience for the session? Predominantly female. It seems the topic itself is more intriguing for women than men. What these women had to say was sobering. One mentioned that it’s foolish to expect a male-dominated field to be able to design interfaces that appeal to how women want to interact with technology. In other words, young girls put off as consumers of technology aren’t likely to desire to create in that arena.

Another common theme during the discussion was that of heroes. So few female designers exist, and of them, few are known superstars in the industry. Of these, even less are known by individuals outside of the industry. Lack of visible female heroes results in lack of female interest. But there are countless male role models in the field; why can’t they be heroes for young girls with computers? The same reason why I’d rather aspire to be Run DMC, than Mariah Carey.

Second, the Perceptions

In the book Unlocking the Clubhouse: Women in Computing, two researchers at Carnegie Mellon University found that “research shows that both males and females believe that males are better than females at computing� (Clarke, 1992; Spertus, 1991). This finding is nearly 20 years old, but this mindset could easily have been held by the parents of today’s college students. Going to college can be hard, but pursuing a degree with little support from mom and dad makes it even harder.

There is also an unspoken expectation that women are very creative and make great print designers, but aren’t wired to splice the intricacies of new and constantly changing software and platforms — as noted in a Fadtastic.net article written by designer Matt Davies. The field generally represents the occurrence of women holding positions in print, illustration and photography, with noticeable scarcity in more technology-dependent roles such as Web design, animation, game design and programming.

Google used to return the correction “Did You Mean: He Invented” for the search “she invented”. It generated a lot of buzz throughout the Web.

Third, the Conditioning

Conditioning is perhaps the most obvious and potentially controversial (but definitely the most changing) of all the reasons why there aren’t more women designers. Video games and scrapbooks are cliché, but a telling, cultural phenomena. Traditionally, young boys have been fascinated with video games. The constant newness of the technological capacities; the integration with other male stigmas, such as television and computers; and certainly the intense competitive nature of the games, whether against a friend or the software itself, have all catered to masculine characteristics.

Scrapbooking, on the other hand — often a self-involved, self-rewarding, aesthetic, process-oriented affair — has appealed to feminine sensibilities. Great; but what do video games and scrapbooking have to do with gender gaps in creative fields?

Everything. And, it’s changing. In the Newsweek article “’Where’s My Crazy Hot Guy?’ A Female Designer On Women and Videogames,â€� award-winning female game designer Brenda Brathwaite confessed, “There was a time literally, within this decade, when I knew every single female game designer out there. Personally….â€� Video games, or more specifically, the video game format, have found their way into almost every media component of our lives.

Log in to Facebook, and in no time you’ll end up fielding requests from friends to play “Farmville.� Shop your favorite store online, and you may be prompted to click a link and dress a sophisticated cartoon character to help you with your purchasing decisions. Save some time at the grocery store by going through the self-checkout line, and you’re confronted with the all too familiar series of buttons, colors and graphics to ease your way through the credit card swipe and out the door.

Video gaming isn’t just something engaged in by teenage football players. It’s a format that is relevant to men and women, boys and girls, and this inclusion of the female population is invariably causing more females to ask themselves how it all works, and how they can be a contributing factor.

Fourth, the Status Quo

All things design — video games, Web design and graphic arts — can bring two genders together and create acceptance and encouragement, which fosters the potential to level the creative employment playing field. You must ask yourself, “Is this a good thing?â€� There are numerous reasons why more women are needed, and need representation; but is the “female designer dilemma” really all that bad? If a city of people stormed the doors of their school district demanding more male kindergarten teachers, they might be mercilessly scoffed at.

Similarly, few are tooting the horn for more female firefighters, or male nurses. Our culture has built functioning gender-based roles, and has birthed young boys and girls excited to fill them. Why fix it if it ain’t broke? If gender balance is achieved in the creative industry, will it be adding new jobs for females, or replacing jobs that males had? If the latter is the case, what will happen to these men? My audience at Minnebar had blank faces, and empty responses, when I asked them.

All of this matters for one reason: I don’t want to face my female students every day with the thought that more than half of them won’t ever be designers, and of the few that do, what exactly do they have to look forward to? They will have to deal with their peers, employers, clients and families being both impressed and confused when their sisters, friends and coworkers create designs that aren’t “girly” and “cute.”

Lisa Firke, a woman embodying that rare combination of female and Web designer, commented on Zeldman.com: “I’m sure it’s not a coincidence that 90% of my clients are women. Perhaps taking women seriously as designers goes hand-in-hand with taking women seriously as Web consumers.�

Sources

Fisher, A. and Margolis, J. (2002). Unlocking the Clubhouse: Women in Computing. Cambridge, MA. MIT Press.

Editor’s Note

This post is an article from our series of “opinion columns,” in which we give people in the Web design community a platform to raise their voices and present their opinion on something they feel strongly about to the community. Please note that the content in this series is not in any way influenced by the Smashing Magazine’s Editorial team. If you want to publish your article in this series, please send us your thoughts and we’ll get back to you.

— Vitaly Friedman, Editor in Chief of Smashing Magazine

(sp) (rs) (ik) (vf)

© John Mindiola for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: community, Design, gender

by Robert Bowen

Having recently published the Illustrator toolbox, we thought we would continue down the print design path and follow up with our next toolbox in this same arena. Welcome to the Ultimate InDesign Toolbox for all of those designers and graphic artists who use this valuable tool for all of their print media needs. This expansive addition to the Adobe Creative Suite family is often overlooked by many in the community, opting instead to use Illustrator alone in their forays into the print side of the game.

Hopefully, through this arsenal expanding expedition we can not only help those already addicted to this fantastic design tool, but perhaps open the door for some of those who have previously avoided it to give it a shot. Go ahead and start sifting through the various links that we have collected below to see which ones you can use to take your proverbial toolbox to the next level. Start loading up on some effective and essential resources, not to mention learning some new techniques that can increase your skill base!

Websites

As usual, the first stop along the way in this resource compilation are some of the best websites that you can turn to which have dedicated themselves to exploring this design tool. Some you might know, and others you might not, but either way they are a great place to start when you are seeking out InDesign related info and resources.

InDesign Secrets is a wonderful online resource, in and of itself, when it comes to learning the finer points of this dynamic design app. Specializing in all things in InDesign.

The InDesigner is an in-depth and informative blog from InDesign specialist Michael Murphy, that harnesses his expertise to help make this app more approachable.

Tim Cole’s InDesign BackChannel is a site dedicated to InDesign from one of Adobe’s own program specialists. Definitely a great place to turn for more insight into the app.

Instant InDesign is another dedicated site worth stopping by if you are looking to learn more about using InDesign to take on all of your print media needs.

InDesign Talk is a helpful e-mail discussion forum for any and all InDesign users where they can submit to share with and assist one another with this program.

InDesign Central is another site that you might want to have on your go-to list when you are looking for opening up all this design tool has to offer. Plenty of resources to beef up your arsenal.

InDesign User Group is an invaluable site for all of those users who are part of groups dedicated to Adobe’s InDesign that acts as an information hub for their members.

InDesign Magazine is an online based PDF publication that is all about Adobe InDesign. This useful electronic magazine is full of useful scripts, video tutorials, and more.

InDesign Docs is another site straight from the proverbial horse’s mouth. From Bob Bringhurst, one of the lead writers for InDesign, comes a blog aimed at helping users get more from this tool.

Seneca Design and Training has a section of their site that is completely fixed and focused on gathering a large collection of some of the best InDesign resources that web has created and delivering them to you.

And we couldn’t leave out of this section without sending you to one last Adobe site, the InDesign Exchange. Another online community for users from the source.

Tutorials

Next up in the toolbox journey are the InDesign tutorials. From across the vast corners of cyberspace the design community has been filling this demand for insightful content that can take the finer points of this design tool and make them make sense in exciting and accessible ways. For a little bit of a skill builder and refresher course in the program, take a gander through the tuts we have gathered:

Layers Magazine InDesign Tutorials is one of the first places that most users turn to when they are looking for learning opportunities, so we thought we would do the same.

InDesign CS5 Video Tutorials is a list of tuts compiled by the Adobe team that break down this design tool for users to help them learn the app inside and out. Most of the tuts are based on earlier CS versions like 3 or 4, but still apply and work with CS5.

TutsBuzz InDesign Tutorials is a fantastic tutorial site with a dedicated ID section that can assist you on your quest to completely master this dynamo of a design tool.

Tutorial Roundup for Getting Started with InDesign is another awesome place to start when you are just getting going using this design application. If you are a beginner or looking for a refresher then head to Blog Spoon Graphics to fix that.

25 Great Adobe InDesign Guides & Tutorials is a wonderful post from The Web Squeeze that can help get you going on the right track for all of your InDesign needs. Definitely worth going through.

Step-by-Step Guide to Designing InDesign Templates from the knowledgable crew over at Peachpit is a fabulous resource for those looking to work on creating templates for your own and others benefit.

InDesign: Benefits of Using Layers is a basic video tutorial from Fast Cash Design that can help you better understand the ‘whys’ of creating your projects in InDesign with layers.

Quick Tip: Using Nested Styles with InDesign is an interesting little tut from the VectorTuts crew that can help you step up the styling of your text in all of your InDesign projects.

Design a Cool Outlaw Flyer with InDesign is another fantastic tutorial that helps take some of the complexity out of this tool and adeptly guides you through putting together a flyer.

Using InDesign to Create a Designer Resume is another awesome tut by the VectorTuts team that will help you install the style and pizazz that your resume may currently be lacking within its borders.

Creating rounded corner boxes easily with InDesign scripts is another useful tutorial for beginners from the dedicated folks over at The Graphic Mac website.

Create a Grid Based Resume/CV Layout in InDesign is another tutorial from over at Blog Spoon Graphics that can help you to create a custom layout that you can fill and use as you like.

Templates

When it comes to help from the online community, templates are a big way that the online masses have worked to make this application that much more approachable. Not to mention the time they can shave off of a project by setting you up with the exact layout that you needed without having to build them yourself from scratch. So scan through them to see if there are any that can fit nicely into your InDesign arsenal.

If you are looking for templates for ID then you should start by going to InDesign Template. This is a new site whose entire mission is one of offering the masses a place to source out time saving templates.

Design Freebies InDesign Templates is a section of this go-to freebie source website that will assist you in filling your arsenal with loads of useful template goodness.

HP Creative Studio InDesign Templates is a collection of useful print design frameworks from the printing specialists at Hewlett Packard. With pages of layouts for you to choose from, expect to be busy for a while.

Presentation Folder Templates is one of the many templates that you might find in the Design Freebies archives, however in case you missed it, we wanted to highlight this addition to their ID layout collection.

Grid System Templates is a section of InDesign frameworks from the The Grid System team that can step your arsenal of templates up a notch for all of your future print design projects.

Stock Layouts InDesign Templates is another site with a section completely dedicated to delivering the design community helpful free templates.

InDesign Templates for Chinese and Japanese Text is an awesome set of useful and uniquely geared templates from the crew at Trans Pacific Digital.

The Papermill Store Brochure Templates is another set of InDesign templates that you might find to be just the missing brochure pieces from your arsenal.

Speaking of brochures, Brochure and Menu Templates are another set that we wanted to highlight from the Design Freebies site archives just in case you overlooked them.

Brand Aid! Branding Templates is a select set of three free templates from the Inkd team that are specifically geared towards setting up your business branding needs from a range of approaches.

Newsprint Templates is the last entry in our template section, and is a unique set that stands apart from most of the others that we have featured here today.

Scripts and Plugins

Speaking of saving time and making the program more accessible, we come to the final section of the toolbox building experience the InDesign scripts and plugins. If you want to get that much more out of your ID experience then just take your time pouring through the handful of resources we have collected for you below and start adding to your arsenal.

Plugins World is an awesome place to turn when you are looking to score a plethora of InDesign plugins to fill your toolbox to the proverbial brim.

InDesign’s Hidden Scripts is a great source for all the scripty goodness that your ID arsenal can hold. Just head over to the C2 crew’s site and dive right in.

InDescripts, or the InDesign Scripting Playground, is a site that is tightly focused on the scripting practices and plugin developments for Adobe InDesign. Definitely a site worth bookmarking.

Speaking of scripty goodness, InDesign Snippets is another must visit site to load up on a number of invaluable ID shortcuts not to mention helpful insights.

InDesign Plugins from the Power Exchange has pages of plugins for you to sort that with dozens of useful additions for print designers working in ID.

Place Auto Synchronizer is a free InDesign plugin from Rorohiko Workflow Resources that will allow you to create a text or image frame that updates automatically.

InDesign CS4: 10 Free Must-Have Plug-ins is a fantastic post from the Lynda team that has collected exactly what the titles implies. Even if there is one on the list that you do not have already, it is worth the time to stop by and grab it.

That’s a Wrap!

That finishes up this edition of the Adobe toolbox building venture. We hope that you have found some useful additions to your InDesign arsenal, not to mention a few tutorials that will help you take on this tool and wield it with more grace and skill. So where do you turn to now when you are looking to get your InDesign resource fix?

Related Posts

• Getting To Grips With InDesign Part 6: Importing Images: this is one part in a series that can prove beneficial for those looking to learn more about ID.
• The Ultimate Round-Up of Print Design Tutorials: is a collection of tutorials that can help take your InDesign projects up a notch.

(ik)

Do you feel that your front-end code isn’t quite up to enterprise standards? Want some good tips on how to take your HTML, CSS, and JavaScript to the next level? Go to Enterprise CSS, Enterprise HTML, and Enterprise JavaScript for loads of useful tips and best practices.

Note: To eliminate any risk of misunderstanding I think it’s best to add that this is a joke – most of the tips are actually anti-best practice. The sad thing is that the front-end code of many “enterprise-level� sites and content management systems really do look like many of these “tips� have been taken seriously.

Some of my favourite tips are these:

• Store your application’s state as a hash in a single hidden input on the page, because page-weight is not my problem
• Creating forms without the need for cumbersome label elements
• Bullet-proof rounded corners that work all the way down to Netscape 4.79
• Liberally using documentation to describe sections of content
• Every single tag gets an id or class, because how else would you style it?

Read full post

Posted in (X)HTML, CSS, JavaScript.

by Prakash Ghodke

A silhouette is the image of a person, an object or scene consisting of the outline as well as a featureless interior, with the silhouetted object usually being black. Many photographers use the technique of photographing people, objects or landscape elements against the light, to achieve an image in silhouette. In this post we’ve present some outstanding and high quality silhouette photographs to inspire you. Enjoy!

Silhouette Photography

Happiness

Cowgirl

Children of the Sun

Sweet September Sunset

Hanging

Sunset at Erg Chebbi

Silhoutte at Sea

Bike Silhouette

Dance Silhouette

Silhouette of Love

My Heart Will Go On

Sunset Buck

Sunset Fun

Jumping Silhouette

Sunset Love Silhouette

Luis and the Balloons

Single Exposure

First Row

Anberlin

Sandpiper

Pendiente de Luz

Enjoying the View

The Penultimate Sunset of 2007

Wave Digger

Power Silhouette

Running Silhouette

Silhouetted Sculler

Silhouette at Sunset

Silhouette Duett

Harp Silhouette

Cowboy & his Mount at Sunset

African Street Life

Archipelago

Ant Silhoutte

Hitchcock’s Sunset

Waiting

Fish Me the Sun

Horses on the Beach

Bikers

Taking Pictures at the Beach

Silhouette Seat

Bridge Silhouette

Walking with the Saints

Sunset

Afternoon Wright

The Mist of Time

Sunset Sea

Loch Shiel

Fear in the Tunnels II

Candlelight

(ik)

One of the main goals of having a website, whether it be a portfolio website or a business website, is to declare your presence on the Web. There are thousands upon thousands of websites out there; it’s pretty well established that you are competing for your audience’s interest and attention. To this end, it’s important to make those few seconds count when making a first impression.

There are many things happening in web design today. One of the interesting developments is the emergence of responsive web design, in which fluid grids, flexible images, and CSS media queries are used to create more adaptive layouts and hence more elegant user experiences. These designs can adapt to the browser’s viewport, completely changing the layout or the overall design of the page altogether, to fit the available space.

In responsive web design, as described in Ethan Marcotte’s article, fluid grids, flexible images, and CSS media queries are used to create more adaptive layouts and hence more elegant user experiences.

We also see a rising popularity of soft :hover and :active/:focus-effects, where buttons, navigation items and links feel more responsive and engaging as well. The transitions are smooth, and often subtly or vividly animated. Another important development is of course the rich web typography, made possible with the emergence of font embedding services. We have much more freedom for our typographic decisions which is an opportunity to create more diverse, unique and therefore memorable designs.

How To Design A Memorable Website?

• Make use of original and unique graphics. Having a large, punchy or slightly quirky graphic on your portfolio can help separate you from the competition.
• Feel free to experiment with non-traditional color combinations. Experiment with various contrasts to create tension, but put readability always first. Invite the users to feel engaged, but keep the page usable.
• Use original, compelling language to clearly emphasize your differences. Unfortunately, your visitors are likely to read only a small percentage of the text on your website. You can pack the most punch in that percentage by using confident opening statements, catchphrases or interesting summaries to pique the interest of your audience.
• Keep things organized. This might go without saying, but if visitors can’t navigate through your website or figure out who you are from the start, chances are they won’t stay around to see your amazing portfolio.

Let’s now take a look at some recent examples of striking, memorable designs.

Zinguh! Creativ

Modern Minimalism and Cool Green Accents

Zinguh Creativ features a large, bold slide show and a memorably detailed green leaf favicon. This is a nice example of a slide show spanning the width of the page; it’s both funky and neatly executed. Notice the high quality of product images throughout the site.

Green accents in the navigation, and in the favicon, are a unique touch, but could be improved for better readability

The green highlights for text are a bit harsh on the eye, a slightly darker green would probably work better. A minimalist arrangement of the images is a nice touch.

United Pixelworkers

Pixelly Images: A Visual Pun!

United Pixelworkers features a subtly pixellated, textured background as well as foreground images with blocky edges, creating a play on their name which is fun, cute and smart. The texture is so rich, and the information architecture so clean, that this website feels far more content-rich than it actually is.

United Pixelworks uses a static, left-aligned navigation bar

The left-aligned sliding navigation bar is an example of static navigation done right. It’s there, but it doesn’t get in the way of the content and isn’t too obnoxious or obvious. The select color palette and letterpress-style links at the bottom are a nice final touch.

Outback Creative Studio

Large Original Illustrations

Outback Creative Studio features innovative, large navigation buttons on the right side which is a fresh, colorful and inviting approach. The colors, the graphics and the blocky feel of the layout work together to create a bold and unique statement.

Outback Creative Studio has “night” and “day” themes, emphasized with a rooster graphic

The “night” and “day” button allows the user to switch between themes, a creative and unique presentation reinforced by the central rooster graphic. The graded orange and purple color scheme is rich and unusual, and lends the design a unique look and feel.

Mike Kus

Right-aligned, Interactive Logo

Mike Kus has an eye-catching interactive logo with a motto that displays on mouse-over. DEAD stands for “Dreaming Everyday About Design,” which stands out and is easy to remember. DEAD is featured in the favicon too, adding more places for users to see and absorb the tagline.

Interactive logo

The light background again leaves the emphasis on the work, which is strong enough to stand on its own. Punches of color and the use of images lead the eye down the page very well; notice how well each project’s description and related images are grouped, making the page flow very smoothly.

Wez Maynard

Right-aligned Graphic Mayhem

Wez Maynard uses offbeat graphics, creative layout and original content phrasing to make his website memorable. The design is completely right-aligned, which is quite unusual to see and feels truly novel. The ribbon sidebar on the left is interesting and unique, and the vintage graphics and blue, textured footer are fun and visually interesting. The quirky messaging is a great example of how to use language to create an impression. This is a nice example of an original, unique and interesting design.

Quirky graphics, and messaging to match

Epic Web Agency

Bookplate Graphics, Rainbow Textures and Grunge

Epic Web Agency lives up to its name with its portfolio website. With grungy textures, plenty of bold, contrasting color and Spartan-like helmets as themes in the graphics and images, this site is certainly “epic.” The loud typography and punches of orange add excitement. The colorful logo adds a bit of saturated color to the header. Notice how visual tension is created with a thick diagonal line on the home page. The website uses various background images across its second- and third-level pages, all related to the “epic” look.

Texture, color and type work together seamlessly

The artwork used here is all the more unusual because it’s in a much more traditional style, usually reserved for print media. Epic Agency uses plenty of graphics, and does so in a very original way, making for a very visually striking user experience.

Ryan O’Rourke Presents

Elegant, Dark, Responsive Layout

Rourkery.com features a vivid, majestic, theatrical theme which juxtaposes well with playful typography and colorful graphics. Using a distinct theme can be a good way to ensure that content, graphics and messaging work together in a focused way. The website’s centered logo and navbar are both unusually and elegantly done, aligned in the center and using a subtle navy pattern.

Theatre theme keeps content and graphics focused

Potential downsides to note are the leading of the text, as well as the visibility of the home page link, which is the logo in the center of the header. Notice how well orange is used as the main color across various design elements. The layout and images resolutions also nicely respond to changes in the browser window size, responsive design at its best.

Christina Ung Illustration

Bold, Unique Use of Typography

Christina Ung Illustration is all about the typography. The liberal use of bold and lighter font-weights, along with the mix of lowercase, uppercase, and mixed serif and sans-serif fonts, all work together to make the type as visually interesting as the use of graphics would be.

Bold typography logo

The clear, dark logo anchors the eye on the left-aligned navigation, which leaves plenty of room for the portfolio content occupying the main part of the page, to be the main focus. Large screenshots allow the content to be seen very easily without clicking through the actual blog posts. The pink highlights feel fun and fresh, but not overpowering.

Josh Sullivan

“Droll” is Memorable

JoshSullivan.me is a good example of how even a one-page website can pack a punch. The large header graphic is very unique and memorable, with its old-fashioned “nature book” feel. The background is an interesting mix of textures, colors, geometric shapes and historical-feeling images. While nothing is really clickable, this is just a calling card so nothing really needs to be; the social networking and email address links serve as the page’s call to action.

Interesting stew of background images

The color palette may look a little offbeat, in keeping with the graphics, but this all helps make the website as memorable as it is visually appealing. One small suggestion would be to make the links on the page a bit more prominent so that users don’t end up wandering. A stronger contrast between the text color and the background color would help. The main graphic is so central that it might be a bit overpowering for some, but this really does depend on who the audience is.

Jake Przespo

Fun Graphics and Clean Organization

The portfolio of Jake Przespo features another very creative central graphic. The “fun factor” goes a long way toward making a website memorable, and this is one that adds fun, very effectively. As users navigate through the website, the graphic flips around. The words in the red banner stand out, with subtle hover effects and woodcut detail.

Whimsical central image flips around as users navigate through

The minimal colors and splash of red keep the page a clean, minimal background for the front-and-center images. The readability of the content would certainly benefit from an increased font size, though.

Cooper Graphic Design

Large, Bold Header Graphic

The colors really draw the user into Cooper Graphic Design. The shades of brown, with texture and punches of turquoise, feel very bright and upbeat. The layout is clean and systematic, while the main, large center graphic contrasts with the more subtle background graphics in an interesting, attention-grabbing way. The top-level navigation is also very clear, making this an effective and visually appealing portfolio website. Also notice an interesting background image that lends the page more visual appeal. And don’t forget to resize the browser window, too.

Bold header graphic contrasts with subtler background

One small usability problem, however, might be the tabbed navigation at the bottom of the page. The use of tabs often signifies internal navigation, rather than external. In this case, these tabs seem to link out to external pages, which might confuse users a bit.

Brandon J. Schmidt Design & Photo

Watercolor Graphics

The watercolor graphics on Brandon J. Schmidt Design & Photo are very prominent and visually appealing, especially on the front page. The black, white and yellow color scheme feels minimal and modern, an interesting juxtaposition with the old-world feel of the watercolor.

Soft watercolor graphics

The logo graphic on the home page is faded into the background on the website’s second-level pages, keeping the website logo as the focus and leaving a lasting impression on users.

Water’s Edge Media

Minimal Design With Floral Illustrations

The simple, solid navigation structure and design of Water’s Edge Media stands out even without the illustrations, but the illustrations help make it more memorable. The logo, in particular, is very fresh and modern.

Fresh, modern color palette and pretty floral illustrations

The slide show of recent work is neat, but it could use some polish, especially the slider buttons. The left alignment adds a modern feel. Overall, however, a little more variance in font type and size would make the design just a bit more interesting.

Jordan Gray Creative

Minimal Design With Left-aligned Navigation

Jordan Gray Creative features seamless left-aligned navigation below a clean, minimal typography logo. This design is super-minimal, relying on the work in the slide show for content and appeal. Subtle details like the favicon and CSS spacing keep the design from seeming too simple.

Striking minimalism lets the work speak for itself

Eight Hour Day Design & Illustration

Bold and Colorful

Using the portfolio as the graphic element, Eight Hour Day Design & Illustration integrates a lot of color through relying only on the work. The select color palette of the page itself is crisp and bright. The type is clean and vivid. Although it’s simple, the hint of subtle patterning and shadowing at edge borders and between navigation menus effectively keeps things from looking flat.

Colorful elements are drawn directly from the Eight Hour Day portfolio

It’s Not My Type

A Typography Blog About Typography

It’s Not My Type makes good use of the richness of Web typography—with strong slab serif typography widely used across the various design elements, including the Web form, date and comment areas.

Fonts change as users navigate through the website

The scrolling content panel works pretty well here; the colors and subtle textures are clean, and add visual appeal.

McKinney

Simple But Elegant

McKinney features a minimal design with accent graphics that are not textures, but geometric shapes like lines, circlesand triangles. The red, gray and black palette is striking yet subtle.

Elegant touches through geometric accents

One thing that would be fun, is if the slide show controls were draggable. More hover effects would also give the page a more dynamic feel, making it more interactive and responsive (some elements do, however, respond when clicked on). The consistency of the layout and color choices of the website’s internal pages, also deserves a mention.

Shaping the Page

Playful Origami Animations

Shaping the Page uses a soothing, light and airy color palette as a backdrop for fun, whimsical, animated origami illustrations, which are a visual pun on its name.

Elephants, butterflies and more!

The lightly textured blue background and the wispy social networking graphics at the bottom of the page are downright charming. The portfolio page is nicely organized and right-aligned, which seems to work well with the playful, moving illustration on the left to visually balance the content.

Broken Pencils

Pencil Sketch Illustrations

Broken Pencils, Inc. has a prominent and visually striking logo. Although the navigation is split into bottom and top sections, it doesn’t look redundant since the top is more understated and the bottom uses different colors. The slow color transitions on hover effects on the “Services” page are a nice surprise as well. All of the graphics are simple and modern. The most striking part of the design, however, is the pencil sketch illustrations, in keeping with the “pencil” theme.

Pencil sketch illustrations echo the website theme and company branding

Who is Leon

Fun With Interaction!

The background animation of Who is Leon might be the first thing the user notices. The static background and scrolling content, combined with the slightly blurred photography, work together to create a sense of motion and excitement. Users might feel invited to click around, and many elements on the page are, in fact, interactive.

Hover, click and move!

The grayed out portfolio screenshots turn to color on hover. Against plain flat background this really makes the screenshots pop, and along with the prominent buttons, invites visitors to take action. The website also involves the use of several fonts, which add to the overall striking effect of the design.

David Paul Seymour

A Monster!

The portfolio of David Paul Seymour is a very fun, colorful, illustration-based website. The illustrations take up most of the page, making them the main focus as well as a design statement. The cloud illustrations for the navigation are fun and makes users want to click around. In contrast to the previous website, none of these illustrations are interactive. This feels a little bit like a missed opportunity, as some hover effects or small animations would really go a long way toward adding to the playful feel of this website.

Color and whimsy make this page stand out

One other thing that stood out was the lack of a favicon. The addition of a favicon (most especially on such a graphically rich website) is a really quick and easy way to enhance brand recognition, and to add a more polished, complete feel.

Creativepayne

Bold, Unique Graphics

Creativepayne is a bit tongue-in-cheek, graphically speaking. The old-world art mixes with a variety of other styles; there is a lot going on in this design. The color palette is a subdued mix of browns and tans.

Bold, unique graphics and mix of styles

The call to action, “ESTIMATES get yours TODAY,” does get a bit lost in the top right corner; overall, if some of the other design elements had slightly bolder fonts, they might balance out the main, large graphic a little more.

Chicago Interhoods

Interactive Map

Chicago Interhoods is an example of a great marriage of design and information. The orange, cream and blue color palette is striking and fun. With a prominent, central logo and clearly organized top-level navigation, this design is a clean and effective backdrop for the interactive map. The map itself is a nice visual way to browse for information.

Beautifully interactive design aids browsing for information

AdPacks.com Classy Sites & Classy Ads

Vintage Graphics and Type

AdPacks Classy Sites & Classy Ads features a fun, vintage feel in the graphics, fonts and textures. The visual interest created by this mix, invites and engages users to interact the website elements.

Fun, vintage graphics and type

The visual representation of the products makes it easy for potential buyers to see and understand what the products are, while the calls to action are clearly laid out in the buttons for each section, making this a complete, well-laid out product landing page.

Min Tran’s Journal

Beautiful Typography and Unusual Textures

Min Tran’s Journal features a ribbon navigation that is sophisticated and tidy. The soft colors work together nicely; the playful typography looks informal and engaging, and also works nicely with the graphics and overall feel. The two-column layout features columns of equal width, conveying a clean, well-organized and fresh impression that is unique at the same time.

Camera graphic, centered two-column layout

Solid Pink Studios

Big, Bold, Diagonal

Solid Pink Studios takes the pink theme its name suggests, but takes it in a completely unexpected direction; the grumpy rock monster looks like he means business.

The solid pink rock monster is a fun, memorable element

The diagonally-aligned text works best at a fixed width, and could present some display difficulties to users with a small screen; on smaller screen resolutions, the blog link is cut off to the point of nearly being hidden. Overall, the diagonal text alignment is is a fun and memorable way to present content and is very in keeping with the rest of the design. One final note: this is nit-picky, but it does feel a bit odd that the favicon for Solid Pink is green, not pink.

Summary

When creating a memorable website, make sure to pay special attention to the treatment of your design elements. Risk something unusual and creative. A clean, well-structured backdrop for fanciful graphics, creative animations and bold typography can all make the design stand out even more. The more personal and creative you appear, the better your chances of being remembered and selected for your next project.

Related Posts

• 50 Beautiful And Creative Portfolio Designs
• 40 Creative Design Layouts: Getting Out Of The Box
• Best Practices For Effective Design Of “About meâ€�-Pages
• The Current State of Web Design: Trends 2010

(wcp)

© Sarah & Adrienne Kahn for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: Inspiration, showcases