Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 18 2013

14:59

A Little Journey Through (Small And Big) E-Commerce Websites


  

People don’t spend their money online easily. Think about it: If you had to answer a long list of questions or struggle to navigate a website, how much money would you be willing to part with? Online shopping is about convenience and comfort, and those of us who have at least once ventured into the realm of online shopping know how time-consuming and unpleasant it can be.

The online stores that stand out from the rest are those that go the extra mile for their users. We’ll look here at some small and big e-commerce websites that create pleasant online shopping experiences. We’ll consider the experience from the very start to the very end, right through to the checkout process.

Interesting E-Commerce Websites

Bonobos
Bonobos’ shopping experience is smooth. Good typography and subtle colors help focus on the products and features, with all distractions fading away as you interact with the site. When a new item is added to the cart, it appears in a sliding sidebar on the right, prompting customers to either keep shopping or check out. The design of the checkout form is elegant and clean. The amount of data required is never overwhelming since it’s clearly separated in manageable chunks. And the most important bit: the favicon is a bananas icon! Now that is pretty cool.

bonobos-opt

Martina Sperl
Martina Sperl’s website is a lovely website. The shop features polished photography of her products, with a simple navigation panel fixed on the right side of the page. The hover effect is simple yet bold, showing the item number and price boldly in a large sans-serif typeface. You can, of course, click an image to view details about the product and get a 3-D view of the furniture (just a series of images). Buying a piece of furniture requires you to order by email. Again, bold full-width product images are used on product pages, and you can click on the “heart” icon to express your love for a product. Powered by WordPress.

Martinasperl

Evyi
Putting the shopping cart on the left, with the navigation, is a great idea. Because the eye starts from the top left of the page, the shopping cart takes precedence, making it more natural for users to keep track of the items in their cart and the running total.

Evyi

Banana Cafe
Banana Cafe is crazy. The 3-D hover effects of the site are consistent across the entire shopping experience. The blocks rotate in different directions, creating interesting movement throughout the website. It isn’t your ordinary online shop, but rather a collection of suggestions for your closet. The hover effects reveal a reference number that you would use in the contact form at the bottom of the page. Well, the audio and video in the background aren’t really necessary, but they do complement the unique experience on the site quite well.

Banana Cafe

MadeForFun
Well, this online shop could be made for fun, but fun was probably not the only reason to set it up. The experience on the site is, however, quite snappy indeed. You can quickly customize each product with features displayed using an accordion pattern. The shopping cart preview is visual, almost infographic-alike, rather than filled with quick-paced text. In fact, the shop even has rainbow-alike horizontal lines which still fit quite well into the design.

madeforfunmadesimo-opt

Indigo
Indigo’s shopping experience isn’t particularly extraordinary, but it’s a great example of how shops with a relatively large inventory can have a quite nice user experience. The number of navigation options on Indigo is quite overwhelming, especially the navigation in the sidebar looks a bit too complex, yet what’s interesting is the bar at the bottom of each product page. As you add an item to cart, the item is visually added to the shopping cart in the bar. Quite interesting is the fact that Indigo provides a discount for customers who are willing to invest some time into creating an account on the page. Clever.

joyandwonder-opt

Walmart
Walmart’s recent responsive redesign must have been quite an undertaking. The main navigation has been hidden behind the “Shop All Departments” button that triggers the off-canvas navigation on the side. The items are well-organized, the interface elements and the typography provide a clutter-free overview. The reviews of each item can be rated as being helpful or not quite helpful. As an item is added to the cart, a lightbox appears prompting customers to proceed to the check out or continue shopping. The checkout is well-designed across resolutions, and you see only what is actually helpful for finishing the checkout. Good information architecture, good layout, good redesign.

walmart-opt

Appliances Online
Although the overview of items per category is quite overwhelming on ao.com, the shopping and checkout experience is very pleasant indeed. On product pages, customers can compare the feature of recently viewed items next to each other in a table while many products have an embedded video review. The checkout provides a variety of options but it’s easy to follow the steps to end up with just what you need when you need it.

applicances-online-

Moomin
Sometimes you really don’t need to reinvent the shopping experience: it’s perfectly enough to provide a consistent visual style that guides the customers through the checkout. The typography, the shopping back icon, the way price tags are presented and the checkout itself fit well within the branding of the Moomin brand. Since there aren’t many products in the shop, each items is prominently highlighted; the breadcrumbs help the customer see where they are on the page at any given moment. Nice personal design that conveys an intimate atmosphere.

moomin-opt

GoMacro
If you are looking for a… different online shopping experience, GoMacro is an option worth checking out. Instead of having a simple grid overview of items, all items are grouped into colored item circles. The experience of adding items to the cart is very unique as you literally place bars into a cart. The checkout is also well-designed and quite simple to follow through although main navigation (“Back” and “Next Step”) are somehow hidden beyond the actual checkout lightbox. A unique design can work well as well, and GoMacro shows how it can be done.

gomacro-opt

Lost My Name
Alright, this isn’t really an online shop, but the checkout design is quite lovely. The design applies a soft touch of the visual design of the brand to the Web forms creating a pleasant overall experience. Probably the best adjective to describe the design is “friendly”. So is the experience of the checkout.

lostmyname-opt

lostmyname-opt-2

Indochino
Indochino’s shopping experience is the king of customization. Basically you can customize everything. However, this requires quite some interaction from customers’ side. Product images are prominently highlighted as background images. In suits, everything from jacket lapels to vents, buttons, pockets, lining and pleats can be customized. Before you check out, you are asked to provide detailed measurement data which takes just 18 steps. Well, if you’d like to provide many customized options in your shop, Indochino is a great example to learn from. The responsive design doesn’t quite work in some scenarios though, especially when it comes to pages with lots of available options.

indochino-opt

Ableton
Ableton’s website is just another example of how a vivid color scheme doesn’t necessarily interfere with a good shopping experience. The site uses many colors, yet they fit well together, creating a comfortable atmosphere on the page. Good typography, appropriate colors, with everything position just right. It was probably a nice idea not to use the “navicon” icon for navigation in the header of the page.

ableton-optjpg

Swissted
The design of this website is so exquisitely Swiss! The functional five-column grid displays the posters for sale, with no superfluous extras. You can also view enlarged versions of the prints and click through them like a slideshow. The Web form is short, simple and straight to the point, only a two-step process, with all distractions removed. It really doesn’t have to be more difficult than this. The shop is powered by Shopify.

Martinasperl

Cocones
This shop has a quite remarkable user interaction. The snazzy hover effect swivels the iPad sleeve around for you to see what it looks like from the back. The large full-width photographs on product pages are a pretty nice idea to show the products “in action”. Another welcome feature is the little button in the header that tells you if an item has been added to your cart. The Web form for the billing details is short and simple, completing the pleasant shopping experience. The only drawback is the country selector that could be replaced with something a bit more elegant.

Cocones

Benj & Soto
Ben & Soto is a strictly functional website with a clean design. It has a quite unique interaction; you can decorate your own cube and then view all six sides by, well, actually rotating it. I really like the annotated elements, which add a kind of work-in-progress feel to it. Understandably, you have to create an account or sign in with Twitter or Facebook to create and save a design. A nice way of visualizing a product.

Benj & Soto

Motorola
Motorola’s responsive online shop is beautifully designed, displaying large photographs of products that dominate the screen. The flat design creates the impression that the products are a hassle-free experience. Motorola encourages its users to design their own look, and the website has a lovely UX, with large clear buttons. In a narrow view, filter and search are implemented using a fixed filter/search menu — it might be a good idea to consider using the “view mode” overlay instead.

Martinasperl

Ditto
One thing about online shopping is that you can’t try it on until you get it in the mail. Until now, that is! Ditto’s virtual try-on feature takes user interaction to a new level, as you can see what a set of eyeglass frames will look like on your face from the computer screen. The shipping information is fairly quick and easy to fill out, and the whole process is only two steps long. And the nice interaction on the front page with “opening” books is quite remarkable.

Martinasperl

Tsovet
Sophistication and elegance are words that come to mind when visiting this page. Tsovet has an interesting design, accompanied by beautiful black and white photography that sets the tone for the brand. The checkout process is relatively painless: All you need to do is fill out a straightforward single-page checkout form. The images scroll over one another, adding another interesting effect. It’s great to see how product pages manage to contain so much detail using a simple accordion pattern.

Tsovet

Canopy (currently down?)
Canopy is all the best stuff on Amazon, curated by those who know you best. You can see products recommended by your friends or make your own recommendations. Each link takes you straight to the Amazon store, where you can follow the familiar process. I like the minimalistic design of the website, and the layout has an open feel to it. The prices are clearly visible on each product, helping you to browse the website with ease. A very uncommon shopping interface that is used reasonably and properly on the site.

Canopy

Orlando
Orlando’s page has quite interesting transitions. As you click through the different categories, the preceding image fades away leaving enough space for the new image and the product details. However, you can’t actually purchase goods from the website itself; rather, you have to order by email which is quite surprising. The navigation is provided on the left side as an overlay. Also quite unusual for an online shop.

Orlando

Minimals
Minimals has a beautifully soft, minimal aesthetic. The website, which sells invitations for baby showers, is cute and friendly. It’s amazing how simple rounded corners within blocks can put you at ease. The hover effect is a bit inconvenient — the name and price fade away when you take the mouse away. In the cart, customers can select the country to which the item should be shipped and update the total price right away. A shop without bells and whistles, but with a unique, personal design. Powered by Bigcartel.

Minimals

Noodoll
Now that’s something a little different! Noodoll has a fun scrapbook feeling; cute page-loading animation are lovely as they create a bit of intrigue with the cut-out characters in the top-right corner. In fact, little animations are sprinkled all around the website, creating a playful and engaging experience. As you add more items to the cart, they appear in the left sidebar rather than in the upper right corner which is a bit unusual. Powered by Shopify.

Big Cartel

Le Col De Claudine
Le Col De Claudine’s website has an elegant design that showcases the fashion brand. Visitors are greeted with beautiful, soft photographs that act as a large header. The checkout is a five-step process, with no guest checkout option. There are not tricks or effects to detract from the subject matter. And the hover effect over the fashion pieces is bold without being too loud, although it doesn’t work on mobile phones of course. Interesting to see prices not being displayed by default, but only on hover.

Twelve South

