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

July 30 2012

07:00

30 Free Icon Packs from the Dribbble Community

Dribbble is not only a great website to find insights into what fellow designers are working on, it’s also home to an array of freebies available for download from generous Dribbble users. This post rounds up 30 high quality icon sets that can be downloaded and used in your own projects for free.

Credit Card Icon Pack by Louis Harboe

View the icon pack

iOS Icon Pack by Michael Shanks

View the icon pack

8-bit Social Icon Pack by Patrick Jones

View the icon pack

Social Media Icon Pack by Alden Haley

View the icon pack

PixelPhilia 32px Icon Set by Ömer Çetin

View the icon pack

Social Icons with States by Handsome

View the icon pack

Premium Pixels Icon Set by Matt Gentile

View the icon pack

Free Icons Download by Hüseyin Yilmaz

View the icon pack

140 Icons Freebie by Thom

View the icon pack

30 Toolbar Icons for Free by Matthew Skiles

View the icon pack

350 Free Vector Web Icons by Brankic

View the icon pack

Picons Social by Morphix Studio

View the icon pack

Freecns UI Icons by Yanlu

View the icon pack

Free Vector Icons by Hugo

View the icon pack

12px Glyphs Free PSD by Facundo Gonzalez

View the icon pack

48 Free 16px Pictograms by Miro Keller

View the icon pack

Tinycons Free Preview Pack by Vic Bell

View the icon pack

Mini Clouds Set PSD by Jackie Tran

View the icon pack

Icecreamcons Vector Icons by Yunmie Kim

View the icon pack

Toolbar Icons by David Keegan

View the icon pack

User Avatar Icons by iconshock

View the icon pack

Free Tiny Icons by Andree

View the icon pack

Icons by Paulius Uza

View the icon pack

Random Icons by Ryan Quintal

View the icon pack

Glyphs by David Silva

View the icon pack

Socialico Icons Pack by Fontfabric

View the icon pack

Delight Icons by Jeremy Sallée

View the icon pack

Social Icons PSD by Umar Irshad

View the icon pack

Free Icon Set by Joe Prince

View the icon pack

Free Icons by Diego Margini

View the icon pack

July 02 2012

07:00
Sponsored post
soup-sponsored
05:36
Reposted bySchrammelhammelMrCoffeinmybetterworldkonikonikonikonikoniambassadorofdumbgroeschtlNaitliszpikkumyygittimmoe

April 16 2012

07:00

Build a Basic Dribbble Fed Portfolio Website (Part 1/2)

Follow this step by step tutorial to create a simple single page portfolio website design that will self-update using shots from your Dribbble profile. In this first of the two part series we’ll go through the process of designing the website concept in Photoshop, before coding up the HTML and CSS next week.

Simple portfolio website design

The portfolio design we’ll be creating is a single page design and features the very basics of a design portfolio website: A logo, an intro, the showcase of work, an about me paragraph and a contact form.

Create a new document in Adobe Photoshop. I like to give myself a large canvas to work with that resembles a large monitor resolution. 1680x2000px will provide enough space to visually build our design as it will appear on screen.

Fill the background with a warm grey tone such as #f1f0ed. Using subtle tones as opposed to black on white will help avoid any contrast clashes.

Use the Noise filter (Filter > Noise > Add Noise) to add a subtle texture to the background to give the site a warmer, more tactile feel.

Draw an 820px selection in the centre of the document and use guides to highlight the centre and edges of this main content area.

Fill a circular marquee selection with a dark grey and add your initials in a font of your choice to create a simple logo.

Right click and select Rasterize Type on the initials layer then CMD+Click the thumbnail of the background circle layer to load its selection. Inverse the selection and hit delete to remove any overlap beyond the edges of the logo.

Dab a spot of a soft black brush, then hit CMD+T to transform the shape. Squash it down so it can be used as a shadow under the logo. Move it into place and reduce the opacity to suit.

Begin writing out a short introduction to your portfolio website. In the coded version we can use Google Web Fonts to make use of the @font-face CSS3 property, which will allow us to use a cool font for the body text. Here I’m using a downloaded version of Droid Serif to mock up the text in Photoshop to gain a feel for the text sizes.

Change the colour of text that will appear as a link and add the underline effect to simulate a clickable element. Planning these features now will make it easy to just copy and paste the hex colour values into the CSS stylesheet.

This portfolio will be self-updating using your shots from Dribbble, so begin copying and pasting the design thumbnails from your profile and align them accordingly in the Photoshop document. Hold Shift while pressing the cursor keys to nudge the element by 10px increments.

Add a Drop Shadow effect to the portfolio designs to lift them from the page. Effects like this that were once only achievable in Photoshop can now be replicated with the CSS3 box-shadow property.

Make a copy of the intro text and adjust the wording to create a brief About Me section under the portfolio elements. Maintain the same font hierarchy and link styling.

Finish off the design with a Contact section at the bottom. Use copies of the existing text to mock up the wording and form labels, then draw a rectangular selection as a base for the input fields.

Open up the Layer Styles window and add a subtle Inner Shadow to give the illusion that the field is inset, then add an off-white Color Overlay to reduce the contrast between the field and the background slightly. Then finally add a #dedede 1px stroke to define the border of the input field.

Duplicate the form field and move it into place as the second input and a textarea element. The great thing about layer styles is they can be scaled to any size without being distorted.

Add a darker grey rectangle the represent the send button. Give this element a quick noise filter to match the texture of the background.

Use the same font styling to add the Send label, except change the colour fill to white, then finish off the button with a subtle drop shadow to help the element stand out.

Simple portfolio website design

This leaves our basic portfolio concept complete ready for part two, where we’ll export the few images we need from the Photoshop document then replicate this design with HTML and CSS before adding the simple code to pull in our Dribbble shots.

March 26 2012

07:00

March 19 2012

08:00

March 12 2012

08:00

