But with so many tools, resources, and style inspirations available online, designers often suffer from an excess of options. So, how should you begin narrowing them down? Start by diving into this discussion comparing two prominent design styles: abstract or realistic.

Photography vs. Illustration as Graphic Elements

When it comes to the question of photography or illustration, there are points to be made for each, from both marketing and artistic perspectives. In fact, the equally compelling nature of both art forms has led to a rise in photo-illustration, such as in this Nike campaign. The style combines both elements, and therefore provides a sense of complexity and novelty—but that doesn’t mean that either of the distinct styles don’t have plenty to offer still.

Photography

Photography has an essentially compelling feature: that the eye is always drawn to it. And this innate attraction increases the more realistic a photo gets. For example, it’s almost impossible not to be grabbed by a website that displays a full-page photographic background of another person, like DealPult. This is because the image appears almost life-sized, and therefore extraordinarily real.

But sometimes attention-seeking imagery isn’t the objective of the design; in these cases, the text needs to take precedence. Softer photographic images like the background on GoToChina’s site can be used to accomplish this.

Illustration

On the other hand, illustration has the advantage of being able to defy reality in ways that even the most processed photography cannot do. And, you can manipulate and create an illustration to fit specific specifications, which might not be realistically attained through photography. Illustration can convey certain concepts more clearly than photography: Simple as Milk shows how a whimsical and approachable look is effortlessly achieved through its vector representations, while complicated diagrams can also be conveniently simplified.

On the other hand, illustrations don’t give that immediate sense of depth and purpose that a good photograph accomplishes so effortlessly. More specific applications for each can be explored in this guide to comparing photos and illustrations.

Technical vs. Voice-Filled Content

There are many strong opinions whether a concise and clear or fun and witty style of writing is most appealing to a broad reader base. Of course, niche sites position themselves firmly in one category or the other, but which is the most successful across a larger demographic?

Technical Writing

Sites like Bullitt choose to use a measured and professional tone in their copy to inspire a sense of a trustworthiness and reputability. It might be assumed that sites with a sophisticated writing style like this are aiming to appeal to an older audience. However, on looking at comparable sites, it seems that the subject is more important than the audience: a topic that seems as if it should be handled seriously works well no matter who the audience is.

Writing with a Voice

At the opposite end of the spectrum, KickPoint employs a cheeky, down-to-earth writing style. The statement it makes in its ‘About’ page is certainly more attention-grabbing than its counterpoint example, but there’s also the possibility that it’s too boldly individualistic to appeal to a majority of their audience. A writing style with lots of personality takes a bigger risk, but it also might reap bigger rewards.

Flat and Minimal Style vs Textured, Skeuomorphic Style

For this assessment in particular, it’s important to take a step back and evaluate trends for what they are; fleeting and fickle, and only fully evaluated and solidified with time. Because flat style is so on-trend at the moment, it’s tempting to say it’s the better style. But skeuomorphism has its strong points too, and both should be evaluated with their long-term benefits in mind.

Flat Style

There’s a lot to be said for the dynamism and unexpectedness of a truly flat and minimalist design. Awkward’s homepage is the epitome of the look; its utterly monochromatic simplicity is striking because it is so sparing; with only four elements centered on a white page, each piece carries a sense of importance. At least for now, flat designs like this are a good choice for the types of sites that can afford to use it, because the style is so dramatically different from the majority.

Skeuomorphic Style

Although hyper-realistic site designs have experienced quite a backlash lately (leading directly to the flat style that is currently in vogue) East African Bakery shows us that there is still an undeniable place for skeuomorphism in web design. For something tactile and elemental, like baking, the layering of natural textures is a fitting choice that in no way interferes with an understanding of the functionality of the site. However, it’s equally true that a more esoteric service like the previous example is better served by its rigorous simplicity.

After looking at all these examples, it seems that even a simple question like this, unfortunately, doesn’t have as simple of an answer. But it can be distilled down to a fairly basic observation: the topic and objective of the site are the determining factors for whether an abstract or realistic approach is the most fitting. There are equally convincing arguments for both sides of the equation, and decisions should be made according to which style most fits with your overall objectives.