Mujjo
The focus of the website is, well, the gloves. The ultra-minimal design is the perfect backdrop for them, and since the target market is smartphone users, all product images have an image of the touchscreen gloves with an actual device rather than the gloves alone. The search tool is hidden in the top-right corner which is not necessarily very convenient. On product pages, the product image can be zoomed in, but displayed on the right, next to the main image which is a bit unusual. The footer has quite some text which is not necessary and could be reduced, but the overall aesthetics is very pleasant.

Martinasperl

Greats
The responsive Greats’ online store is very well designed, with a lot of polish and attention to products. The online-only men’s footwear brand uses consistent typography and photography to present their products well. All items appear to be floating in the air, being shot from the same angle. The features of each shoe are thoroughly described and presented. Once items are added to the cart, you can preview the cart in a nice overlay. The checkout design is perhaps a bit too oversimplified, but it works well within the branding of the site. An online shop with products well-presented and the layout well-designed.

Greats Brand

Big Cartel
The photography on Big Cartel is strong and bold, with rich, earthy colors that grab the user’s attention. There are also no lengthy descriptions, but rather concise bits of explanation. This website has no guest checkout option (which is quite uncommon), but the entire purchasing process is only four steps long and all on one page, which keeps the process from feeling tedious and relieves the user from having to constantly click to the next step. The Web forms are also easy to use and beautifully designed. A nice example of a shopping experience that focuses on one major product item per page, and nothing else.

Big Cartel

Obey Clothing
Obey provides a smooth shopping experience, using consistent typography. Product pages provide fit and styling guides as well as a number of view for every item. The checkout link reveals a quick preview — an overlay with item,s, prices and the ability to remove or edit items from the shopping bag which is quite comfortable. The checkout is quite ordinary, yet what is missing is a progress bar that communicate in which part of the checkout process the user currently is. A nice touch is the red plus sign that means “add to shopping cart,” which is accompanied by the “Added one item to your basket” header that appears. In this case, the straightforward, no-nonsense design reinforces the brand’s image well.

Martinasperl

Früute
Früute’s website has a design that is consistent all the way through to the Web forms. The contrast could be improved a bit, but the flat aesthetic creates a soft yet down-to-earth feel that matches the brand. It’s interesting to see a mix of a common grid and large, prominent product images throughout the site. There is no guest checkout option, but you can log in using your Facebook account. It’s also quite unusual to see the “philosophy” section in an online shop which explain the passion of the company and the rationale behind its products. As an item is added to the cart, it appears as the lightbox in the right upper corner.

Martinasperl

Sew Sew
The simple grid layout and smooth transitions, along with the prices clearly displayed under each item, make for a user-friendly website. The shop is run by Claire Walls who designs everything on her own, and her personality shines through the website quite vividly. From the subtle color scheme to product photos to product descriptions, everything speaks one consistent voice. For independent online shops that’s probably the most significant quality to look after.

Sew Sew

Fiorly
The whimsical look of Fiorly is established by all of the different elements on the page: the typeface, the filter on the photographs, the color scheme and the expansive use of space. What makes this shop unique is that each product item has a dedicated story attached to it. On the product pages, you’ll find quick essays and videos about real people sharing their stories connected to the items (in that case, jewellery). A nice example of how storytelling can be embedded into the online shopping experience.

Fiorly

Conclusion

There you have it, some of the interesting online stores out there. Spending hard-earned cash is tough, so of course as a designer of an online shop, you want your users to feel as comfortable as possible. Whether you’re selling your own design services or a pair of designer jeans, it’s about a nice overall shopping experience and a quick checkout. Now if that’s not a reason to remove a couple of unnecessary checkboxes, add better typography and remove the unnecessary in the checkout, what is?

What interesting design/UX techniques for better shopping experience have you found recently? Or how have you optimized the checkout process of an online shop recently? Let us know in the comments!

We kindly thank everybody who submitted their links via Twitter and Facebook over the last couple of days. You are smashing, you know that, right?

(al, ea, vf)


© Shavaughn Haack for Smashing Magazine, 2013.

December 04 2013

11:00

November 2013: 10 Best Free Hi-Res Photos by Unsplash


  

A few months ago we introduced you to Unsplash.com, a project by Ooomf. Since then they kept promise and regularly released new images. Quality varies though. That’s why we decided to help separate the wheat from the chaff by publishing only the 10 best images released in November 2013. We do not necessarily choose those photos with the highest level of photographic artistry, but our eye is more on usefulness. Which photos are good to support articles, designs and such without showing too much uniqueness to render them unusable without their original context. That said: have fun and do whatever you want with these gorgeous photos…

November 22 2013

11:00

Design Faves: New Wellspring of Inspiration for Designers


  

In the design world nothing gets created without the initial spark of inspiration. Sometimes you as a designer sit down and inspiration is all around you. Most of the time it’s not. To make it through these hard times, all of us have a bunch of bookmarks at hand, with sites focusing on getting the ideas flowing. Now the makers of WebDesigner Depot, Mighty Deals, Techi and Brushlovers have entered the scene with their inspiration-dedicated and in itself beautiful website Design Faves. Let’s have a look…

November 12 2013

11:00

Steady On The Legs: Footwear Ads Often Put Other Ads to Shame


  

Advertising is a difficult industry, full of high pressure competition to capture an audience and appeal to them more than another brand. It seems, too, that within the world of advertising, every field has had moments of genius when a brilliant ad idea was executed just right and created a buzz that turned even the heads of staunch supporters of the competition.

November 03 2013

09:00

October 2013: 10 Best Free Hi-Res Photos by Unsplash


  

A few months ago we introduced you to Unsplash.com, a project by Ooomf. Since then they kept promise and regularly released new images. Quality varies though. That’s why we decided to help separate the wheat from the chaff by publishing only the 10 best images released in October 2013. We do not necessarily choose those photos with the highest level of photographic artistry, but our eye is more on usefulness. Which photos are good to support articles, designs and such without showing too much uniqueness to render them unusable without their original context. That said: have fun and do whatever you want with these gorgeous photos…

October 16 2013

06:30

Colors of Fall 2013: 21 Fresh and Free Design Resources


  

Hello designers, developers, web enthusiasts of the globe. We are back with another edition of our monthly collection of the freshest design resources the month of September had to offer. If you know our series already, you know you can expect the best HTML, CSS and PSD templates, as well as UI-kits for your next great web or native app. All of the resources showcased here are fresh, free and easy to download, suitable for experienced and amateur web designers, so be sure to download the ones you love and share them with everyone you know!

July 26 2013

09:54

“This Is How We Built It” Case Studies


  

Unlike many other industries, the Web design community is all about sharing knowledge and experience. Each of us is very lucky to be part of such a great and useful learning environment, and it is up to us to embrace it — to embrace our learning experiences, and also to embrace our ability to share.

Not only are case studies a great way to explain the design process of an agency, but they also help designers and developers to learn from each other. Seeing how designers work, create, build and play is great, and furthermore, you can learn how to write a great case study yourself and how to use one to spice up your portfolio.

In today’s overview of useful case studies, we’ve featured studies that have recounted decisions made about particular design elements, as well as studies of full overhauls and their accompanying technical challenges. Most of them provide interesting insights into failures and successes, stories, workflows and design decisions made and rejected.

We must admit that this post is quite a long one, so we’ve decided to divide it into two parts to make it easier for you to navigate. Now you should be well prepared for a couple of late reading sessions over the next weekends!

Here is a quick list of the categories covered:

  1. Illustration, Graphics and Logo Design
  2. Typography
  3. Usability
  4. Advertising, Promotion and E-Commerce
  5. Redesigning Elements and Features
  6. Complete (Re)branding and (Re)design
  7. Content and Storytelling
  8. Technical Challenges and Solutions
  9. Workflow and Optimization
  10. Last Click

Illustration, Graphics And Logo Design

Illustrator Full Spectrum Spirograph,” Veerle Pieters
Pieters talks about her experimentation process with spirographs, inspired by the work of Andy Gilmore.

Illustrator full spectrum spirograph

The Design Process of my Infographic About Women Cycling for Grinta!,” Veerle Pieters
Pieters shares her experience of the design process behind the infographic on women’s cycling that she produced for Grinta magazine.

Grinta!: Design process of my infographic

A Systematic Approach to Logo Design,” Adham Dannaway
Icon design can be time-consuming. Dannaway shows how to systematically approach a new logo design.

Petra Capital: A systematic approach to logo design

(Re)building a Simplified Firefox Logo,” Sean Martell
Learn how Firefox’s logo was simplified to better fit its extended usage beyond a desktop Web browser.

Firefox: (Re)building a simplified logo

Five Details,” Jon Hicks
Jon Hicks shares the design process behind the Five Details Logo, including the design and choice of typography.

Five Details: Logo design study

Iconfinder Logo,” SoftFacade
SoftFacade completely reimagined Iconfinder’s existing identity and came up with a shiny and modern robot character. View the detailed design process.

Iconfinder: Logo Case Study

The Great Gatsby
Like Minded Studio collaborated on the branding of “The Great Gatsby“. The aim was to develop a bespoke Deco styled logo reflective of the roaring 20s and Fitzgerald’s masterpiece. They also created a display typeface to acompany the main branding. Additionally read more about it following this link.

gatsby

Whitney Graphic Identity,” Experimental Jetset
In this case study of the Whitney Museum of Art’s logo, Experimental Jetset discusses the impact that a responsive logo can have on branding.

Whitney Graphic Identity

My ‘Tour de France’ posters,” Veerle Pieters
Pieters created posters for the 100th edition of the Tour of France. She mainly used the French landscape which she had used for the ‘Tour de France Infographic’ as a starting point.

Tour de France posters

Typography

Type study: Sizing the legible letter

Designing Type Systems,” Peter Bil’ak
To create truly useful designs, typographers need to examine not only how characters relate to each other within a style, but also how different styles relate to each other within a family. Peter Bil’ak discusses how to achieve this.

Designing type systems

Novel Constructions: The Making of a Typeface,” Christopher Dunst
Dunst shares the process behind the creation of the “Novel” typeface.

Novel Constructions | I love typography, the typography and fonts blog

The Development of the Signage Typeface Wayfinding Sans Pro,” Ralf Herrmann
Herrmann describes the development of the Wayfinding Sans Pro, a signage typeface that can be read from a long distance.