Create a Responsive Web Design with Media Queries

If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.

View the responsive layout demo

If you cast your mind back to late 2011, we went through the process of designing, coding and building ‘Typo’ into a complete WordPress theme. The design itself lends itself well to a responsive layout, so we’ll use the HTML and CSS as a base to transform the static layout into a responsive layout that will adapt to various viewport sizes.

Non-responsive layout

When the viewport size of our browser is reduced on the original demo file we’ll see the site is cut off and ugly horizontal scrollbars are added. The idea of a responsive layout is to adapt to these various viewport sizes so the design remains legible. Smartphones and tablets will automatically scale the original website to fit, but creating specific layouts for those smaller resolutions will allow the site to be read easily without the need for zooming.

Common viewport sizes

The first step to creating our responsive layouts is to plan out what resolutions we’re going to cater for. Common resolutions include the 320px portrait width of smartphones, 768px portrait width of tablets, 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. It’s worth mentioning that a layout that only caters for preset resolutions is often referred to as being ‘adaptive’, whereas a truly ‘responsive’ layout will be built using ems or percentages, allowing an infinite level of scaling.

<link href="mediaqueries.css" rel="stylesheet" />

We can then get started with CSS media queries to add the responsive functionality to our design. I’m adding the media queries and additional declarations to a separate CSS file, but they could be added to your main stylesheet.

@media screen and (max-width: 960px) {

}

The width of the original layout is 960px, so any resolution below this value will generate horizontal scrollbars and cut-off the content. Therefore the first of our media queries will target screens with a width of less than 960px;.

@media screen and (max-width: 960px) {
	#container, footer {
		width: 758px;
	}

	#content {
		margin: 0 20px 0 0;
	}

	#sidebar {
		width: 212px;
	}
		#sidebar section {
			clear: left;
		}
		#sidebar #search #searchbar {
			width: 152px;
		}
}

The next most popular resolution under 960px width is 768px to cater for portrait tablet screens. This Typo design is built using a grid, so to stay true to the layout we can simply remove a column to leave a width of 758px. The original layout can then be narrowed down to fit by reducing the margin on the content div as well as reducing the overall width of the sidebar.

@media screen and (max-width: 758px) {
	#container, footer, #sidebar {
		width: 524px;
	}

	header nav {
		clear: left; float: none; overflow: hidden;
	}
		header nav li {
			width: auto; margin: 0 25px 0 0;
		}

	header {
		margin: 0 0 44px 0;
	}

	header h1 {
		margin: 0 0 24px 0;
	}

	#sidebar section {
		float: left; clear: none;
	}
		#sidebar #social {
			margin: 0 20px 47px 0;
		}

	#sidebar #search #searchbar {
			width: 464px;
	}
}

The value of 758px can then be used for the next media query, so anything smaller than this size will trigger the next layout. At this point the sidebar is too narrow to be made any smaller, so instead it can be naturally flowed underneath the main content when the grid is narrowed by a few more columns. This means the actual sidebar div’s width can be increased to fill the width of the new layout and its child elements floated to fill out the extra horizontal space.
Other areas such as the header have become too narrow to hold the logo and navigation side by side, so the navigation elements are altered to span the width of the layout on a new line.

@media screen and (max-width: 524px) {
	#container, footer, #sidebar, #content {
		width: 292px;
	}

	#content article h2 {
		font-size: 24px;
	}

	#content .postinfo li {
		margin: 0 10px 0 0;
	}

	#sidebar #social {
			margin: 0;
		}

	#sidebar #search #searchbar {
		width: 230px;
	}
}

The third and final media query in our responsive layout will cater for extremely small resolutions such as smartphones. This particular layout is narrower than the original content width, so this div also needs altering with a new declaration in the media queries CSS file. The extremely narrow view has dropped each of the post-info links on a new line, but decreasing the margin between them helps repair some of the floats.

View the responsive layout demo

Thanks to these three sets of media queries our website layout is now responsive enough to cater for common viewport sizes and will aid readability by generating a designed layout in place of scrollbars or a scaled view. View the demo and scale your browser to see the responsive layouts for yourself.

View the responsive layout demo

February 27 2012

08:00

February 07 2012

21:00

Know Why Your Website’s Header Is Driving People Away

Whichever website you visit, the first thing that you will notice is the header image of that website. Later on, scrolling down the page or admiring the header image is something that depends on the purpose of your visit. The point is that the header image (or, to be more generic, the header section) is a very important part of any website design. Header images have been an integral part of websites for a long time, but lately original designers have given a whole new life and excitement to header images. It is the header image that initiates the mission of any website and a dull header image might just kill the experience.

Today, we will go through the basic semantics of header image design and how the very default looking header images are still sitting on most websites. We will try to figure out what web designers can do to create jaw dropping header images and use examples to understand how designers are actually implementing original ideas.

Old is no more the gold


Gone are the days when a regular rectangular header image design will be good enough for your upcoming website design. Notice that if your website is very old and has its own fan following then you might not have to experiment with header images, but if you are new in business then you have to do something different so as to attract visitors. I am sorry to say, but the wrapper of the chocolate is an important reason behind you buying that chocolate. Get it?

There are plenty of default designs and plugins available that make it super easy for website designers to come up with a basic header image but that just isn’t helping you out. If you want to be part of this business then get real. Think. Out. Of. The. Box!

It will sound a bit weird if we tag something as default design in today’s website design industry, but unfortunately it is true. The structure that you see above has become, more or less, the default website design for those who want to go live real quick. Register a domain, pick up a template and you will be live within minutes. But, is that of any use? The ready-to-go designs help you go online but don’t help you get the attention of internet surfers. True?

So, how can we actually take our first step toward out-of-box looks? What can one really do with the default header shapes, sizes and designs? Aren’t they supposed to be what they are? Well, they are supposed to be the way they are, but with a little tweaking we can actually make them look super attractive. Here are my suggestions when it comes to tweaking your header images:

