Web Design

Designing a Website Around Your Products

Posted on October 15, 2013 at 3:56 pm

Branded website design is ultimately centered around two things: product and audience. Meaning, the site’s design needs to effectively showcase products in a way that will resonate with the target audience. Once a designer identifies where a brand’s product and audience meet, the visual problem-solving process becomes streamlined and simplified, and the site’s design becomes clear, focused, and targeted.

Below we take a look at a handful of sites that effectively showcase their products through the overall design.

Expressive Visual Elements in Men’s and Women’s Fashion Sites

The world of fashion websites is a great place to start in this discussion, because the industry is intrinsically linked with creativity and expressiveness. In other words, unlike some other types of ecommerce sites, the design can be more abstract and loosely associated with the products. As you can see from any number of fashion illustrations or collages, supplementary visual elements are not only a welcome addition, but often an essential component of many fashion sites.

Women’s Fashion

For example, Free People is a retailer that specializes in bohemian, feminine clothing and accessories. So a simple or minimalist design would hardly be expressive of the right atmosphere, no matter how beautifully their products are photographed. Instead, the site hits just the right note on its homepage by using an atmospheric and evocative style of photography that is more about an idealization of the target audience’s lifestyle than it is about featuring specific pieces of clothing. Handwritten typography and floral illustrative elements top off the look, adding both depth and texture to the design.

Men’s Fashion

In comparison to the previous example, Narwhal Co. has a fairly straightforward website design that features their merchandise more prominently. This makes sense; as a purveyor of “distinct accessories made from recycled ties,” their unique products are more in need of an immediate explanation than the average fashion site. But the combination of a subtle background pattern, iconography in the navigation panel, and rounded typefaces help to create a sense of friendly, playful style that doesn’t take itself too seriously.

Edible Products: High-End Versus Casual Design

Depending on the target market, webstores with an edible inventory can span the visual range between practicality and simplicity (for an audience looking for quality ingredients at good prices) and luxurious opulence (for a customer looking to indulge). This makes for an intriguing diversity in sites with similar products but completely different goals. A good example can be found in the comparison between tea and fine wine stores; while they both lie in the category of life’s little luxuries, tea is more of an everyday, simple, and cozy drink, while wine culture is more exclusive and high-end.

Tea

Argo Tea’s everyday simplicity is perfectly reflected in its light, bright, and clean aesthetic. This site expresses its friendly, straightforward brand through its warm and colorful palette, clean imagery, and simple type. The only decorative element to be found on the homepage is the vector bubble effect rising above the navigation bar, which helps to add a touch more of the whimsical approachability the site is going for.

Wine

Stag’s Leap Winery has quite a different visual philosophy, which presents a strong contrast to Argo Tea. The muted color palette, elegant script typeface, and quiet simplicity of its homepage make it clear this brand is positioning itself as a more luxurious label. These elements come to a peak in the traditional and intricate logomark, which adds just the right touch of historical authenticity to a company that is hoping to evoke a sense of timeless quality.

Divergent Brand Positioning Between Two Audio Webstores

There are also often significant differences even between sites that sell the same type of product. The target audience can and often does vary widely within a specific market niche, and stores need to cater to these different types of customers.

The two sites discussed below give very different impressions on a glance, but they’re actually more similar than the previous examples. A little more time spent on each shows that both have a sleek, simple navigation, organization, and typography. A few more commonalities between sites makes sense when the product is the same; both are selling technological devices, so it’s crucial that they offer as streamlined a user experience as possible, no matter who their audience is.

Crafted Minimalism

The light, sans-serif typeface, quiet color scheme, and crisp photography used on BeoPlay all give customers a sense of neutral elegance. These elements are combined with a complex and varied navigation style that keeps the site from feeling stale as you move through it.

Edgy Modernism

Instead of going after the same refined crowd that BeoPlay appeals to, SkullCandy uses its design to appeal to a younger, edgier audience. The dark background color and contrastingly bright imagery and effect-laden text offer a different visual experience from the previous example, but the transitions are similarly flashy and well-executed.

When comparing the design styles of various online stores, it becomes quite clear that the combination of product and audience is an essential component of web design; in fact, if you narrow down your target audience as successfully as these examples, your design decisions will, in many cases, almost be made for you.

You might also like…

Posted in Web Design

Considerations Before Creating Website

Posted on October 15, 2013 at 12:21 pm

Creating a website can be a daunting task, especially if you haven’t taken time to think about your final result in great detail.

If you’re a new business, it’s important to know your brand identity, and stick to a theme, perhaps the colours within your logo. Your brand identity aims to make you instantly recognisable, so it must show accurately on your website.

If your website is an ecommerce site, the emphasis must be on the products, so a straightforward design is a good option. Knowing which pages you need are also important, because it can allow you to determine the pages that should match, and determine the pages that should differentiate themselves.

Target audience is another important consideration, and by thinking in great detail about the types of people purchasing your products and services, you’ll begin to understand how your website should be laid out, and what details must be included.