The design of a signage typeface | I love typography, the typography and fonts blog

The Making of FF Tundra,” Ludwig Übele
Übele shares the process behing making the FF Tundra typeface, which was highly inspired by nature.

The making of FF Tundra

The Making of Magasin,” Laura Meseguer
Meseguer writes how she created Magasin, a typefaces inspired by fluid handwriting.

Magasin: The making of

Type Study” series, Adobe Typekit
Typekit features a whole series of case studies of typography:

Usability

Social Login Buttons Aren’t Worth It,” MailChimp
Social login buttons are used by many apps today. MailChimp shares its own experience and considerations in using social login buttons.

MailChimp: Social Login Buttons Aren’t Worth It

Usability in Icons,” Peter Steen Høgenhaug
Icons are used to illustrate a particular function, anything from information to actions. This article explains what needs to be considered when designing them.

Usability in Icons | Stiern

iOS Icon Design: A Designer’s Exploration,”
iOS icon design is not only difficult, but requires a lot of experimentation. David Killoy shares his experience of designing the icon for his note-taking app Notorious.

Notorious: iOS icon design - A designers exploration

The Making of Octicons,” GitHub
Octicons is a icon font made by GitHub. Five designers collaborated on the project, and they share how they built Octicons and what they learned along the way.

GitHub: The Making of Octicons

Designing Facebook Home,” Julie Zhuo
On May 8th, the designers behind Facebook Home (Justin Stahl, Francis Luu, Joey Flynn and Mac Tyler) presented a behind-the-scenes look at their work at the Bluxome Street Winery for a small crowd.

Designing Facebook Home

Advertising, Promotion And E-Commerce

How to Make Your Own App Promo Cards,” Mike Swanson
Swanson was inspired by Starbuck’s promo cards for giving away free apps and decided to make his own for an upcoming event. Learn how you can do one, too!

How to Make Your Own App Promo Cards

The Art of Launching an App,” John Casey
You’ve made your first app! Now what? This study covers some tactics and lessons learned during one process of launching an app.

The Art Of Launching An App: A Case Study | Smashing UX Design

How to Launch Anything,” Nathan Barry
Barry has launched five products in fewer than nine months. Read about the strategy that helped him generate over $200,000 in revenue from online products, starting from scratch.

launch-anything

Selling My E-Book on Amazon,” Jonathan Snook
Several people predicted that 2013 would be the year of self-publishing. Snook shares insight into his eBook sales on Amazon.

Increase Online Sales on Your Ecommerce Website,”
Headscape increased sales on Wiltshire Farmfoods’ e-commerce website by over 10,000% in only five years. What makes it even more special, the target audience is over 50 years old. Paul Boag shares his experience.

Twitter Promoted Tweets,” MailChimp
MailChimp has made use of Twitter’s promoted tweets and shares insight into this experience.

Redesigning Elements And Features

Visual Exploration Behind Signal vs. Noise,” Mig Reyes
37signals share the process behind making its blog special. This study is about how the company visualized noise and styled its blog categories in a unique way.

37signals: Visual Exploration behind Signal vs. Noise

Reinventing Our Default Profile Pictures ,” Jamie
Jamie talks about the process of finding the right default profile pictures for the 37signals website. It’s a great new approach to a very basic element.

37signals: Reinventing our Default Profile Pictures

Login Screen Design: Behind the Scenes,” Simon Tabor
Good UX is not just about the main content, but also about little details such as log-in (and error) pages. GoSquared shares how it made its log-in experience exceptional.

GoSquared Blog: Login Screen Design and UX

Save for Later,” Brian Groudan
All browsers support two functions: searching and revisiting. Groudan worked closely with Mozilla’s user experience researchers and designers to rethink how Firefox could better offer “saving for later” functionality in the browser.

Mozilla UX: Save For Later

A Closer Look at Zoom,” FiftyThree
FiftyThree shares the design process behind the new zoom feature in its Paper app.

Paper: A closer look at zoom

Reinventing the Investment Calculator,” Alex Bendiken
Drawing from the book Money for Something, Alex Bendiken built a tool that lets users experiment and create a unique investment plan. It’s a UX study in turning a boring financial calculator into something you’d actually want to use.

Reinventing the investment calculator

Getting Down to Business,” Teenhan+Lax
The Globe and Mail is Canada’s national newspaper of record. It serves millions of readers everyday with in-depth journalism and informed comment. Learn how Teenhan+Lax helped refresh and enrich the way users experience and engage with the news today.

The Globe And Mail

Olympics: User Experience and Design,” Nick Haley
Nick Haley shares the BBC’s design process of delivering the Olympics across desktop, tablet, mobile and connected TV.

BBC Olympics: User Experience and Design

How We Built the Responsive Olympics Site,” Matt Clark
Matt Clark writes about MSN UK’s approach to delivering the Olympics digitally, from the brief to the finished design.

How we built MSN UK's responsive Olympics site

The Anatomy Of A Successful Logo Redesign,” Belinda Lanks
Lanks summarizes how Jessica Hische had freshened up the new logo for MailChimp with a slight facelift. The new logo now looks new and fresh — more refined but just as playful.

The Anatomy Of A Successful Logo Redesign

What I Want Out of Facebook,” Keenan Cummings
Cummings explains why Facebook fails him and what he wants to get out of it that would make it useful for his personal life.

Field Study: What I Want Out of Facebook

In Praise of Lost Time,” Dan Hill
Dan Hill talks about Facebook’s Timeline as an exemplary bit of interaction design that does little to advance the timeline formally. Yet it might alter the nature of human memory itself.

Facebook Timeline: In praise of lost time

Complete (Re)branding And (Re)design

How to Approach a Responsive Design,” Tito Bottitta
This article shows the design process behind The Boston Globe’s website, one of the most famous examples of responsive designs. Read about how Upstatement approached its first responsive design.

How to Approach a Responsive Design

Responsive Design Case Study,” Matt Berridge
This case study outlines the entire process of constructing the South Tees Hospitals’ website, a large responsive design containing over a thousand pages.

South Tees Hospital:  Responsive Design case study

Rebuilding a University Homepage to Be Responsive. Twice. In Less Than a Year,” Erik Runyon
This slideshow discusses how and why Notre Dame University’s home page was rebuilt twice in less than a year. You will find a recording of the talk below the slides.

Rebuilding a university homepage to be

Yes, You Really Can Make Complex Web Apps Responsive,” Daniel Wearne
Wearne shares his experience in creating Adioso’s Web app, a complex yet accessible project. He covers the framework, responsive mixins, tables and future challenges.

Adioso: Yes, you really can make complex webapps responsive

Designing a New Playground Brand,” Ryan Bannon
This case study shows the design process of Playground’s new brand. It covers the logo, overall website and vector animation process, as well as the core values and personality of the company. The extensive study comes in three parts.

Playground: Designing a New Playground Brand

How House Parties Helped Us Design Potluck,” Cemre Güngör
The team at Potluck describes how it took inspiration from reality to design a “house party on the Internet.”

How house parties helped us design Potluck

Colorado Identity,” Berger & Föhr
Imagine someone hiring you to define your own identity. Berger & Föhr was hired to help create the new identity and visual brand of Colorado, the place they call home. Have a look at the work and logo they came up with.

Making Colorado

Building the New Financial Times Web App,” Wilson Page
Page talks about building the Financial Times’ new app, a challenge that many on his team believed to be impossible. He covers device support, fixed-height layouts, truncation, modularization, reusable components, Retina support, native-like scrolling, offline support and the topic of ever-evolving apps.

Building The New Financial Times Web App

Google Treasure Maps,” Alex Griendling
Griendling writes about the design process behind Google Maps’ treasure mode.

Google Treasure Maps: About the design process

Find Your Way to Oz,” HTML5 Rocks
This very detailed case study looks at the “Find Your Way to Oz” demo, a Google Chrome experiment by Disney. It covers sprite sheets, Retina support, 3-D content and more.

Case Study: Find Your Way to Oz - HTML5 Rocks

The Making of the Moscow Metro Map 2.0,” Art Lebedev Studio
This study is about the design process behind the Moscow Metro map, a complex project that needed to meet the requirements of both Web and print.

The making of the Moscow Metro Map 2.0

Skinny Ties and Responsive eCommerce,” Brendan Falkowski
Read and learn how GravDept redesigned Skinny Ties’ creative and technical direction to propel shopping on every device.

Skinny Ties: Responsive eCommerce

The Design Thinking Behind the New Disney.com,” Bobby Solomon
Solomon shares the process of creating a Disney website that is flexible enough to showcase the widest range of offerings imaginable — in other words, a website that can do everything.

Disney: The design thinking behind the new online presence

Say Hello to the New ISO,” Andy Clarke
Clarke and David Roessli redesigned the website of the ISO (International Organization for Standardization) and share their experience.

Say hello to the new ISO

A Responsive Design Case Study,” David Bushell
The redesign of Passenger Focus takes advantage of the Web as an unique medium.

PassengerfocusA Responsive Design Case Study – David Bushell

BBC News: Responsive Web Design and Mustard,” Kaelig Deloumeau-Prigent
These slides address the core principles and the “cutting the mustard” technique behind the BBC News’ responsive website.

BBC News: Responsive Web Design and Mustard

The Trello Tech Stack,” Brett Kiefer
Read the process behind the Trello app, from initial mockup to a solid server and maintainable client.

Trello: The Trello Tech Stack

Responsibly Responsive: Developing the Greenbelt Website,” Rachel Andrew
Andrew writes about her front-end design decisions in rebuilding the Greenbelt Festival’s website.

Greenbelt: Responsibly Responsive website development

The Digital-Physical: On Building Flipboard for iPhone and Finding the Edges of Our Digital Narratives,” Craig Mod
Mod walks through the process of building the Flipboard app for iPhone and of finding the edges of its digital narratives.

The Digital?Physical: On building Flipboard for iPhone and Finding Edges for Our Digital Narratives

Page-Flip Effect From 20 Things I Learned,” Hakim El Hattab
This study shows how this team found the best way to achieve the feeling of a real-world book, while leveraging the benefits of the digital realm in areas such as navigation.

20 thiCase Study: Page Flip Effect from 20thingsilearned.com

Six Key Lessons From a Design Legend,” Kapil Kale
The GiftRocket team eventually recruited Mike Kus as a designer. This article shows why that decision took their website to the next level.