Submerge!


Don’t compare this tip with something that pops out of the screen due to its amazing design. Rather, what I am trying to suggest here could well be a simple but unique way to make your headers look different from the rest. This is actually the easiest too, once you are into it.

Look at the header image of Gary Nock. It is more or less merged with the rest of the website design. You will never find such kind of rectangular in shape header images. Rather, such header images submerge with the rest of the design which as a result gives the website design the clean and riveting look. So, when I say “submerge” then I mean merge your header image design with the rest of the website design in a fashion that the old rectangular look of the website is not around to turn off your readers.

Break The “Text Book” Definition of Dynamic Headers


Enough of  the jQuery codes to make your headers look dynamic. Can’t we make them look a bit different considering the fact that almost everybody is either using a jQuery based header or a (good old) flash header.

Check out the above header design from Raskulls. The website has done well to balance the looks of a dynamic header with a clean header image. The end result is a sleek looking header image that does justice to the niche of Raskulls. See, I am not asking you to give up on jQuery or Flash either. What I want you to understand is that it is high time that we start looking for header image designs that are sleeker and different from the rest. You’ve got to stand out to attract visitors.

Ditch the Rectangle


I won’t give you an example in this case as my first tip of submerging the header image with rest of the website design was almost similar to this. See, we are used to the usual rectangular looking header images. As I said before, they have become part of the default website design which is of no use. What if you ditch the rectangle shape of header images and look for something which is different. This is when you will attract attention and that is the sole purpose of your website. True?

Ditch the Header Itself!


OUCH! What was that?

Well, that was getting rid of something that confuses you the most. If you are not happy with your rectangular looking header image design and you are not sure of anything different then why not just ditch the header itself? Why can’t we start with the content directly and use a small square in the sidebar for the name of the website? What is the real problem? There isn’t any hard and fast rule suggesting that headers are a must for a website design, and if it isn’t a rule why do we actually have to stick with them?

Have a look at Sony’s portal displaying its tablets. Sony has smartly left only a little  amount of space on top for the name and menu while the rest acts as the place where content is displayed. Really, if you are not sure about the kind of header that you should use then you will be better off ditching the header. Try it!

Keep Thinking Different. Don’t Give Up!


This is supposed to be the usual tip of any inspiration pointers and it applies here too, but with a slight difference. The point that I want you to understand here is that if you keep trying the different looks for your header image then you are bound to come up with something which is a lot better than the rectangular looking header images. And, trust me on this one, any header shape will look better than a rectangular header image design.

Your hard work and your honesty should be reflected in your out-of-box header image design. This is when visitors understand the seriousness of your purpose and end up giving more time to your website. Also, keep changing your header images. Experiment with different looks and see what leads to a jump in your traffic. Try. Fall. Getup. Try. Succeed. Continue Trying.

Inspiration


Juan Diego Velasco – Web Designer Portfolio

juandiegovelasco-inspiring-header-designs

Giancarlo Fajardo – Creative Graphic Design Portfolio

giancarlo-fajardo-inspiring-header-designs

Duirwaigh Studios

duirwaigh-inspiring-header-designs

N.Design Studio

ndesign-studio-inspiring-header-designs

Octwelve – Blog of designer MeryLuc Melgar

octwelve-inspiring-header-designs

Pixel Cool

pixelcool-inspiring-header-designs

Shaun Groves

shaungroves-inspiring-header-designs

Conclusion


Header images have come a long way. I know plenty of websites that have successfully experimented with header image designs, but I know so many who still go live without proper design plans. Please remember that you might be better off with a simple looking header image design if your website is old with huge visitor numbers. In that case, the visitors are aware of the quality of content that your website produces and this is when an attractive header image is not that important. But, if you are new in business then better take care of the looks of your website design otherwise be prepared to end up nowhere.

February 06 2012

07:00

January 24 2012

11:00

Free Web UI Wireframe Kit

Advertise here via BSA

FYI-UI_WebkitsmSometimes you don’t need to build interactive wireframes, or may not feel all that comfortable in Visio or OmniGraffle. I know there are times I just want to open up Photoshop and start laying things out.

This web UI template kit is made completely with shape objects and in some cases converted into SmartObjects. So they’re totally scalable. There are no usage restrictions but if you find them helpful give us a shout. We love hearing from you!

CLICK TO DOWNLOAD

CLICK TO DOWNLOAD

via

January 23 2012

07:00

How To Display a Message on Old WordPress Posts

If you post helpful information on your blog chances are some of your early posts are now outdated as technologies have changed over the years. Let’s take a look at how we can add a mix of PHP tags to our WordPress themes to automatically add a small disclaimer or warning message to posts over X years old.

The little snippets of code we’re going to add to our theme will allow us to display a message above our post content, but only on posts over a number of years old. We might only want to display this message on certain types of posts, in my case it’s only my tutorials that have become outdated, so we’ll also add a category filter to target only old posts from a particular section of the blog.

The WordPress PHP code

<?php
$post_age = date('Y') - get_the_time('Y');
if($post_age > 2 && in_category('4') ) { ?>

<div class="old-post">
<p><strong>This post was originally published in <?php the_time('Y'); ?></strong><br />
The tips and techniques explained may be outdated.</p>
</div>

<?php } ?>

I’m no PHP expert so I had to do a little Google researching to actually figure this out. I stumbled over Horacio Bella’s Forrst post that provides the basic syntax, I then did a little modification to suit my own requirements.
The first line of code takes today’s year and minuses the year the post was published, which gives the post’s age in the $post_age variable. The script then checks if the post age is over 2 years old and is in category ID 4. You could change this filter using many of the WordPress Conditional Tags.
A line of simple HTML fleshes out a message to the user, explaining that the post is a few years old and therefore the content may be outdated. We can use the WordPress <?php the_time('Y'); ?> tag to automatically enter the year the post was published.
Paste this code into your single.php template file above the <?php the_content(); ?> tag.