The post Abstract or Realistic – Which Web Design Style Do You Use? appeared first on Speckyboy Design Magazine.

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.

The post Designing a Website Around Your Products appeared first on Speckyboy Design Magazine.

Today I would like to share with you some web-based apps, that I have found to be very useful for keeping in touch with clients and some that allow me to keep a consistent workflow.

Cloud Computing

Fortunately, the emergence of cloud computing has opened up a lot of opportunities for designers. It’s no longer necessary to overload your personal computer with large software packages and files, and back them up on several external hard drives just in case of possible crashes. The cloud enables you to store, back up and share files and programs on the web, which you can access from anywhere. It’s a revolutionary way of doing your work, and immediately streamlines your workflow.

There are cloud apps specialized for virtually every aspect of designing, so here is a quick guide on useful web-based apps to get you started if you’re thinking about taking the freelance plunge:

For Client Collaboration

Dropbox: More or less a household name at this point, this is a free service that allots you 2GB of storage upon sign-up. It’s designed for any web user, which means that your clients will be able to easily use it to see any files you wish to share with them. It’s also a secure app for your own storage. For those who need more space, they do have many options to pay for increased storage.

Sugarsync: This is another comprehensive storage system that offers file and folder sharing. It is compatible with most devices, so is a great option for your clients to use with you.

Evernote: Not only can Evernote act as your own digital scrapbook to store research, inspiration and ideas, it’s a great app to take notes when meeting with clients. You don’t have to deal with lugging around a notebook and remembering where you put your notes; you can locate them any time and from any device after your meetings or collaborations.

Dealing with clients can be difficult to navigate at times for reasons other than technical ones, so here is a collaboration guide for more in-depth help for those with less experience with remote work.

Encouraging Team Effort

Basecamp: This is one of the most popular project management apps. It’s ideal for designers, because it tracks projects from start to finish, and is designed for teams to work together remotely. It stores and organizes all files, documents, discussion feeds and feedback all in one place, which makes it extremely easy to track what team members are doing, as well as the project as a whole.

Draftboard: Another great collaboration tool, this streamlines all communication and feedback on project mockups. Perfect for the remote designer, you can update your progress and receive feedback from other designers or clients in one fell swoop, without having to meet face to face.

Remote Coding

Codeanywhere: When inspiration hits when you’re on the go, use this browser-based coding tool, which allows you to draft web layouts on any mobile device. It has Dropbox integration, as well as mobile apps for all types of Smartphones.

CSSDesk: Design a creative website with this full-featured interface. It allows you to develop designs that are supported across all major desktop and mobile browsers.

Helpful Software

Adobe Creative Cloud: As a designer, this is an especially exciting cloud app for you. You’ve probably become accustomed to buying expensive software packages that take up ahefty chunk of your hard drive space, and then spending more to upgrade to the latest version. Well, not anymore! Adobe now offers access to its latest products with a membership. Instead of installing programs on your own computer, you can use them on any device, as well as enjoy exclusive membership features.

Printing

Google Cloud Print: Connect your printer to the web and print a document or image from any application or device. You can share printers with anyone you choose from your Google account for a more concrete version of Google Docs.

Typography and Color Guides

TypeCast: This aewsome tool lets you design and experiment, all in the browser, with web fonts and real content. You can try the most popular web fonts all in one place, including all weights and compare font combinations and build type systems very quickly.

Adobe Color: Another excellent tool for doing tests, this app is for creating color themes and palettes, which can then be exported to any CS5 program. You can also import photos to create color palettes based on their prominent colors.

Experimenting with different apps will allow you to decide what works best for you to make your remote design efforts a success.

The post The Remote Designer – Jumping into the Cloud appeared first on Speckyboy Design Magazine.

5. Dropbox