Six Key Lessons from a Design Legend (a before-and-after) | GiftRocket Blog

Breaking The Rules: A UX Case Study,” Laura Klein
Klein shows how she broke all rules to create the great UX for Outright.

Outright: Breaking The Rules - A UX Case Study

7 UX Considerations When Designing Lens Hawk,” Christian Holst
Lens Hawk is a massive DSLR lens database. This article shares seven UX considerations that were made in its design process.

Lens Hawk: 7 UX Considerations

The Story of the New Microsoft.com,” Nishant Kothary
Kothary shares his insight into making Microsoft’s new website. Also, check out Trent Walton’s perspective on the redesign.

The Story of the New Microsoft.com

Behind the Scenes of the New Kippt,” Gannon Burgett
This interview about the work behind the new Kippt app covers the redesign process, the design principles and problems that the team faced, insights into the new era of Web app design, and where Kippt will head in the future.

New Kippt: Behind The Scenes

Crayola: Free the ‘What If’,” Daniel Mall
Dan Mall has put together a case study of the creation of the new Crayola application for kids.

Crayola: Free the

Campus Quad iPhone App,” Soft Facade
Soft Facade covers every aspects of the design process behind its Campus Quad app.

Campus Quad: iPhone App Case Study

How to Make a Vesper: Design,” Vesper
Learn how the Vesper app was designed and made.

Vesper: How to Make a Vesper: Design

Betting on a Fully Responsive Web Application,” 14islands
Read about how 14islands took the Web app for Kambi, a sports-betting service, to the next level.

Kambi: Betting on a fully responsive web application

AMMO Rack App Design Critique,” Alexander Komarov
An interesting study of the feedback process that improved the AMMO Rack app.

AMMO Rack:  App Design Critique

Walking Through the Design Process,” Ian Storm Taylor
Taylor walks you through the design process of Segment.io, including the progression of mockups in Photoshop.

Segment.io: Walking Through the Design Process

Music Video ‘Lights’: The Latest WebGL Sensation,” Carlos Ulloa
Interactive studio HelloEnjoy built a mind-blowing 3-D music video for Ellie Goulding’s song “Lights.” Creative director Carlos Ulloa explains why the team chose WebGL and how it created various immersive graphic effects.

Music video 'Lights': the latest WebGL sensation!

Designing for Designers,” Kyle Meyer
Designing for other designers is different than working for regular clients. Kyle Meyer shares his experience.

Adapting to a Responsive Design,” Matt Gibson
Cyber-Duck abandoned its separate mobile website and created a new responsive design.

Cyber-Duck: Adapting To A Responsive Design

Grids, Flexibility and Responsiveness,” Laura Kalbag
Kalbag shares her thoughts on the redesign of her own website, including her choice of typefaces.

Laura Kalbag: Grids, flexibility and responsiveness

Making of Typespiration,” Rafal Tomal
Rafal Tomal built Typespiration as a side project. Learn about the process from initial idea to finished WordPress website.

Typespiration: Making of

Case Studies,” Fi
Design firm Fi has integrated case studies into its portfolio. The studies are very interactive and beautifully designed. Here are four of them:

Fi Case studies

More Case Studies!

Perhaps you are more interested in case-studies on copywriting, content and storytelling, technical challenges, or just workflow and optimization tips? Well, off we go to the second part of the overview. Now you should be well prepared for a couple of late reading sessions over the next weekends!

(al) (il) (ea)


© Melanie Lang for Smashing Magazine, 2013.

July 15 2013

06:30

Steampunk in 3D Design: 40 Fascinating Time Travels


  


  

Today we have true inspiration for 3D designers, or any designer even. We collected 40 Steampunk designs to send your mind on a time travel back to your childhood, when you were dreaming of becoming Han Solo, Darth Vader or – who knows – Chewbacca. Dreams can get hairy, can’t they? The following collection shows how much fantasy can be contained in one single designer. Admirable…

May 29 2013

02:04

44 Web & Graphic Design Freebies

Guest post by BrandCrowd graphic designer, Anghelaht

All web designers love to have cool stuff at their disposal, ready for instant use. Although 100% custom work is always the best approach, sometimes ready-made is the only choice when faced with the challenges of a deadline. On the internet, there are tons of high-quality designs available for purchase, but today we thought to provide you with a small collection of 44 awesome web and graphic design freebies, gathered from all around the web. The collection includes icons, textures, vectors, patterns and other various goodies for you to grab for your library and use in logo design or web projects. We hope all of the following will prove to be useful with your web design or any other professional or personal projects. Feel free to share your thoughts or other freebies with us, by leaving a message in the comment section. Have fun, everyone!

Free Icons

leather texture

PSD toggle switch UI

Switches

6 Greek / Roman Pixel Patterns

Hand Drawn Web icons

iMac free PSD mockup

business card template

12 Blurred Backgrounds

wood texture

Slider

Free PSD synthesizer

Free PSD simple emoticons

Social Media UI Buttons

41 Social Media Icons

Retro Portfolio – Full free PSD pack

Pretty Little Progress Bar

Slabstatic display free font

Moonshiner free font

Pixel UI Icon Set

Newap – Free PSD website template

Marketplace buttons

6 wood patterns / backgrounds PNG PAT

Free PSD USA map

10 High Resolution Rusty Metal Textures

Push-Button

Carbon Fibre Photoshop Patterns

Black Wall Texture

Pattern Kit One: “Ribbon Dancer”

Butterflies

Share Buttons PSD

Google Drive

Replacement iOS Icons

Mimi Glyphs Icons

Crisp Icon Set

Blanka website template

iphone ui

Calendar icon

gemicon

Cart widget

Dark Itunes

Clock

IPhone wood UI

Minimal Calendar

What awesome design freebies did we miss for logo design, graphic design and other design disciplines? Do you use free or purchased ready-made graphics in your design process? Tell us what you think.

February 21 2013

05:01

50 Mighty Logo Designs to Power Up 2013

As its still early in the year we thought we’d turbo-charge your creativity by featuring a collection of 50 mighty logo designs gathered from well known online logo galleries. All are designs that show a display of power and might and vary in tone from serious to humorous and masculine to feminine in execution. This roundup features a nice mix of design approaches that cleverly use shape, color, negative space and typographic marks to make a statement.Get challenged and inspired!

Curzon Decor

1-mighty-logos

strong coffee

2-mighty-logos

Strive Studio

3-mighty-logos

Strength&Conditioning

4-mighty-logos

Occupy

5-mighty-logos

Trojack

6-mighty-logos

Power to the Pencil

7-mighty-logos

Army Gear

8-mighty-logos

Epic Comments

9-mighty-logos

BULLMAN

10-mighty-logos

Protected Legacy

11-mighty-logos

House Hold

12-mighty-logos

Silver Gold Bull

13-mighty-logos

Green Power

14-mighty-logos

Warriors

15-mighty-logos

Ultra Fitness

16-mighty-logos

Zeus Fight Wear

17-mighty-logos

Now Make Me A Sandwich

18-mighty-logos

Praemittias

RAMM

19-mighty-logos

VAQUERO

20-mighty-logos

Picthor

21-mighty-logos

Gans Tatverk

22-mighty-logos

Iron Guerrilla

23-mighty-logos

CHOKLAD BUDET

24-mighty-logos

FLYING STAG

25-mighty-logos

Stronghex

26-mighty-logos

Athletic Performance Academy

28-mighty-logos

Mouthscle

29-mighty-logos

Pump ups

30-mighty-logos

Silverback

30-mighty-logos

Templars

32-mighty-logos

Stargym

33-mighty-logos

atlas

34-mighty-logos

God’s Gym

35-mighty-logos

PRYM8

36-mighty-logos

Wellfit

37-mighty-logos

BODYFORCE

38-mighty-logos

VIKINGOO

39-mighty-logos

Power Impression

40-mighty-logos

Truckers fitness gym

41-mighty-logos

Hanuman Shakti

42-mighty-logos

Globull

43-mighty-logos

Gladiator Fitness

44-mighty-logos

Rhinotes

45-mighty-logos

Prevalent Marketing

46-mighty-logos

Muscle Cloud

47-mighty-logos

Silverback

48-mighty-logos

Gryphonism

49-mighty-logos

Growcase

50-mighty-logos

What’s your favorite pick from this roundup of mighty logos? Maybe it didn’t make the list, share your feedback in the comments below.

December 20 2012

08:10

The Top Ten Games Apps of 2012

The iPhone App Store hit the internet back in 2008 and in just four years apps have been well and truly accepted into the mainstream. From getting on top of your finances to managing your personal fitness, there’s an app for it. But the most fun aspect of apps is the possibilities they present for the gaming industry. And things have come a long way in just a few years. It’s now possible to get games with console-style graphics quality on the go; video and animation you’d only expect to find in a games arcade. Here are some of the games that have swallowed our spare time in the past twelve months – our top ten games apps of 2012.

Angry Birds Star Wars

Somewhere in a galaxy far, far away, the ultimate games app just got a whole load better. Star Wars Angry Birds isn’t just the best incarnation of the game, it’s also the best movie spin off we’ve seen in a long time. Yup, you still shoot birds at pigs, but in this game you get to do it with lightsabres and lasers. What’s not to love?

Angry-Birds-Star-Wars-Wallpaper-angry-birds-32422194-1920-1200

Fieldrunners 2

The original Fieldrunners was one of the Apple App Store’s first hit games and this version takes to the next level for 2012. It’s a simple premise. Protect your tower and stop the bad guys from getting to the other side of the screen by using a variety of weapons. The more bad guys you kill the more money you get for weapons.

Fieldrunners-2-Title-642x424

Toca Tailor

The first app from Swedish interactive toy maker Toca Boca, Toca Tailor is a cool game for the over fours. This game lets users dress a variety of characters in an almost endless choice of clothes and is a brilliant game for encouraging creativity.

TocaTailor_site_pic

Toca Band

Hailed as one of the best children’s apps of 2012, Toca Band gets kids to create a song through an easy-to-use interface. All they have to do to make their music is drag and drop the colourful characters across the screen – each one has its own unique sound!

toca_band_web_pic

Clash of Clans

Clash of Clans is a cool cross between FarmVille and a war game. Build a village, train your troops and fight with other players. One of the most popular free apps of 2012 on Apple devices.

carousel_clashofclans_01