The CSS styling

Once the code is in place in the template file and the unformatted message is appearing on the correct posts, it can then be styled up with CSS.

.old-post {
	margin: 0 0 20px 0; padding: 15px 20px;
	background: #e9e9eb url(images/grey-bg.png);
}
	.old-post p {
		background: url(images/warning.png) left no-repeat; padding: 0 0 0 65px;
		color: #717171;
	}

The old-post div is styled up with a textured grey background and plenty of padding around the edges. A warning icon is then added as a CSS background image on the paragraph element and the text indented with some left padding.

January 16 2012

07:00

How To Create a Vibrant Cloud Icon in Photoshop

Follow this step by step Adobe Photoshop tutorial to create a colourful and vibrant cloud icon. We’ll be using plenty of gradients and lighting effects to produce a really cool icon perfect for a modern website design or mobile app.

Cloud icon

The cloud icon we’ll be creating features plenty of vibrant colours to create a three dimensional appearance. A flow of purple to blue provides the colourful base while the highlights help illuminate the icon and lift it from the screen.

View the full size icon design

Open up a new Photoshop document and begin by filling a black circle with the elliptical marquee tool on a new layer. Hold Shift and move the selection to one side and fill a copy, then use the rectangular marquee tool to fill in the centre while aligning the bottom edge perfectly.

Back with the elliptical marquee tool, draw a slightly larger circle and a slightly smaller circle each overlapping the original left and right circles.

Fill in any gaps in the centre to finish off the graphic as a recognisable cloud shape.

Double click the layer to open up Photoshop’s layer styles window and add a Gradient Overlay. Add a third swatch in the middle then change the colours to #300a85, #2555dd & #c8ecff. When choosing colours, avoid selecting tones from the same hue. Instead, move around the colour wheel to create more intense changes in colour, so the tones become warmer or cooler.

Give the cloud an Inner Glow effect to add to the three dimensional appearance. Change the settings to white, Soft Light and 100% opacity, then play around with the size slider.

An Inner Shadow effect can be converted to create a cool top highlight. Change the default fill from black to white, then alter the blend mode to Overlay to allow the colours to interact. Adjust the Distance, Choke and Size to balance between a hard/glossy highlight and a smooth/soft highlight.

Press OK to confirm the layer styles, then CMD+click the cloud layer thumbnail to load its selection. Go to Select > Modify > Expand and enter 5px.

Fill this new selection with black on a new layer underneath the main cloud to create an outline effect.

Open up the layer styles for this black outline and add a Gradient Overlay. Choose similar purples and blues, but enough change in tone so they contrast against the cloud layer. I’m using #571a9b, #4c54e5 and #c0e8ff.

Load the selection of the cloud layer again, then right click and select the Stroke option on a new layer.

Alter the stroke width to 2px using white as the colour, then make sure the Location is set to Inside.

Use the Eraser with a large soft brush setting to delete the lower portion of the stroke outline, leaving a gradual fade from top to bottom. This little touch adds another subtle highlight to the icon.

Dab a spot of black on a new layer at the bottom of the stack, then transform and squash it down into more of a shadow shape.

Split the shadow in half using the marquee and selection tools. Hold Shift to make sure the second half stays on the same plane.

Use the Single Column marquee tool to make a selection, then transform and stretch this selection to fill out the centre area of the shadow with a straight segment.

Move the shadow into place under the cloud to ground it onto the background, then add another Gradient Overlay in the layer styles window. Use darker tones of blue and purple to continue the colours into the shadow. A shadow in reality isn’t black, it is made up of all the colours and reflections that are around it.

Cloud icon

Our vibrant cloud icon is now complete. The gradients and highlights really help create a three dimensional appearance, while the variations in colour subtly give a more realistic feel to the shading.

January 10 2012

10:00

15 Eye-Catching Food & Beverage eCommerce Website Designs

Great eCommerce web design presents an avenue for e-tailers to showcase the true essence of their brand message along with a visual representation of their products.

Presenting sumptuous and refreshing foods and beverages gives eCommerce owners much to work with when it comes to website design. Tantalizing images and a showcase of the associated benefits work well to draw customers in to the purpose behind the website and lead their clicking fingers all the way to checkout.

As you will see from these examples, a great image can go a long way. Warning: Some of these food images are so tantalizing you may find yourself reaching for a snack before the article is through.

1. 4th Street Cookie Company

4th-Street-Cookie-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

The 4th Street Cookie Company sells cookies as a supplementary income source to their physical store. The success of their web design is evident in the eye-catching images of their cookies (makes you want to reach right in to the screen and grab one!) and their easy navigation. Their clever call to action is strategically placed next to the cookie with an arrow. If you click to see the actual site, you will notice a slider that showcases five different varieties of cookies, all with images just as tantalizing as this one.

2. Black Estate Vineyard

Estate-Black-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Simplicity is the name of the game for this website and simplicity is often very effective if done right. This website nails it with its beautiful, elegant typography against the rich, black background. The design just beckons wine lovers to take a closer look.

3. Sanctuary T Shop

Sanctuary-T-Shop-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Though this site has a few “faux pas”, overall it organizes information well and draws the visitor in. The color blocks on the navigation offer a creative style to what could be a boring menu. The navigation also shows that square-edge elements can be effective if done creatively. The products are showcased in the slider and right below the main graphic to grab visitors’ attention at every turn.

I also like the “Bestselling teas” which is a great way to keep potential customers on the website. People love to read reviews or look at highly-rated products.

Two things I would adjust in this website are the logo (it’s somewhat lacking) and the main graphic image that mentions the season “autumn”. Using the seasons is a great marketing ploy which I will show you in another example, but it ceases to work if you do not update the graphic. This can actually work against you.

Do you see any other possible improvements?