The cloud may be all over the place now, but it wasn’t when Dropbox first arrived on the market. That’s why when you load the Dropbox page, you get not just a deeper look into the site, but an engaging video that clearly covers questions that many people have about cloud storage, and why Dropbox is the solution. The video manages to be educational without ever slipping into condescension, and uses anecdotes as an effective tool. On a visual level, the clean, white look is both contemporary and professional. The only thing I would change is perhaps adding a tag line somewhere for more information, and making that call to action, “Watch a video,” a little more interesting or product-specific.

4. Animoto

On the other end of the spectrum is the landing video for Animoto. This video is all about emotional connection and creating a human experience that helps consumers connect with the family on camera. That said, I’d like to see a little more value propositioning. I like that they have three columns with copy promising other features, like a referral program, mobile apps, and the ability to sell more, but I don’t have a clear sense from the movie of what the product actually is and how it’s different from other programs, like iMovie.

3. Intuit

Intuit’s landing video is another great example of a video that clearly explains the product through an engaging story. It’s easy to see how the product might benefit the consumer, and we’re rooting for the likable protagonists the whole time. The only problem here is that the video is tiny, and there’s no way to expand it. Unlike the Dropbox video, which works well as both a video and as an interesting image that draws visitors in, my eye only falls on the video as a secondary feature.

2. UPS

Most businesses know there’s no better way to build trust than by having someone a customer knows or admires recommend their product. But that’s hard for big businesses to do on an individual level, which is where social proof comes in. By showing that they have a special relationship with Zappos, a wildly popular and trusted business, UPS’s credibility and cool factor skyrocket. After all, if UPS can help Zappos achieve their 75% repeat customer rate, won’t they do the same for you?

The only issues with this video have to do with focusing the viewer’s attention, the background, while visually interesting as a landing page, is distracting while we’re watching the video. That’s easily fixed by dimming the background when the user loads the video.

1. Dollar Shave Club

If you haven’t seen the Dollar Shave Club video, you’re way behind the six million plus people who have viewed it before you. Dollar Shave Club has become a textbook example of all that a good landing video can be. It demonstrates value by breaking all the rules, mocking its competitors, being borderline un-PC, swearing – you name it. That gives this video a little thing called voice — pretty much the only thing that could make a company stand out in such a crowded market. Does anyone really need Dollar Shave Club? Probably not. But the hilarity of this video has helped convince a wide male audience to give it a whirl, just for the cool factor.

How To Make Your Own Awesome Landing Page

Meet Your Audience Where They are
If you’re creating a landing page, you need to know exactly who your audience is; are you marketing to a field full of novices who have never before seen the likes of a product like yours, or are you marketing to industry experts who will feel condescended to with elementary explanations? Knowing your audience will frame every aspect of your approach. That means knowing where they are emotionally, too. For example, new business owners like the ones featured in the Intuit video aren’t just looking for a payment system; they’re looking for tools and services that say, “Hey, we know you’re busy. We believe in you and we’ve got your covered.” It’s important to know not just what your customers say they want, but what they really need deep down.

Make It Visually Engaging
There’s no point in spending time and money on a landing video if it’s just going to be a few experts dulling up the screen. If you’re on a budget, use stock footage or stock photos to help illustrate complex processes or just to spice the video up. Remember that the landing video is a part of an entire landing page, so make that opening still shot engaging and well-integrated into the site design, while still popping off the page.

Explain Your Product and Service Thoroughly
This should go without saying, but by the end of the video, your viewer should have a clear sense of what your product is and how it applies to them. There’s nothing more frustrating than wasting three minutes watching a video and still having no idea what’s on offer, even more so when there’s no supporting copy, or you have to sign up to learn more.

Have a Voice
If you take one lesson from Dollar Shave Club, it’s that the best landing videos have a clear perspective and voice. This is all the better for younger companies where that sassy, Internet humor is embedded in their DNA, but it’s just as important for more traditional b2b companies as they establish their expertise. The more distinctive your voice, the more you’ll stand out from competitors, the more business you’ll get.

Landing videos are fast becoming an essential part of any good landing page. No matter what your business or industry, getting creative and demonstrating your value in this format is key. So, get brainstorming, and get filming!

The post 5 Sites with Killer Landing Videos appeared first on Speckyboy Design Magazine.