New Star Soccer

It might not look like much, but New Star Soccer is utterly addictive. Your aim is simple; score as many goals as possible while more obstacles – such as high walls and winds – are put in your way. You need to upgrade from the free version to the 69p incarnation for the real fun though. This version lets you live like a real player, earning wages and building professional relationships with other players and your club manager. Improve your skills and you make more money. You’ll also have to make lifestyle choices to help improve your fitness or, more importantly, attract your very own WAG.

xl_New_Star_Soccer_624

SongPop

SongPop is a free music-trivia app that was named app of the week by ABS News back in July. Guess song clips and challenge your friends – and there are thousands of songs on there, ranging from golden oldies to today’s top tracks.
song-pop-review-ipad-iphone-android-0

Rayman Jungle Run

The legendary console platform hero made a successful jump to mobile this year with Rayman Jungle Run. The graphics are gorgeous and the smooth touch-based controls are a pleasure to use. No wonder it was named the App Store’s Game of the Year 2012; it’s an easy game for all ages to get to grips with, but addictively tricky to master.
Rayman-Jungle-Run-Trailer-Screenshots-570x440

Waking Mars

This app was one of the biggest smashes of 2012. The narrative is one of the most engaging we’ve seen on this platform and involves the discovery of alien life on Mars and the subsequent mission of first contact. It’s an intelligent, adrenalin-fueled race against the clock to determine the fate of a sleeping planet.

waking-mars-developer-trailer_1

Batman: Arkham City

It may only have been launched last week, but Batman: Arkham City is set to be a last-minute big-hitter of 2012. It’s based on the most popular Batman video game on record and sees Batman fight some of the toughest villains ever – including Catwoman. It’s a hefty download, clocking in at 10.67 GB, so make sure your Mac can handle it before you buy.

bgd-batman_arkham_city-400

This is a guest post contributed by Neeru Pallen who writes on behalf of Print Express UK.

November 30 2012

04:49

33 Fresh Business Cards

The first impression is always very important and quite often crucial when dealing with customers. Displaying your company or personal identity in a properly and creative fashion might be the difference between potential and real clients. Below I have gathered a small collection of 33 Business Cards that captured my attention with their style, colors and effectiveness.

Penn

Grebban

MuscleFire

Nobtaka Nukui

Renhand

Angelis

Ross

Color-Blossom

Mediastudio

Fitwise Training

Mile Deep Films & Television

formgarten

Vladislav Malkovick

Pivotshare

Sommelier

The Argonaut Hotel

Nili Studios

Emporium Pies

Grit Creative Co.

Darlene Dewell

Möbeldesign

Mackey Saturday

Joonas Paloheimo

Privax

Bright Edge Painting

Webshocker

Contreforme

Strahlend

Milky

Radity

Olivier Pineda

iPhone

Business Cards 2012

Which were your favorite business cards and why? Tell us in the comments below.

August 29 2012

07:37

Make it Stretch: Full Image and Video Backgrounds in Web Design


  

Big is the new trend around the web because nearly everyone wants it. It is imperative that one stays up on trends as a web designer. Never do you want to put yourself in jeopardy of offering someone (or yourself) a web design that is boring and outdated. It seems that almost every year or even every six months, there are new trends springing up across the web. For many the route now is go big or go home.

Today, we are going to showcase some of the best full image and video backgrounds that are offered online today. Prepare to be dazzled.

Make it Stretch

A Book of Beards

This site is dedicated to selling a coffee table book filled with pictures of beards. The site works not just because of the great beards, but because the images are the same ones in the book. Without a doubt, you’re going to want to know what the experience of the book is before purchasing it.

Volkswagen Beetle

If there’s a car on the market you’re thinking about purchasing, what do you do? You’re going to want to test drive it, see how it rides and how it looks. The wonderful thing this site does is it recreates the experience you get when driving a Beetle, from the video footage to the interface.

Beyonce

Beyonce is well known for her music, her performances and all around her brand. Every square inch of the screen in filled with her on her website by using images and video. You become enthralled in her every being by just visiting.

Sean O’Brien

You may be interested in Sean O’Brien for whatever reason, but when you go to his website, you must take notice of the reason he is who he is. Much like the Beyonce website, this site is tailored to the fun and exciting brand that is Sean O’Brien. You always have your eyes on him.

Jordan Melo M6

Carmelo Anthony stars in this website by giving viewers a walkthrough of how he created his new shoes. The perspective of the video used allows you to actually feel as if you’re talking and walking with Carmelo on this journey. It’s much more effective full screen than it is as a small view of the video.

Hiut Denim Co.

The images used in this full page site aren’t just here for decoration. They actually add to the story of the website and visually contribute to the ideas being tossed around.

Y. Co

High quality products need to have high quality offerings when it comes to web design and other types of collateral. This site dedicated to a luxury brand of yachts uses full screen video to take you inside and around the yacht.

Chicago L-Shirts

These are some nice, well designed shirts. The developer could’ve slapped them on any type of website with an e-commerce theme and called it a day. They decided to go full screen and use elements that consistently represent the brand.

DesignKitchen

There are really many ways you can approach a full screen website. This approach was to use a lot of detailed design work and display it an appealing manner. With full screen designs you have to be careful because people are seeing everything. This design figured that out and really focuses on great design work.

Pixel Pimps

Sometimes the use of many embellishments and decoration really work to make a website exciting. It isn’t always all about minimalism. This site offers great design as well as wonderful decoration and development. This person is really displaying all their skills in once place.

Modoluce

Again, full screen sites will always benefit the company that wants to show off it’s brand and what they stand for. It’s one thing to have pictures of products, but it’s really another experience to wrap your entire site in them. Modoluce figured that out and really created a website that’s all about them and their product.

Planet Propaganda

This is another example of a very detailed design centric website. Everything is well connected and makes sense as far as the user interface is concerned. The full image allows for excitement and a change of scenery along with every page to page navigation.

Hearts’ Cry Inc.

This site uses a simple execution of full page design by offering only one image as used primarily for the background. The design and development puts a focus on all the copy by essentially taking that off the full page design.

Onside Sports Agency

This is more of a minimalist approach in full page design. While we use the full image size, there isn’t a ton of busy things going on with the design. The full image actually helps to make everything interesting and fun.

Healing Histories

With the great advances in technology today, we can pretty much do anything when it comes to websites. This full page site doesn’t just tell you a story, it asks you to get interactive in picking and choosing your story.

Oh Land Music

This website for a music label allows viewers to know exactly what kind of music they create just by looking. The look is fun, fantastical with a little bit of rock. The fullness of the site makes it easy to grasp quickly.

Parachute Journalists

Designers have so much control in guiding the eyes of the viewers. This website utilizes that, first by only using one page with everything visible that’s completely relevant and helpful to their purpose. All useful, no fluff here.

Sandlewood

With furniture and renovation sites, many developers like to give lots of information with furniture placed sporadically around. Rarely is there a focus on the actual work that’s done. Here, the developer used the full page website to essentially make himself stand out and draw attention to the furniture.

Form Rausch

This website utilizes the full image development to show portfolio work in close to high res. Nobody likes going to a website to have to check thumbnails only to get to images that are as small. This helps show the detail in their work.

Twenty8Twelve

Fashion is one of those things where you have to see it in it’s entirety to really get it. If you see a good shirt on a model, you want to know what it looks like paired with the pants and shoes, etc. This website understood that and used the full page method to help display their fashions.

Ben Thomson Photography

Again, this photographer used the full image idea as a way to allow you to see the detail in their quality and composition. It also allows you to get a sense of who he is.

BlackNegative

Full image backgrounds allow for you to get really creative. This time, the creativity is highlighted in the development of this page. This is easily one of the most epic pages online right now.

Damien Hirst

Rather than just give us a big photograph or a huge video of something we can catch on YouTube, this agency used the background to tell us what they’re doing in their studio. The live feed keeps you up to date on the workings of Damien Hirst.

Alex Arts

Bigger canvased websites allow you to break out of the mold of the grid or fixed width website. That allows you to do a bit more and be a bit more creative. This page is a different approach to a portfolio, but fun to interact with and enjoy.

X-Doria

Cool interaction in a website can get you increased traffic as people are more likely to share. This site utilizes the trend and adds a bit of spice by making this site fun and easy to navigate.

Vivacitas

This developer used the trend to create his own little world. It sucks you in and gets you caught up in the wonderful design as well the movement of the page.

Adidas Design Studio

Navigating through this site requires no mouse and is exceptional. The full pages here allowed for well thought out navigation with uncluttered and easy to read information. This probably took lots of time to make, though they made it look really easy.

Ideal

One could play around with this site all day. The navigation is really outside the box and the atmosphere the design helps create is spot on with the work presented. There’s actually some pretty hilarious and great content on this site.

Elastic Minds Studios

Another great portfolio site utilizing video and images for their backgrounds. The interaction and navigation is also out of the box and well planned.

Peripheral Audio

Upon first look, many know exactly what type of group they are viewing. This site is simple yet effective, as it links viewers to all videos dealing with this group.

Conclusion

Whether you are using Flash or jQuery, making single page sites or full sites, full background websites are a great trend to hop on. It makes a lot of sense and can work for almost any brand or business. They’re great to look at (when executed well) and often exciting in a world full of mundane, cookie cutter websites. Are there any full image or video background sites you’d like to share?

(rb)

August 13 2012

08:03

Following the Masters: Showcase of Design-related Pinterest Boards to Follow


  

Of late, Pinterest has taken the social networking world by a storm. Pinterest makes it extremely easy to find and share content of your liking and interest. Whether you prefer typography, or are into photography and interior décor, you are sure to find many like-minded individuals on Pinterest who are sharing content related to your topics of interest. Further more, if you like design inspiration and infographics, you should really be on Pinterest.

In this article, we are showcasing some Pinterest users who are sharing awesome stuff using their pin boards – not just any stuff, but content that is especially useful for designers. So take a look down through this collection of design-related Pinterest boards, and start following these along today.

Following the Masters

Dainis Graveris

Dainis Graveris is the Founder-Owner of 1stWebDesigner.com. With over 5000 followers on his Pinterest page, Dainis is surely one of the “must-follow” persons on Pinterest. His most notable pin boards include ‘Web Design Trends’, ‘Fonts’, and ‘Technology and Design News’. Also, just in case you are new to Pinterest, Dainis Graveris has a pin board meant just for you – ‘Guides to Pinterest’.