4. Marie Catrib’s

Marie-Catribs-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Again, I love the mouth-watering images that make you want to research the site more. Also, the typography is a nice addition to the overall light and fun attitude behind this website. It’s simple design is effective and the products are showcased well overall.

The product pages are also designed well with ingredients displayed prominently, an important addition for the healthy-conscious customer who visits this store. Also notice the context-sensitive navigation options “More info” and “+ Cart” that appear when users hover over an item on the home page.

The only element I would change is to make the image on the home page “clickable” to direct customers to the order page for that particular item

5. CellarThief

CellarThief-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

This website is very creative and for that reason it is often showcased on many blogs as an example of the best eCommerce website design. The designer’s use of textures and color is superb and the associated content (tell your friends, choose a wine, feel good) is displayed with right-aligned text to remain secondary but also pop on the page.

The creative background brings the brand to life and the “wine of the day” is an effective call to action expressing urgency for customers to take action before the day is over. If you click to the product pages you will see a well-organized layout that focuses a lot of copy in well-defined areas.

6. Gevalia Coffee

Gevalia-Coffee-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

The font on this website may appear a little larger than most, but some newer sites are using these fonts along with grand logos and images to nail their message right from the start. The size of every element works well together. If the logo were smaller or the font any larger, it may have thrown off the whole appeal of the site.

7. Ghirardelli

Ghirardelli-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

I am showing this website because I liked the images on the slider and the concepts behind them. They not only showcase Ghirardelli chocolates as ultimately decadent, but they also display images of the benefits of the product and how it can be used. The slider shows images of Valentine’s Day recipes and also urges the customer to buy the chocolate so the recipe turns out exactly as shown.

8. Teasta

Teasta-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

The choice of bright color works well for this brand and it captivates the customer. The “Buy Now” button is prominently displayed in the center graphic and the secondary content works well with this clean design.

Social interaction is also important for this brand and the use of the Twitter bird with clever content entices customers to follow the brand to land extra coupons and discounts.

The navigation is well thought out, although I would change it up a little so it stands out more.

9. Nuts in Bulk

Nuts-in-Bulk-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Apart from some extra clutter, I chose this site for many reasons:

  • Creative, eye-catching logo
  • Nice, easy to locate navigation menu
  • Content segmented into separate blocks to streamline the design and make it appear clean.
  • Green call to action buttons in each block which stand out from the page
  • Slider showcasing products with enticing copy and images
  • Phone number displayed in orange color to pop out from the background but not overtake the design.

10. Snapple

Snapple-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

I am showing this website for creative inspiration. It is not a design I would recommend for all eCommerce stores but it works for the popular brand Snapple. Since Snapple is already a worldwide brand, it was a good idea to take the web design out of the box and create something unique.

The design offers visitors a chance to connect with Snapple on Facebook, Twitter, or via email. The website contains interesting, interactive elements that will keep visitors on the site. The site made me wonder around a little even though I don’t drink Snapple.

11. Purdy’s

Purdy's-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

I like the simplicity of this site and how all the elements pop against the purple background. I am a strong believer of the “less is more” approach for eCommerce stores and I think this strategy is displayed here nicely. The subtle leaf design in the background is also a nice touch. Also, pay attention to how the website uses the season to stay relevant and interesting. The New Year is showcased to entice visitors to stay and shop.

12. Mom & Pop Corn

Mom-Pop-Corn-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

This site is a little grunge for eCommerce but I wanted to show off its creativity. This design style would most likely appeal to a younger population with an artistic bent.

I can appreciate the creative logo design and placement as well as the fun font and eye-catching navigation. If you look closely, the design still follows a typical layout with the main image followed by three sub-sections; however, it has been injected with a lot of personality that will appeal to a particular demographic.

13. Chocomize

Chocomize-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Though there are some design elements I would change, I liked the color scheme of this site. It is also great for conversions to display any noteworthy clients as this site did below the main slider. I would have showcased them a little differently, but the strategy is a good one nonetheless.

It should also be noted that this site does a good job at passing the 6-second test. Show your website to people for six seconds or less (anywhere from 4-6 is good) and then ask them if they know what the site is selling. This site was successful at making a complex and new concept like customized chocolate easy to understand and grasp within the first few seconds.

Cookies-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

Now that you are probably running to the cupboards to fill your mouth with some chocolate, hold on for just a few more minutes…

I chose this website to show how you can change the area around the slider to showcase more products. The orange call to action buttons are also popping out from the design. Additionally, the BBB logo is displayed but not obstructive to the overall design.

15. Cheryl’s

Cheryl's-15-Eye-Catching-Food-Beverage-Ecommerce-Website-Designs

A few reasons why this website design is successful:

  • Free shipping prominently displayed
  • Side navigation well-defined and catches the eye
  • Large banner displays advertising and draws the eye there while separating content nicely.
  • Font is easy to read and scan and separated from design elements well

A few negatives:

  • Cart symbol small and lost on background
  • Contact information not visible
  • Search bar is very small

When it comes to website design, sometimes two or three or even four eyes are better than one. Do you like these eCommerce website designs? What improvements or design changes would you make to these sites, if any? We would love to hear your opinions!

January 02 2012

07:00

December 29 2011

05:00

Cognitive Dissonance: Why Your User’s Brains Hurt

Cognitive Dissonance and The Choice Paradox

Cogni-Huh What-O-Nance?

A powerful cause of dissonance is an idea in conflict with a fundamental element of the self-concept, such as “I am a good person” or “I made the right decision”. The anxiety that comes with the possibility of having made a bad decision can lead to rationalization, the tendency to create additional reasons or justifications to support one’s choices. A person who just spent too much money on a new car might decide that the new vehicle is much less likely to break down than his or her old car. This belief may or may not be true, but it would reduce dissonance and make the person feel better. Dissonance can also lead to confirmation bias, the denial of disconfirming evidence, and other ego defense mechanisms.