Content is important, and it must be regular, but too much content can make a website busy, and less is definitely better in grabbing an individual’s attention.

Finally think about the devices people now use to view products and services, many people use mobile phones, perhaps more than they do on a laptop r computer. So content must be easy to read on a range of devices, and making sure your website is mobile friendly is important. A responsive design could work, but only for websites that are not too complex.

Posted in Web Design

The Best Freebies for Designers (July 2013)

Posted on October 12, 2013 at 3:56 pm

Here are the best freebies for designers from last month (July 2013). We have free GUI templates, icon sets, fonts, Photoshop brushes, PSD templates, textures… and everything else inbetween.

Here they are:

Icon Sets

Coucou Icons (PSD, AI, EPS, & PNG)

Coucou Icons PSD, AI, EPS, & PNG - Freebies for designers

Download Page

Posted in Web Design

Weekly Web & Mobile Creativity n.25

Posted on October 8, 2013 at 3:56 pm

It is that time of the week again, a chance for you to sit back and enjoy some of our favorite web and mobile designs from this past week.

Fontwalk - Weekly Web Creativity

Fontwalk

Posted in Web Design

We have 10 WordPress themes of your choice to giveaway from ThemeFuse – Comment to enter!

Posted on October 6, 2013 at 3:56 pm

For this weeks giveaway we have 10 WordPress themes of your choice to giveaway from ThemeFuse, one of the most popular suppliers of premium WordPress themes.

To enter this competition all you have to do is comment on this post and tell us how you’d like to use your free theme.

ThemeFuse Homepage

About ThemeFuse

When it comes to the world of WordPress themes, ThemeFuse is at the top of the list as one of the most premier providers. With so many options, you are sure to find a WordPress theme that will meet your needs. Style and design come together fluidly in their themes, with all beautifully designed and coded, and offering unique features and options from which you can choose from ensuring you get everything you need.

The samples below are just some of the themes ThemeFuse offers:

PixelWhiz – Designer WordPress Theme

If you are looking for a graphically stimulating design and need a creative approach, this theme is perfect for your needs.

Designer WordPress Theme

Conexus – Responsive WordPress Theme

A multi-purpose WordPress theme that can fit perfectly for various business industries or more laid back creative shops.

Responsive WordPress Theme

Metro Vibes – Metro WordPress Theme

A modern and responsive metro-style WordPress theme that is perfect for a creative agency or a portfolio showcase website.

Metro WordPress Theme

The Muse – Inspiration WordPress Theme

A minimalist inspiration WordPress theme for anyone that wants to start a blog and believes that content is king.

Inspiration WordPress Theme

Voyage – Travel WordPress Theme

Videos, photos, and other media can be added to a portfolio or personal blog that even links to your iPhone.

Travel WordPress Theme

MobilityApp – Mobile WordPress Theme

Smartphone application creators can also use WordPress themes. There are themes that promote mobile application downloads iPhone, iPad, and Android devices.

Mobile WordPress Theme

Click here to view more themes from ThemeFuse: ThemeFuse WordPress Themes.

How to enter the competition:

All you have to do to enter is leave a short comment below telling us how you’d use your ThemeFuse theme.

This competition will run for the next seven days, ending on the 8th of August 2013. All winners will be chosen at random and will be informed via email within 2 days of the competition ending.

Just to show some love, you could also Like ThemeFuse on Facebook.

All the best!

Posted in Web Design

PixelKit Giveaway: Winners Announced

Posted on October 4, 2013 at 3:56 pm

Last weeks PixelKit Giveaway has ended and it is time to announce the winners. Here they are:

Congratulations to our winners. PixelKit will be in touch with you over the next few days with your prize.

Name: Chev
URL: Comment URL

Name: Almone
URL: Comment URL

Name: Nimsrules
URL: Comment URL

Name: Crazyhunk
URL: Comment URL

Name: Kieran
URL: Comment URL

Name: Yad Faeq
URL: Comment URL

Name: Robert
URL: Comment URL

Name: Joan
URL: Comment URL

Name: Jean
URL: Comment URL

Name: Drift
URL: Comment URL

Pixelkit

PixelKit is a UI kit and design resource subscription site (only $39 for a full year!) that makes it much easier to finish jobs faster, with a more professional, clean and crisp look. Thus saving you all of that wasted time searching for that perfect UI kit. They also recognize that designers constantly need access to new stuff, so, they are committed to adding new GUI kits, icon sets, premium graphic packs and everything else on a regular basis.

Posted in Web Design

Deal of the Week: 8 Downloadable Web Design Courses – 90% off!

Posted on October 2, 2013 at 3:56 pm

You are about to get schooled! That’s right, with this educational Mighty Deal, you’ll get all the learning with none of the bullying! No pop quizzes either. Just a great education on how to become a fantastic Web Designer.

Train Simple’s downloadable video courses let you learn at your own pace from the comfort of your own home. You don’t have to be a genius to realize that saving 90% on a collection of 8, yes 8, video courses is one darn good deal!