Paul Andrew

Paul Andrew is the Owner of Speckyboy Design Magazine. Apart from usual infographics, he shares interesting stuff such as ‘Books Worth Reading’ and ‘Resources Worth Taking A Look At’, in addition to design inspiration and other such related topics.

Russ Burtner

Russ Burtner is a Senior User Experience Research Scientist by profession. Sounds big, doesn’t it? He mainly shares stuff such as typography, art and photography, along with all genres of design (architectural, interface, industrial as well as product design).

Design Quixotic

Design Quixotic is the pin board of Thea, a graphic designer from NYC. It focuses mainly on design-related aspects, such as typography, graphic/web and product design, logos/icons as well as book covers and wedding invitations.

Trent Martens

Trent Martens basically shares things related to logos, photography, posters and graphic design.

Mattias Ahlvin

Mattias Ahlvin does not share content related entirely to web design, as there are pin boards for topics such as Politics as well. However, there is an interesting and content-rich board about HTML and CSS, along with separate boards for pixel art and WordPress.

Jen Vasseur

Jen Vasseur is a freelance web designer and developer. Major pin boards include those related to design, coding and fonts. Furthermore, there are also separate boards about interesting websites and ‘Websites That Need Help’.

Paula Cevasco

Paula Cevasco is a graphic and user interface designer based in Argentina. On this Pinterest page, you’ll find boards catering to different types of design, such as web, architecture, and so on.

Samantha DeMott

Samantha DeMott is a graphic and web designer based in Washington, DC. The pin boards on her Pinterest page share stuff related to design, especially inspiration and package design. Also, the infographics’ board has a very interesting line-up and is definitely worth checking out.

Sixtyseven

Sixtyseven shares things related to logos and brochure design on Pinterest. There are a couple of other boards too, but they aren’t so well populated.

COLOURlovers

COLOURlovers has over 6000 followers on Pinterest. The pin boards are in perfect harmony with the brand name – BLUElovers, BROWNlovers, GOLDlovers, WHITElovers, and so on. Beyond that, there are genre-based boards as well, such as PHOTOGRAPHYlovers and PRINTlovers. The total number of boards is over 70, and the pin count is well beyond 3000. Obviously, this is one of the most active Pinterest profiles out there!

Graham Smith

Graham Smith is a graphic and logo designer from the UK. With over 2000 Pinterest followers, he shares stuff mostly related to logo design. There are some interesting boards, such as ‘Batman Logo Evolution’ and ‘Vintage Packaging’.

Paolo Bossi

Paolo Bossi, a graphic designer and music producer, pins stuff which is related to design and inspiration – typography, logo design, UI design, identity design and even Photoshop tutorials.

InfoTrust LLC

The Pinterest page for InfoTrust LLC contains boards dealing with social media and design resources. There are also separate boards for premium WordPress themes, Google Analytics and mobile web design.

Ophelia Quixote

Ophelia Quixote has over 1400 followers on Pinterest. Most interesting pin boards included ‘Art I Heart’, ‘Photo Ideas and Inspiration’ and ‘Patterns and Colors’.

Stu Greenham

Stu Greenham uses Pinterest the way it is supposed to be used– to organize and share things he personally likes (or, probably, dislikes). Just along side Typography, you’ll find ‘Favourite Fonts’, and other mutually resonating boards such as ‘Books to Read’ and ‘Books I’ve Read’. Terrific way to personalize social media, isn’t it? There is also a separate pin board pertaining to Facebook Timeline Covers.

Niki Blaker

Niki Blaker, a visual designer, has created boards about typography, animated GIFs and illustrations. Just in case you are looking for some awesome artwork, check out her pin board ‘Mexicana Floral Embroidery’.

Jeff Andrews

Having over 4000 followers, Jeff Andrews has created pin boards related to architecture, design, film and television, typography, photography and many other topics.

Mashable

Mashable has over 40,000 followers on Pinterest. The pin boards cover varied topics, such as space, fashion, lifestyle, humor, business, advertisements, social media, and so on. For web designers and other internet enthusiasts, there are also special boards about Instagram photos and Pinterest itself.

Smashing Magazine

You’ll find eBooks, desktop wallpaper calendars, and other awesome stuff from Smashing Magazine‘s Pinterest boards. Need we say more?

Over to You:

Finding design-related content on the internet is almost like building a personal library. No matter how many books you collect, there are always many more just waiting for you! Just like a good reading pane or library, the above list too can never be complete. Know any Pinterest boards that we missed? Feel free to share in the comments!

(rb)

August 01 2012

08:02

Showcase of Unique Steampunk Web Design & Resources


  

“It’s sort of Victorian-industrial, but with more whimsy and fewer orphans.” Caitlin Kittredge

Steampunk is a genre which surfaced during the late 1980s and early 1990s, as an amalgam of various science-fiction and fantasy elements resembling the British Victorian era or the U.S. “Wild-West” era, in which steam power was widely used. One of its main characteristics is anachronism – designating an object, person, event or custom which is inconsistent with its current time period. The term “steampunk” was allegedly originally coined by author K.W. Jeter in a letter to science-fiction magazine Locus in 1987, to separate himself and fellow sci-fi retro-tech lovers from their contemporary, futuristic “cyberpunks”:

Personally, I think Victorian fantasies are going to be the next big thing, as long as we can come up with a fitting collective term for Powers, Blaylock and myself. Something based on the appropriate technology of that era; like ‘steampunks,’ perhaps…

The genre itself actually predated the appearance of its denomination: some of its specific, easily-recognizable features can be found in the works of literary titans H.G. Wells and Jules Verne in the late 18th – early 19th century. Since then, steampunk elements and influences can be found throughout an array of domains, such as art, literature, television and film, fashion, music and design. Today, we’re going to dip our toes into the web design pool and take a look at an inspiring showcase of websites and resources that pay homage to this unique style.

Steampunk Web Design

3232 Design

3232 Design is a Minneapolis based web design studio specializing in websites and interactive media. They also produce and integrate business systems, print and online marketing and brand identity design.

Abney Park

This is the official website of renowned Seattle based steampunk band, Abney Park. It was formed by Robert Brown in 1997 and named after a London cemetery and are now referred to as the “quintessential steampunk band”.

Arthrobots

Arthrobots is Manchester based artist Tom Hardwidge’s website, where he commercializes hand-made ornamental robots inspired by arthropods.

Chris Jockey

This is the official web page of Colombian graphic designer Chris Jockey. He offers a plateau of services, among which illustration, animation, web design and branding.

Dr. Grordbort

Dr. Grordbort is a unique and eccentric website that commercializes rayguns – weapons that any true steampunk lover must have in their artillery.

Felideus

Felideus is a Spanish freelance illustrator, designer and writer that has worked as an art director, graphic designer, animator and screenwriter in audiovisual productions.

Freak Angels

Freak Angels is a website dedicated to posting an online weekly comic written by Warren Ellis and illustrated by Paul Duffield

Ian Tregillis

This is the website of New Mexico based author Ian Tregillis, who is best known for his science-fantasy trilogy The Milkweed Triptych.

Iron Grip Marauders

This is the official website of the Iron Grip Marauders multiplayer strategy game. Here, you can experience virtual strategic battles in 3D graphics.

Internal Carotid

Internal Carotid is a design company from Ukraine, specializing in web design, interaction design and illustration. Here, you can browse through their portfolio and get a pretty good idea of what they do.

Kultika

Kultika is a German website containing a large list of psychics, fortune tellers, astrologists and clairvoyants, which you can call for advice.

La Lune Mauve

La Lune Mauve is a French webzine containing the works, thoughts and ideas of various francophone artists passionate about dark romanticism.

Light Quick

Light Quick are a web design company from South Oxfordshire, England. On their websites you can find relevant samples of their previous projects, a helpful guide as to what their services entail and more.

Lord Likely

“The Astonishing Adventures of Lord Likely Aristocratic Adventurer and Gentle-man of Action” by its full name – is a website dedicated to an eccentric figure of the English aristocracy in the Victorian era. Here, you can read outrageous stories about his life and adventures.

Mechanical Mirage

This is the official website of Japanese artist Kazuhiko Nakamura. You can marvel at the numerous prizes he has won during his longstanding career and at his art – “a surreal hybrid of man and machine, a hard marriage of metal and flesh”.

Myke Amend

This is the official website of artist Myke Amend, surreal pop fantasy painter, engraver, sculptor, and woodworker from Cincinnati, Ohio. It contains his steampunk, gothic and horror mixed media artworks.

The New York Moon

This is an Internet based publication in sync with the lunar phases (meaning that it is released at every other month’s full moon) and a cool collection of imaginative projects.

Conselho Steampunk

Conselho Steampunk is a Brazillian website created by the Steampunk Council from Rio de Janeiro as a place to share related news, events, designs, music and more.

Loja São Paolo Conselho Steampunk

The Loja São Paolo is actually linked to the above mentioned website. The things that set them apart are the city in which the council is based and the fact that this particular one also contains a forum, where steampunk aficionados can discuss related topics.

Steampump

This is the official website of the annual steampunk festival in North Melbourne, Australia. Here is where you can find out all the details about the festival’s third edition that is taking place this year on the 11th of August.

Steampunk Comic Shop

The title of this websites gives us a pretty good idea about its purpose. It contains numerous steampunk inspired graphic novels, sketchbooks, photography, magazines, trading cards, toys and other fun items for the passionate.

Stephane Halleux

The official website of artist Stephane Halleux, featuring a short bio and news regarding previous and future expositions of his amazing steampunk artworks.

The Steam Emporium

The Steam Emporium has been created as a collection of the coolest gadgets and artifacts related to the steampunk genre. It also contains news about upcoming events and art shows.

Thin Gipsy Thief Studios

Thin Gipsy Thief Studios is visual artist Kyle Miller’s website and brand, based in Vancouver Island, British Columbia. His work entails steampunk and science-fiction styled woodwork.

Vulcania Volunteers

This is award winning artist David McCamant’s website, where he guides visitors through a unique journey in imagery of the Nautilus from Twenty Thousands Leagues Under the Sea.

Steampunk Inspired Design Resources

So what’s the next step if you’re a designer and you just decided you love this style? You’ll continue to scroll down through a list of steampunk inspired design resources for your web interfaces. Because putting an extra effort in the details makes the whole more than just the sum of its parts.