Options

options-laptops
Everyone likes having options, right? I mean, if there was only one car ever made, regardless of how well it was built, or how cool it looked, there is nothing fun about being forced into a decision.

We want to personalize! We want the red convertible with the tan leather interior and the iPod hook-up, with custom rims. Green just won’t do! It’s this definitive decision that makes us happy, even ecstatic when we find the perfect [insert your idea of perfect here]. However, it is this same choice that can ruin an otherwise perfect experience.

Observed in many cases is the paradox that more choices may lead to a poorer decision or a failure to make a decision at all. It is sometimes theorized to be caused by analysis paralysis, real or perceived, or perhaps from rational ignorance. A number of researchers including Sheena S. Iyengar and Mark R. Lepper have published studies on this phenomenon.[2] This analysis was popularized by Barry Schwartz in his 2004 book, The Paradox of Choice.

I Want More Options… No, You Don’t

We are very busy people, we have schedules to keep, places to be, things to do. We don’t always have a gratuitous amount of time to make an informed decision and rely on what we’re presented with to help us make that choice. User Interface Designers, UX Professionals and hopefully “decision makers” know the value of a persons time, and ensure choices are as simple as possible.

Consumers have been bred to think more is better. We’re all guilty of it in some way or another but the fact is, choice suppresses conversion. We are more likely to be unhappy with our decision if we have too many options to choose from.

If we can not limit the number of options, there needs to be some method to narrow them down. This could be anything from a customer rating system to, putting the most common choice(s) up front.
options

Conclusion and Sources

Sometimes we can’t take away the number of options we’re asking the user to choose from. But we can try and solve for the best possible outcome. By giving the user a means to drill down their choices, or offering up a “Best Value” or “Popular Choice” we help minimize cognitive dissonance thus giving them a richer user experience.

When Choice is Demotivating: Can One Desire Too Much of a Good Thing?
Cognitive Dissonance Wiki
Changing Minds

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



Cognitive Dissonance: Why Your User’s Brains Hurt

December 26 2011

07:00

December 23 2011

10:00

Future Of Interface Design – Touchscreen Or The Legacy Grandpa Style

My grandpa, somehow, still prefers raw milk (which includes milking the cow himself) over pasteurized milk. He advocates that “the human race existed long before pasteurized milk was heard of.” I won’t be discussing the benefits of pasteurized milk, but I wanted to shed some light on human nature which finds it hard to shed its old skin in order to wear the better one. He does drink pasteurized milk daily as we don’t have cows in our backyard yet he continues to rant about his good old days of raw milk. Somehow, I found Bret Victor’s view on Interaction Design almost related to my grandpa’s situation. It was more of a love to hate you situation.

Why the Rant?


Well, Interaction Design has been around for quite some time but it was Microsoft’s Vision of Tomorrow that gave the term its necessary fame. I am not sure if we can call it a vision or stupidity but it surely was interesting. Since then Interaction Design has faced many critics, some of those actually ripped apart the actual vision itself. I won’t count Bret Victor in the category of critics who rip apart the concept of Interaction Design, but he was quite close. Before we move on, I want you to get the feel of Interaction Design. See the video below:

To summarize Victor’s article, if Interaction Design was to be our future then the nerves on our finger tips will become jobless. Yeah, he did a great job of explaining how we forget that it is a work of art when we can use our hands turn a page of the book and remind our brain that we actually turned two pages instead of one. Its art when you drink water, pick a bag, use a phone and all those other daily tasks. True. But does that mean we give up on technology that makes our life overly easy just because we want to feel the number of pages we flipped? I mean, come on, isn’t that old school? If that was the case, why did the world go mad for the iPad? Just because it was Steve’s vision? No. Really. It is because they love the ease of use. Get it?

Let me quote a comment from Reddit to support my thought:

Hands are so yesteryear. The future in interaction is through voice and mind. Hands are just an intermediary between your mind and the outside world. As the author of the article said, without feeling you’re paralyzed in a wheelchair solving quantum mechanics problems but YOU’RE STILL WORKING AND INTERACTING BECAUSE OF YOUR BRAIN!!

The future of human interaction is for technology to try and figure out what you actually want to do as opposed to what you can just figure out how to do by sliding your finger around on a device. This is where stuff like Siri comes in. Google has been working on this for years as well.

The author himself has a woefully outdated vision of future interfaces, since future interfaces will be no interface at all. You’ll just speak to a machine or plug in and it will give you what you’re looking for without figuring out where some UI menu is.

Why it isn’t about touch only


You know, I still prefer a BlackBerry Bold over an iPhone just because the Bold has a physical keypad and my work involves a lot of writing. My typing speed somehow decreases if it is a touch phone though the difference has started to blur. I know that someday I will move on towards the iPhone because of its rich features. The Bold does lag behind and we all are aware of this fact. But, the point is I don’t use the BlackBerry keypad due to the touchy feel of it. It is just that, for now, I feel that it is comfortable to type using a real keypad instead of a touchscreen keypad. Moreover, I know that tomorrow I will not think like this. The transition has to occur because it is for good only.

What Victor forgot was the added features that come with Interaction Design. See how the lady has been introduced with the place of her next day’s meeting? I’ll love it when Interaction Design Technology introduces me to the hotel building where I will be enjoying my honeymoon in a matter of few minutes. Will it be different? The vision of my destination itself? I agree that my hands won’t be able to tell me about the fact that I flipped three pages instead of one, but the technology will, so why care so much? Interaction Design Technology isn’t kicking away the prospects of human-to-human touch anyways. It is just feeding on our thirst for comfort and pushing it to the next level.

Here is another situation. The guy in the picture never had to open the refrigerator to find out what was in there. He saved a few seconds and didn’t even transfer the few thousand germs that his finger tips were carrying. Isn’t that interesting? Why taste milk to see if it is still good? I would rather let the technology tell me the same. If our technology can be as good as that then what is the problem with merging the same with Interaction Design?