Impress your friends! Make your mother proud! Be the master of your own website domain!

With these 8 Train Simple courses, you’ll get the lowdown on everything you need to know to become a successful Web Designer! These are some of Train Simple’s most popular courses all geared towards giving you a solid foundation in HTML, CSS, JavaScript, Responsive Web Design and Converting your Photoshop files into HTML!

Courses Include:

  • HTML5 Fundamentals
  • HTML5 Structure and Semantics
  • CSS3 Fundamentals
  • CSS3 Box Model
  • CSS3 Typography
  • CSS3 Layouts
  • JavaScript Fundamentals
  • Photoshop PSD to HTML

All 8 videos are available for download, so you can watch them online, offline or wherever your travels take you! They’re yours to keep for as long as you want them. No pesky expiration dates to stress you out! So go ahead and learn at your own pace, anytime, anywhere.

About the Courses:

1. HTML5 Fundamentals

You can’t build a house without a frame, and you can’t build a website without HTML. No matter how far you want to go with your development, the core of any good site or Web application rests with HTML5 fundamentals.

Use Dreamweaver? No problem. Prefer going old-school and just like coding in Notepad? That’s fine too. However you prefer to write your HTML5 will work, as long as you follow the lessons. It’s not important what program you use to write your code; it is important how you write it. Follow the most up-to-date standards and before you know it, you’ll:

  • Create headings
  • Put lists together
  • Display tables
  • Add plug-in content (i.e. Flash) to your pages
  • Learn what Not to do as well

2. HTML5 Structure and Semantics

Maybe you already know HTML. Maybe you’ve never touched the stuff. Either way, HTML5 takes plain ol’ HTML to the umpteenth level. It offers some incredible features like native support for video and interactivity. Besides learning how to better use HTML5 to create much more meaningful and interesting Web pages, you’ll also learn how to properly structure the HTML on a page. HTML5 just loves a logical semantic based approach, and that’s exactly what you’ll digest from this lesson.

3. CSS3 Fundamentals

If HTML is the structure/frame of your house, then the CSS is the design. Cascading Style Sheets control the actual look and feel of your website. It’s a way to house all of your font styles and colors, background color, image borders, etc. This course will give you a solid understanding of CSS3 and how to deal with everythign from conflicting styles to inheritance within your code.

4. CSS3 Box Model

This lesson’s all about learning how to box. Put the gloves away for now, and save the uppercuts for another day. These boxes refer to the box model of CSS, where rectangular boxes are generated for elements on your web pages. You’ll need to know the ins and outs of how these boxes affect the elements on the page, as well as how they work with your backgrounds in terms of colors and images. And if you’ve still got some space compartmentalized in that head of yours, you’ll get the skinny on the 5 main properties of the box model. they’ll totally knock you out.

5. CSS3 Typography

CSS3 can’t exactly put words in your mouth, but it can make you a “word artist” if you learn how to master the right properties. After absorbing this lesson, you and CSS3 will be best buds in terms of modifying basic text, and even integrating the zillions of available Web fonts by using the @font-face declaration.

6. CSS3 Layouts

If you’re still grooving to our “house construction” metaphor, then you’ll like this one. You can become an architect with CSS3 ultimately being the blueprints to your website. Get through this lesson and basic page layout like floats and postioning will be yours to command. CSS3 Layouts gives you control over where to stick your content so it stays in the proper place on your browser.

7. JavaScript Fundamentals

Despite what some may think, JavaScript has nothing to do with creating a coffee compound. Sorry. But it can be used to create some really cool features and functionality on your site. A widely used programming language for the Web, this tutorial will give you a great basic knowledge of JavaScript including its syntax, declaring variables, writing functions and looping statements. Watch your Web design skills take a giant leap forward by soaking up this additional language.

8. Photoshop PSD to HTML

If you want to learn how to convert a design from an Adobe Photoshop file, into an HTML/CSS document, then this course is for you. This step-by-step course explains everything you need to know to get started. You should already be familiar with basic concepts of HTML & CSS. This course takes you through the process of converting a layout in Photoshop into a working HTML/CSS file that works consistently across all major web browsers.

Think you’ve got what it takes to pass these classes and graduate with honors? Lucky for you, there aren’t any grades, nor is attendance ever taken. Learn and relearn each lesson as many times as you need until you’ve mastered that element of Web Design. Before you know it, you’ll be moving on to create your own fully functional websites!

So what’s it cost?

Would you pay $1,000 for all 8 courses?

How about $750?

Well, this collection of 8 popular Train Simple video tutorials normally sells for $499. Consider us your Student Aid department. We’ll slice that price right down to something you won’t be able to refuse.

Not $400. Not even $250. Even $100 is too much!

No, for a limited time only, you can get all 8 videos for just $47!

Yes, $47!!! That’s a 90% savings off the regular price!

Click that big BUY now button and get started on furthering your education today!

Posted in Web Design