How to Create a Steampunk Style Illustration in Photoshop

Create a Steam Powered Typographic Treatment – Part I & Part II

How to Create a Steampunk Golden Car

Creating a Highly Detailed Steampunk Insect

Customized Name Tag

Steampunk Web Browser Icon

Steampunk Header

Steampunk UI Bits and Bobs

Steampunk Clock Calendar Widget

Steampunk Navigation Menu

Steampunk Weather App

Conclusion

We’ve begun unraveling the mysteries of the steampunk genre together and have taken the first baby steps inside this fascinating fictional world. To take it further share with us. Have you encountered other websites with steampunk inspired landing pages or interfaces? Would you use elements from this unique style in creating your own website? Why or why not?

(rb)

July 26 2012

10:55
08:02

Creativity With Skill: Showcase of Hand-Drawn Elements in Web Design


  

With the advent of technology, more traditional hand-drawn art has taken something of a back seat. Of course, you do find masterpieces, both classic and modern, in art galleries. But in general, many of the hobbyist artists among us have given up pencil and brush in favor of Photoshop and, at times, cameras.

In this article, we take a look at innovative usage of hand-drawn elements in web design. The pieces in this round-up are varied; some are minimal and clean, whereas others are mere sketches, but all show both creativity and skill. So without further ado, let’s take a look at some awesome hand-drawn pieces that have been incorporated into web design.

Creativity With Skill

1. XHTML Cafe

XHTML Cafe showcases a unique and intuitive design that appears to be just out of a comic book. The logo is displayed in the center, and since the name has “cafe” in it, the image portrayed is that of a cafe. If you look closely, you’ll see that the logo has the navigation menu to its sides, and the window shows “Now serving: WordPress Themes”. Plus, the specials’ menu-board on the outside mentions ‘dishes’ such as XHTML and CSS.

XHTML Cafe

2. The Neighbourhood

The Neighbourhood has kept the drawn elements in its header, where you see drawings of kids playing, tree houses and a rainbow. Perhaps something reminding us of an idealized neighborhood! If you scroll down, you’ll find a gorgeous and nifty website with a blog.

The Neighbourhood

3. Odosketch

Odosketch is a product from Odopod that lets you create, well, sketches! The website shows featured and latest sketches, but the hand-drawn elements are best visible in the clouds on the header and the logo, which is followed by a paper plane.

Odosketch

4. Natrashka

Natrashka is a well designed portfolio. You can see the imaginative inclusion of the drawings in the boy-caricature and certain other graphics as you scroll down the page.

Natrashka

5. Mel Kadel

Mel Kadel uses a colorful background for the homepage, and if you visit the Drawings section, you will be presented with some awesome artwork.

Mel Kadel

6. Me & Oli

Me & Oli is a garment shop, and many of the drawings used in the website design are both inspiring and creatively included.

Me & Oli

7. Li Chin’s Showcase

While Li Chin has moved the actual website to a different URL, you can see the gorgeous drawing on this page, right next to the text.

Li Chin's Showcase

8. Legwork Studio

Legwork Studio uses drawings in a clever manner. As you keep scrolling down, you’ll be greeted with hand-drawn items from daily life (i.e. cameras, scissors, brushes, light bulbs, coffee mugs, remote controls, and so on).

Legwork Studio

9. Kyle Steed

You can see drawn caricatures both in the header and footer of Kyle Steed’s website. Also, don’t forget the background text in the header describing Steed and his work.

Kyle Steed

10. Kutztown University (Communication Design Department)

What better way to create a website for a design department than using mind-blowing design in the website itself? Kutztown University’s Communication Design Department presents a no-nonsense homepage. Complete with links in the center and a stunningly beautiful drawing taking up rest of the page.

Kutztown University (Communication Design Department)

11. Kinetic V5

This is one website you HAVE to visit, regardless of whether you need science lessons or not. Simply keep scrolling down, and you’ll be treated with one of the most unique combinations of website design and hand drawings.

Kinetic V5

12. Kevin Monger

Kevin Monger uses drawings all throughout his portfolio, and intersperses them throughout the site to complement or highlight other elements.

Kevin Monger

13. Just Dot Media Services

Just Dot Media Services makes judicious usage of drawings in their website. You can see caricatures and cartoons associated with each text or portfolio segment.

Just Dot Media Services

14. STUDIOIMG.COM

This is another site that made it into the showcase with its stunning and large background image that is hand-drawn.

STUDIOIMG.COM

15. Miki Mottes

Miki Mottes uses cute drawings throughout the website. Simply head to the Portfolio section and treat yourself to amazing creativity.

Miki Mottes

16. Lucama

Lucama presents abstract and, dare I say it, pseudo-surreal artwork. As you click on the links in the header, the main picture on the page slides to make room for another, and so on.

Lucama

17. Esteban Muñoz

This website shows good drawings in the footer, which move as you move the cursor towards or away from them.

Esteban Muñoz

18. Boompa

If you like colors and have an appetite for websites with a beautiful background, you should check this one out. The website overall is just too beautiful to resist, all thanks to the wonderful background.

Boompa

19. Jesse Willmon

Looking at the screenshot itself, you can conclude that Jesse Willmon’s website makes prolific use of drawings. None of the drawings are anything that out of the ordinary, but they do portray simplicity done right.

Jesse Willmon

20. It Looks Good

The older version of It Looks Good uses several cartoon-type drawings against a dark setting, and the navigation related ‘heads’ are in red. The newer version, however, does away with this extravagance, but retains the cartoon ‘head’.

It Looks Good

21. Hugs for Monsters

Hugs for Monsters is the portfolio of Joe Lifrieri. The header, as shown in the screenshot below, features good drawings and is definitely worth a look, be it for inspiration or simply fun.

Hugs for Monsters

22. Harry Ford

Harry Ford’s website has a drawing of a man, presumably Ford himself. If you look closely, you’ll notice that social media links are in his hair!

Harry Ford

23. Hannah’s Leben

This website showcases some amazing artwork and hand-drawn elements to complete the look, along with some wonderful typography.

Hannah's Leben

24. Draw for Joy

Draw for Joy — doesn’t the name speak to you? The website is a gallery of artworks, some of which are really nice to look at. Needless to say, this is a good pick for showing hand-drawn elements in web design.

Draw for Joy

25. Bio-Bak.nl

Here, oddly enough, your mouse cursor is followed by an arm. However, the typography is interesting, and the two flying demons clearly show the creator’s drawing talent.

Bio.Bak.nl

To Sum it Up…

With that, we come to the end of this showcase. What do you think of the above hand-drawn elements being worked into the web designs the way they were? Do you feel any of them hurt the design more than helped it? Feel free to share your thoughts in the comments below!

(rb)

May 07 2012

10:08

World of Watercolor: Beautiful Watercolor Effects in Web Design and Tutorials


  

Using watercolor in web design is not a new thing that designers are implementing, by any means. In fact, it has been used in web design for years. In no small part due to the fact that digital watercolor effects are inspiring and attention-grabbing, and on top of that, easy to achieve. In this collection, we have put together some beautiful examples of watercolor effects in web design for your inspiration.

All of the sites and tutorials have been hand-picked, and demonstrate the allure and beauty that this wonderful effect can add to the web. So, let us take a close look at this collection, and get some inspiring and tempting ideas for web design projects to come. Enjoy!

World of Watercolor

Boompa makes use of appealing and soothing watercolor effects that look astonishingly beautiful and mesmerizing.

Screenshot

Istok Pavlovic‘s website showcases some excellent and visually pleasing watercolor effects not only in the background, but also all over the site.

Screenshot

Chris Sharp uses watercolor effects against a black background, which can be tricky to do and have the effects stand out. But here the balance has been found nicely.

Screenshot

Five Points Interactive uses watercolor effects very decoratively throughout the background and header.

Screenshot

Giancarlo Fajardo, you’ll notice, has some darker tones that blend perfectly with the lighter toned background giving the whole design a very soft look.

Screenshot

Syster has amazing watercolor effects used in the design. And while the header really shines here, the top navigation menus as well as the footer have also been designed quite creatively.

Screenshot

Weberica, while not the most outstanding site design on the list, the large, decorative header makes this design’s use of watercolor effects stand out.

Screenshot

Corvus Art has a very beautiful and visually alluring header design with some exceptional effects that complement the entire site.

Screenshot

Le Bloe‘s designer tried to give a very charming and shimmering look to the design that was accomplished wonderfully with the use of watercolors.

Screenshot

CSS Addict has a very calming and pleasing look, and the watercolor effects used make it even more so.

Screenshot

All for Design, though it is somewhat similar to the design of CSS Addict, it stands apart from it mainly because of the type of watercolor effects used. The big difference is the header.

Screenshot

Football Made in Africa‘s overly imaginative design is full of impressive watercolor effects that add a grungy textured look to the site.

Screenshot

Web Designer Wall is a popular site whose use of watercolor effects really stand out and make the header shine.

Screenshot

Imoments takes an imaginative approach to using watercolors in the web design. The page does not feature any significant content rather just the graphics and astonishing watercolor effects.

Screenshot

Bcandullo
This website’s layout is somewhat busy and full of different kinds of elements. The use of watercolors in the header is quite lively and represents an energetic spirit.

Screenshot

Wccnet contains various beautiful watercolor effects in the footer area, which stands out against rest of the site which is very understated and plain.

Screenshot

Deborah Cavenaugh uses watercolors to great extent, and the effects have been incorporated very well within the design to give it a complete and interesting look.

Screenshot

Davide Savelli‘s website is designed on the concept of minimalism and does not contain too much in the way of graphical elements, which makes the watercolor effects used really pop.

Screenshot

Sunrise Design uses vivid watercolor effects and has successfully pulled it off. The bright green and yellow colors gives the web design a feel of happiness and joy.

Screenshot

Big Cartel‘s use of cool green shades and beautiful illustrations are the main visual draws in this otherwise very simple design.

Screenshot

Small White Bear‘s design brings out a very positive and soothing change in your mood with its soft, comforting watercolor effects.

Screenshot

Efinterns‘s beautiful and gratifying use of watercolor effects works well with this quite unusual, and quite dynamic design.

Screenshot

Pallygiraffe‘s vivid and energetic colors brings the design a feel of liveliness and vigor.