Those are just two examples of what Interaction Design can do for us in future. I agree that we will lose the real-touch feeling when such tools take control of our lives, but that will be for the best (most of the times.)

Another comment on Reddit hails my thoughts:

While the author is right that these interfaces may not be truly revolutionary objects, he kind of misses the point. The real revolution of many of these future videos is that computing will become ubiquitous and interconnected. It’s not just that I have a fancy phone, but that my phone talks to the arrival gate kiosk so it knows I am at the airport and can automatically hail me a cab. The cab itself has a computer and display mounted into the windows that talks to my phone and can point out my local destinations as I drive by. While we are making small strides towards realizing these goals, the vision is that all of this will be seamless and effortless. The idea is not to create a novel vision of the computer, but instead create a vision of how we will do computing.

Far-Fetched Alternatives


Remember Iron Man? District 9? What do these two movies have in common? My God, did you just say “the iron suits”? Please! I was pointing towards the 3D style of computing which was used in both these Hollywood flicks. Of course they are far from real but isn’t almost everything that we discussed above also far-from-real? Still, the buzz is with these ideas. Then, why not the ideas that were pictured in Iron Man? Touch. Feel. Play…live inside the system. It is about how close these machines come to reality and now far we go with our imagination. Also, an Iron Man-like display will surely help Victor reconsider his rants against the loss-of-touch-styled-interactive-designs!

Lastly, this write-up wouldn’t be complete without the mention of Apple’s overrated Siri. I agree that Siri could well be the first step towards Artificial Intelligence but that will be it. There is a lot to come in terms of Artificial Intelligence and I would love to live till the times when an Iron Man-like Artificial Intelligence becomes part of my daily life. God, are you listening?

Conclusion


Well, the topic of this debate is neverending still I think the end result is more or less clear already. We will be moving towards Interaction Design Technology at some point of the time. Time will tell if humans are able to gel with it or continue to criticize the losings of human touch. See, I am not against the idea of human touch. I will still want to feel my mom’s hand instead of touching it over a glass screen but that doesn’t mean that I don’t want an iPad like technology in my kitchen via which my mom helps me cook my dinner. It is fun and it is almost real. Agree with me? I hope my grandpa agrees with my thoughts!

December 19 2011

07:00

December 12 2011

07:00

How To Create a Stylish Drop Cap Effect with CSS3

Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.

CSS Drop Cap

The design we’ll be creating features a large drop cap at the start of a block of text. The actual drop cap effect will be created with the :first-letter selector, while the extra effects are added with the help of CSS text-shadow.

View the CSS drop cap demo

The HTML structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Drop Shadow</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<div>
	<p>You either die a hero or You live long enough to see yourself become the villain.</p>
</div>

</body>
</html>

Every web project begins with the basic HTML structure. For this demo file the HTML page is made up of the usual Doctype and Head elements before the quote is laid out as a basic paragraph element. We’ll be using CSS selectors to create our drop cap so no special IDs or classes are required.

The CSS styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: "Chunk", Sans-Serif; color: #fff;
	background: #566074 url(bg.png);
}

@font-face {
	font-family: Chunk;
	src: url("Chunk.ttf") format("truetype");
}

div {
	width: 730px; margin: 150px auto;
}

The CSS demo file begins with a reset to remove any default browser styling, then the main font styling is added to the body. You’ll notice the use of the “Chunk” font; this custom font is being added with the help of @font-face.

p {
	font-size: 50px; line-height: 80px;
	text-transform: uppercase;
	text-shadow: 10px 10px 0 rgba(255,255,255,0.07);
}

Now the slab-serif font is in place the size and line-height of the typography can be set. The text-transform property ensures all the text appears in caps despite how it is written in the HTML file, then the text-shadow property is used along with RGBa colour values to add a subtle ghost effect to the text.

p:first-child:first-letter {
	font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;
}

Now the main text is in place we can finally get around to styling up the drop cap. The first letter is targeted with the handy :first-letter selector, but to avoid having drop caps on every paragraph on our page we also need to use the :first-child selector to target only the first letter of the first paragraph.
Just four CSS declarations are needed to correctly style up the drop cap. First the letter is increased in size so it’s large enough to span across two lines of the paragraph, then it is floated left to allow it to break out of the paragraph’s flow. A touch of margin on the top and right help tweak the drop cap into place and add some space between this first letter and the remainder of the sentence. Everything looks fine in Firefox so far, but if we test it out in WebKit browsers (Safari & Chrome) they both seem to place the drop cap higher than Firefox. We can easily fix this with an extra line-height declaration. This makes no difference to the Firefox version while lining everything up in Safari and Chrome.

p:first-child:first-letter {
	font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;;
	text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}

The basic drop cap is complete, but traditionally drop caps come along in all kinds of fancy styling. We can add some cool effects of our own with the help of the CSS3 text-shadow property. A duplicate of the text is created and offset by 4px, then a second duplicate is created at 7px. When the first duplicate is set to the same colour as the background it creates a cool retro style effect. For more drop cap effects check out my old text-shadow effects post.

The final drop cap effect

CSS Drop Cap

View the CSS drop cap demo

December 07 2011

21:00

40+ Creative Contact Forms That Will Inspire You

We have previously posted many collections about inspirational contact forms, but in this post we have collected the most innovative and amazing contact forms which you can bring into play for inspiration in your own designs. Contact forms have developed very much since the days of plain featureless HTML forms. This applies especially correct for portfolio websites and design agencies.

The modern designs are attractive and can be tremendously innovative. In addition to the regular fields that everyone anticipates, forms can be elevated by adding additional features such as maps, social networking data and interesting illustrations. A solid and aesthetically pleasing contact form assures the viewer’s trust in the person or company at the back of the site and improves the entire experience.

Here is the full collection after this jump. Enjoy!

1. Aterlier Detour

Here the contact us form is placed at the bottom of the page when you click Contact button. The design looks different and unique when you compare it with others.

Aterlierdetour

2. Try Triangle

Here you will find that the contact us form is more like a paper form that is placed on the table.

Try Triangle

3. Asvalia

A post card like contact us form that gives the whole page a very unique and visually calming look.

Asvalia

4. Foto Marcol

Slightly vague but truly creative contact us form that sets itself apart from the identical contact us forms.

Foto Marcol

5. Square 1 Media

Yet another example of beautiful and visually attractive contact us form that encourages your visitors to contact you.

Square 1 Media

6. Stan Gursky

Extremely creative contact us form.

Stangursky

7. Ctrln

Here, the form has been given a nice look by placing a post box at the end that connotes the communication through written messages.

Ctrln

8. Denise Chandler

This form holds a different color and that is red which grabs the attention on the first look and signals that this is something you should pay attention to.

Denise Chandler

9. Carsonified

Simple, uncomplicated and easy to complete form that does not ask too many details.

Carsonified

10. David Hellmann

An envelope is placed as the background image with the form in this website giving it a very personal touch.

David Hellmann

11. Step2reality

A cute image is used at the side of contact fields that implies the delivery of written messages.

Step2reality

12. Xruiz

The creative web designer made use of his creativity and designed this visually compelling contact us form.

Xruiz

13. Silly Poems

No big images, no huge typography; just a simple contact form with a nice and simple background surely is enough to grab the attention.

Silly Poems

14. Fseid

This contact us form looks like a notice board where you can post different notices with the help of paper clips and thumb pins.

Fseid

15. La Masa Mimatta

Somewhat mysterious yet appealing form that does not ask for much information to send your query to the webmaster.

La Masa Mimatta

16. Fundo Los Paltos

Contact details are also provided in case if you want to contact them over phone or though fax along with the email.

Fundo Los Paltos

17. Five Cent Stand

A very dynamic contact us page with loads of interactive elements to create user interest in the website.

Five Cent Stand

18. Red Bull Soapbox Racer

A casual and unfussy contact us form that is different from all the other forms in this collection. See the simplicity of this contact us form.

Red Bull Soapbox Racer

19. Camping ilfrutteto

This contact us form is simplicity at its best.

Camping ilfrutteto

20. Svn2ftp

A very cool and fresh approach to design a contact us form is apparent in this website. You can see how interactively the designer has used certain elements to bring this web design to life.

Svn2ftp

21. Just Dot

A very unusual contact us form that is present at the end of the web page. You simply have to navigate to the bottom of the web page to find this lovely contact form.

CSSRemix

22. In my Bubble

You may feel like as you are writing on a paper but actually you are not. The design really is very marvelous and imaginative.

CSSRemix

23. Harmony Republic

Harmony Republic also designed a very simple and clean contact us form.

Harmony Republic

24. Corvusart

A nature inspired contact us form with a beautiful color combination.

Corvusart

25. Rescueseo

This contact us form is presented in company with SEO packages choices that you can pick for your project. A very unique approach.

Rescueseo

26. Reverend Danger

Simple and uncomplicated contact us form that lets you quickly fill the required fill in order to send your query to the webmaster.

Reverend Danger

27. Webfoo London

New and innovative approach of placing contact us form at the top of the web page emphasizing its importance.

Webfoo London

28. Melonfree

Melonfree makes use of the concept of minimalism for its contact us form and keeps the design simple but appealing.

Melonfree

29. Hit Digital

Quick and efficient contact us form without much complexity and confusion. This is truly helpful for such websites that expect their users to contact them more frequently.

Hit Digital

30. Zeropixel

Zeropixel contact us form is somewhat different from the others with respect to its design and color usage.

Zeropixel

31. 1minus1

1minus1 does not have a separate contact us page but rather the contact us form appears like a pop up window on your screen when you click the contact button present at the top and bottom of the page.

1minus1

32. Syropia

Syropia also uses the concept of mailing envelope to design their contact us form, looks simply ground-breaking.

Syropia

33. Agencyp

Agencyp contact us form appears to be identical to that of others but in actuality it is not. The website will take you to the contact us form in a sliding style once you clicked the Switch Board button.

Agencyp

34. Freestyle Night

Extremely innovative approach to design a contact us form and taking it to the next level by just mixing up some innovation and creativity.

Freestyle Night

35. Ultranoir

Ultranoir has designed its contact us form by keeping the concept of creativity and simplicity intact, and has successfully created this awesome contact us form.

Ultranoir

36. Cplx

Send messages in the clouds; this is what this design speaks about. You will like the originality of the designer with which this form has been created.

Cplx

37. Bio-Bak

The most unusual and innovative contact us form in this collection that was designed with an out of the box approach.

Bio-Bak

38. Lunalunerafestival

Write your message on the piece of paper, fill you name and email address in the envelope and send it to the webmaster. Isn’t it interesting?

Lunalunerafestival

39. ElectricPulp

In addition to the contact us form, other details such as phone number and email address are also provided for the users to contact them directly.

EletricPulp

40. Fabric Adecaricaturas

A somewhat ugly caricature is there with the contact us form, I don’t know for what but somehow it completes the overall look.

Fabric Adecaricaturas

41. Z-Index Media

Again the concept of a letter is being applied to create this contact us form. The design is simple yet speaks volume about itself.

Z-Index Media

42. Social Snack

Social Snack also utilizes another interesting and creative approach to get their contact us page appear different and unique from the rest of the contact us forms.

Social Snack

43. World-Arcade

The contact us form appears when you click on the Contact button asking you name, email address and your message that you want to send.

World-Arcade

44. Hybridworks

In this contact us form, you will see that the letter box is the only graphic element. Despite that the web page looks visually interesting and appealing.

Hybridworks

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.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...