Screenshot

Designer Interviews‘ simple, sophisticated design uses watercolor effects quite minimally, yet they stand apart from the rest of the site.

Screenshot

Billyhughes.oph‘s various shades of blue with beautiful mouse over effects in the header are sufficient enough to grab the attention and make this website a memorable one.

Screenshot

N.design Studio‘s design, uses watercolor effects quite creatively throughout, with big, bold typography and large images.

Screenshot

Xhtml Cafe has a very appealing design with watercolor effects not only in the header, but also in the footer to make it look even more stunning.

Screenshot

Sietedefebrero limits the use of watercolor effects to the header, but the header itself speaks volume about its creation.

Screenshot

Moon Beam Illustrations website stands out, mainly because of the use of excellent watercolor effects. The background textures fully enhance the beauty.

Screenshot

Tutorials

Watercolored Design Studio Blog Layout
In this tutorial you will learn how to make a clean and simple watercolor based layout for a blog. The PSD is available for download.

Screenshot

Creating an Abstract Watercolor Wallpaper
There are plenty of ways to create a watercolor effect in Photoshop. Some are very cheesy and you can easily tell that a simple filter has been used. In this tutorial, we will be using Layer Masking.

Screenshot

Create Cool Watercolor Effects in Photoshop
In this tutorial we will learn how to create cool watercolor effects of your very own in Photoshop to build up your design arsenal.

Screenshot

Create Convincing Watercolor Effects Using Photoshop
This is a short tutorial about creating convincing watercolor effects in Photoshop. We’ll use a picture of a crane, several watercolor brushes and a texture to obtain this particular effect.

Screenshot

Create a Nature Inspired Painted Background in Photoshop
In this tutorial, we will show you some techniques for creating watercolor effect backgrounds.

Screenshot

Super Cool Watercolor Effect in 10 steps in Photoshop
In this tutorial we will learn how to create a quick and easy watercolor effect for your design needs.

Screenshot

Create a Watercolor-Themed Website Design with Photoshop
In this tutorial you will learn how to use the Art History Brush and combine it with watercolor custom brushes to create a nice background header image and more for web design projects.

Screenshot

Easy Watercolor Painting Effect In Photoshop
In this Photoshop tutorial, you learn how to easily make a photo look more like a watercolor painting. This photo effect works best on images where maintaining rich colors and strong contrast is more important than keeping any fine details, since you’ll be losing a lot of detail with this effect.

Screenshot

All for Now

That wraps up the post on our side, now we are turning the discussion over to you. Use the comment section to tell us your thoughts on the collection and to share some of your favorite sites and tutorials that feature watercolor effects.

(rb)

April 26 2012

08:01

Websites of the Deep: A Showcase of Underwater Web Design


  

Developing a website can sometimes be a dry process, but that doesn’t mean the finished site can’t make a splash. As the lead designer at a studio called “The Deep End”, it’s always interesting to see what others have done with the underwater web design theme, and it turns out there are quite a few sites out there. Pay close attention to the different styles that are utilized, as there are many different ways to bring the allure of the sea to the web.

Below is a showcase of beautiful websites that have used the underwater landscape and the creatures who reside there as either a backdrop, or to tell a compelling story. From cartoonish and quirky to stunningly photographic, these aquatic websites have a lot of range. So dive in to this showcase of underwater web design and find the inspiration you are looking for to turn your next web project into something truly deep.

Websites of the Deep

iZenius uses subtle animation, texture and a fun retro aesthetic to bring a stylized ocean to life.

Family of Fish uses beautiful fullscreen photography in multiple layers to create an amazing parallax effect as you scroll down to the ocean floor.

The site for the fictitious Atlantis World’s Fair has the look and feel of a children’s book from the 1960s. Mostly baby blue with several pops of color, it follows the journey from the water’s surface down to the lost city.

Fishy has a quirky and colorful interface that makes great use of pop art illustrations and HTML5 animations to showcase their work.

Goodbye Elliott is a Hawaiian boy band that uses the natural underwater beauty of their home state to gorgeous effect.

Liquid Torch gives the illusion of being underwater through simulated beams of light, as well as splashes of water on and behind the hero image.

Squid Chef‘s coming soon page plays with lighting effects and a colorful, simplistic illustration of their mascot.

Iceberg brings us a somewhat chilled version of the oceanscape. Using gradients and subtle glow effects, Iceberg shows us that there really is more under the surface.

Dedoce utilizes a beautifully textured watercolor-esque illustration as a backdrop, and the result is quite dramatic.

Iutopi is a fantastic example of using parallax to tell a story. As you scroll down from the surface, you encounter many of the creatures which call the ocean home, and they only get stranger the deeper you go.

Ocean’s Discovery uses the requisite ocean blue in the hero photo, but sets it off with a pop of vivid yellow on the navigation bar and to highlight some of the copy.

Tomas Projeta‘s portfolio site has a very atypical and interesting navigation. Rather than starting at the top, it starts in the center of the vertical space, allowing visitors to scroll up to the sky, or down into the sea. The wonderfully detailed illustrations make both directions worth the trip.

We Think suggests a deep sea dive through the clever use of their heroes’ image: Two guys in their pajamas and old-school diver helmets. Their header also includes a repeating wave pattern to add to the effect.

Ukranian Design Studio includes many environments in addition to the beautiful coral reef. You can easily navigate toward space, dry land, as well as the center of the earth.

Sendoushi uses a fish as a metaphor for the different stages that stand between a client’s problem and their solution. Now that’s deep.

Deeper is a WordPress theme that combines gorgeous fullscreen photography and some slick jQuery scrolling. It is meant to be used by scuba diving businesses.

OPResume integrates the scenery into almost every aspect of the design, including navigation items and calls to action. So what if they put toucans underwater? This site has a lot of fun with the illustrations and animations, and it all works.

Flotation Web Hosting uses semi-transparent wave graphics and a lifesaver to bring their otter mascot to the top of the page. Subtle texture and cool hues let the bright calls to action really stand out.

Brad Colbow‘s portfolio site has a cool, somewhat grungy illustration of a swing set being swallowed up by the sea as its background.

Thanks to a shot of water out of his blowhole, ReadWhale‘s whale mascot blends in seamlessly with their logo. Ultra simple, in various shades and gradients of blue, this site really conveys an arctic mood.

Visual Harbor puts its employees into the scene as deep sea divers loaded into a mini submersible, before popping out for a quick swim. There is also a really great illustration of their “underwater headquarters.” I doubt they get much work done there, but its cool nonetheless.

Voll‘s site is the second on our list to start in the center of the horizontal space, allowing visitors to either scroll up or down. If you choose the downward path, you will be greeted by brightly colored octopi and a landscape that looks more lunar than aquatic. Snaps for artistic license!

Get Me Fast has a very colorful, cartoony vibe that goes well with their mission of making web development simple.

Discovery Cove‘s main content area serves as a slideshow for images of the underwater activities the park offers, intercut with animated images of brilliant, sparkling underwater light.

The site for Lonely Sock Games’ Coral City App uses fun, colorful underwater illustrations of the game’s central characters, as well as underwater structures. Some retro design elements give the site even more visual interest.

Bluefish Training uses an angelfish silhouette and a ultra clean waterline to give the content a sense of space.

Icebrrg‘s tagline reads: “web forms made chillingly simple.” The same can be said for the website itself. Using only simulated light in cool hues, you get the sense that the water is pretty cold down here.

Feel and Live gets the subtlety award for this list. Their site has a very pale blue background with a faint wave pattern running across the header. The overall effect is very light and refreshing, and it lets the three main accent colors make a more powerful statement.

End of the Line

That finishes off this end of the showcase, but we know that there are plenty of other fish in this sea. So now we turn the post over to you, the reader. Take a moment and leave us your thoughts on the sites collected here, or a particular favorite of yours that wasn’t on the list.

(rb)

April 24 2012

08:19

An Eye for Detail: Exceptional Makeup Artists


  

As we search for inspiration, looking beyond our own fields and into other artistic arenas is quite commonplace, no matter how far from common the expressive works we find in these places may be. Which is the case today. Today we take a look at some work of an exceptional group of makeup artists who have really taken their artform to exciting and inspirational new heights.

Each of the makeup artists we are featuring in this collection have focused on eye makeup in particular, painting such impressive, detailed designs on such small dermal canvases. Even with such a fine focus, still each of their works rings with unique and clever styles that give the collection an interesting range and broad appeal.

An Eye for Detail

Katie Alves

KatieAlves has a playful style, that is as impressive as it is whimsical. She creates and recreates landscapes and other scenes, along with drawing other objects that give her eyelids character.

Carnival Sunset Eyes

Hot Air Balloon Eyes

Harry Potter Eyes

Lion King Eyes

Nightmare Before Christmas Eyes

Alice in Wonderland Eyes

Fairy Eyes

Halloween Eyes 3

Bee Creative

Super Mario Eyes

Pirates of the Caribbean Eyes

The Wizard of Oz Eyes

City Eyes

Misty-Angel

Misty-Angel‘s work goes in a different artistic direction that is both breathtaking and graceful. With a layered background of color placed, she then draws amazing accompanying imagery on top of or alongside the stunning base she has laid.

Valentine’s Day

Rose

Butterfly

Silver and Flower

Elf_2

Peafowl

Ice Dragon

Flower Elf

Green Butterfly

Peafowl’s Eye

mrralphie

mrralphie (a.k.a. Rachel Clarke) takes the collection back to a slightly more traditional area, with just enough flair and attitude to give rise to some truly exceptional and expressive pieces. Homages and originality abound throughout her impressive portfolio.

wildfire

Slytherin.

lovely smoke.

Nice shooting sweetheart!

golden illusion.

a day at the beach.

KAPOW!!

cool, calm and dangerous.

golden temptress.

royal blue

hedwyg23

And last in our showcase, but certainly not least, is hedwyg23, or just Hedwyg for short, whose fascinating, layered works take a powerful turn from the traditional, and are infused with a potent creative edge that has no need to beg for attention or adoration. It garners both without effort.

The Hunger Games: Girl On Fire

Smokey Red

Request 5. Twilight Sparkle

Request 6.

Request 3. Winter Contrast

Galaxy Eyes

Flowerfield

House Stark make up

Dragon fruit

Wild Tiger

Commission: Darkling

(rb)

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl