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

January 13 2014

14:00

Jimmy Neutron and The Anatomy of the Atomic Design

If Jimmy Neutron were real, could he become a pretty decent web designer? Of course, he would.  For starters, he knows the anatomy of the Atomic Design. He could be designing the best web pages you will ever see, and make your eyes shed blood out of extreme admiration of his designs. And you’ll probably wonder why he is that good.

Well, for one thing, Jimmy Neutron understands a fundamental yet commonly unappreciated principle in web design. He knows how to work on a very potent tool to his full advantage. Using this tool, he could easily design mock-ups and code them without difficulty.

And you know what, you don’t need to have a three-digit IQ to do that. You won’t even need any intricate knowledge of quantum physics for that matter. You just need to have an open mind and some resources. In fact, you just need the basic knowledge of the average guy. Yes, an average web designer with enough creative juices. You just need to master the principle of the Atomic Design. Yes, you read it right, and no, you are not in a physics or chemistry class- the secret is Atomic Design.

From Brad Frost (http://bradfrostweb.com)

From Brad Frost (http://bradfrostweb.com)

Atomic Design is the logical arrangement of design elements into groups for easy organization. To put it in simpler terms, we learned in high school that atoms compose every piece of matter. These atoms, when combined together, form molecules, which ultimately make up the entirety of the universe. In computer language, Atomic Design is basically the method of breaking the interface into smaller components. It is to understand how each part of the page works and how can it be mixed with other elements. These elements are, as we all know, the life and blood of the whole web page.

In this design, developers could style and separate the rudimentary modules like placeholders, inputs, text boxes and combine them into a single bunch. This methodology can be applied to elements like navigation sections, text and icons, and anything that is more likely to be used with regularity. This will most likely improve the speed to a more efficient workflow in coding and designing. This will also prevent designers and coders to be sick and tired of their jobs because everything seems so cyclical.

Basically, the Atomic Design is used to deliver a quick, easy and clear method of creating design systems. Designers could use the concepts of the Atomic Design to make their clients understand how the website will flow and how will it look like. It gives designers the ability to make the abstract concrete, make the intangible, tangible, the unreal, real and the impossible, possible. This leads to designers being able to create consistent, scalable and responsive pages.

Methodologically, Atomic Design has five levels:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

Atoms

Atoms are the most fundamental building blocks of matter. Without them, nothing will probably exist. Similarly, in the realm of page design, atoms are the building blocks. They are the ‘little guys’ who make up the whole page. Individually, they count as seemingly senseless codes, but together, these little guys can rock worlds. With a single code missing, the whole design will fall. Want me to prove it? Well, you might remember that one night when you are coding a page and something’s not working. Something like an image that is not showing up. Remember how you relentless uttered “Why didn’t I see that” because, after hours of looking at your apparently perfect code, you realize that there was a stray ‘</’ symbol in the way? That’s how these little guys can mess you up, so don’t underestimate them.

Examples of atoms in web interfaces are the HTML tags like ordered and unordered lists, links, labels, inputs and buttons.  Design elements like color palettes, fonts, images, shapes and many more are also considered atoms.

Molecules

It would be far more exciting for a designer to finally see the design realized in a browser. When your HTML and CSS codes finally match the mock up you have imagined, when you finally see the design you thought of for hours, then, that is something to be happy about. You might not know this consciously, but what you were doing was actually combining atoms together!

Molecules are the combination of atoms, (which in our case, design elements) on a page. Example, when a form label, an input or a button is taken as single individuals, they will not make any sense. They will just be codes that are floating to the vast randomness, but once you combine them, they start to be something good. The form, label, input and button suddenly become a search box.

Organisms

Combined together, molecules form up organisms. These organisms are extremely complicated than those simple molecules which make them. The elements of the page combined together, for a specific function and in a specific location could be considered an organism. They are the particular sections in web interface.

Organisms are composed of varying and similar molecules. The variety and similarity give dynamism to the design. An organism cannot just be made up of images or colors alone. They are an excellently crafted juxtaposition of elements, all aimed to beautifying the whole design. For example, a company logo, a navigation bar, a search form and contact links are placed in a single masthead organism because their specific function is to act as the primary means of navigating through the web page.

Tip from Brad Frost http://bradfrostweb.com

“Building up from molecules to organisms encourages creating standalone, portable, reusable components.”

From sbrinzo.deviantart.com

From sbrinzo.deviantart.com

Templates

Templates are not physical nor chemical jargon. They may be off-track to the analogy, but they are basically with a purpose. A template is a tangible formation of organisms performing different roles. They are like families or communities of web elements woven together to form web pages. With templates, web designers are now starting to see clearly what comes out of their efforts.

What’s good with templates is, unlike atoms, molecules and organisms, they are concrete. Meaning, they could be presented to the clients without any fear of being shouted at. Of course, if you are working for a specific organization, you would never, even in your most drunken night, present a template which is composed of a single atom. Your boss would probably roast you alive. You will, of course, present him a tangible design. He needs to see the page in a nutshell. Unless, he won’t hire you ever again. Trust me.

Pages

Pages are the real thing. If in the templates, you are tentatively substituting elements in lieu of the real content, pages have the real content. This is the final level of the design, where everything needs to be real. This is to condition the mind of client about what the viewer sees as it should be.

At this level, all the efforts of the collected atoms will see their fulfillment. This will manifest all the elements working and jiving together to give the user an experience of a lifetime.

Conclusion

The Atomic Design methodology is not formulated to eradicate your daily workflow. It means to improve it. Having a faster, more efficient and better workflow is as good as getting a promotion. That said, you don’t have to be Jimmy Neutron to try this kind of approach, so what harm could you possibly have?

November 05 2013

14:00

10 Extremely Beautiful Websites for Your Inspiration

Browsing the Internet is fun. Aside from the seemingly limitless information that is available for the taking, you could see art concocted with usability almost everywhere. Web designers have immensely evolved in their creative means to get through you. They have devised new designs to make the content of the website juggle with its design. This makes their clients and the market of their clients benefit from the art and the content that is spilled beautifully in the canvas of the World Wide Web. But the clients and the market are not the only people who benefit from this artistic explosion. Other web designers also benefit from this. The inspiration that has overflowed on the Internet has made a lot of artists do better, and learning, in this particular case, is through modelling.

I managed to gather a list of eye-popping and beautiful websites that would surely give you inspiration for the next project you’ll be working on. These sites are, in my humble opinion, well-designed for their cleanliness, usability, cleverness and aesthetics.

1. Ogilvy One Worldwide

When I first came across this site, my eyes figuratively popped out of their sockets. The simplicity of the design is amazingly shown while it focuses on the main use of the website. It does not involve any 3d images or skeumorphic design. It focuses in the content and how is it delivered in the simplest yet prettiest way.

As you lay eyes on the site for the first time, a beautifully shot header image will welcome you. It’s purposively blurred to emphasize on the tag line of the company. The designer did not use any fancy 3d scheme or used drop shadows. He was content in superimposing the text as it is and it produced beautiful results.

10-webistes-that-will-make-your-eye-pop01

Then, as you scroll down, you will be awed at how each item just fades in. They appear as if you are literally taking a walk in their office, or watching a very expensive TV ad. In addition, the content is presented in a readable and logical way. How it is easy to navigate makes it better. You can browse each segment of the page by clicking on the diamond shaped bullets found of the right edge of the screen. This ensures sure that the content is surely delivered and understood by the reader. It also used flat design images and a minimalistic approach in arranging the data. Ogilvy’s site is also responsive; meaning any given size of the browser will not affect its scaling and positioning. This made it more beautiful and trendy.

10-webistes-that-will-make-your-eye-pop03

10-webistes-that-will-make-your-eye-pop04

What I love the most about this is the footer area (or the most-bottom part of the page). Triangular and diamond-shaped images appear and are arranged in a good way. It just gives a sharp and intelligent feel in the whole site.

2. Juliana Bicycles

If you prefer to pop eyes with photography-infused web design, this site is a good candidate. The owners invested on photography as their slideshow. This site is a good inspiration for people who are good in both photography and web design.  The photos they took are exquisite and truly manifests majesty in the simplest way imaginable.

10-webistes-that-will-make-your-eye-pop05

It also has a trendy navigation button. This is located at the top left corner of the page. This is very good thinking because it does not, in any way, block any image in the header section because it is hidden in a button. Also, like Ogilyv’s page, this one is responsive, which makes it good for touch phones and tablets too. (I loved it!)

3. How far is it to mars?

All that I could say with this website is it’s clever. It used pixels to measure the distance of the Earth to the moon and to Mars. Well, it’s pretty geeky for someone who loves the outer space. But for web designers? Well, it’s a good wake up call to use the theme of the website to produce clever designs. It’s a wakeup call to think more and think beyond the design.  The designs that will make your viewer go like, “Oh my goodness! Why didn’t I think of that”.

10-webistes-that-will-make-your-eye-pop10

4. Etch Apps

Etch apps is my personal favorite. It’s uniquely designed. The website is influenced by the Metro style. This mainly popularized by Windows 8 and is derived from the Swiss-style design. It is usually characterized by square blocks acting as containers for menu and content.

10-webistes-that-will-make-your-eye-pop11

In this website, the principles of simplicity and minimalism are very much reflected. The whole layout suggests organization of data and the website’s function to bring content. It focused more on directing the flow of information rather than using complicated images. It also used eye-relaxing images to sustain readership even for a long time.

What I like about this website is how everything fits in a single web page. Unlike the conventional home pages, which mainly act as a portal to different links within the website, Etch’s home page presents all elements at once. As you scroll through the page, you will be amazed at how they managed to place all content in the shortest and artisitic way possible.

Bonus: that contact icon located at the upper right corner of the page rocks!

10-webistes-that-will-make-your-eye-pop12

5. Boat Studio

This page literally brings color to toneless images. The website also showcases amazing photography in their layout. These images are arranged in the Metro style like etch. The only difference it has is that it used the hover option very ingeniously.

As the website loads in your browser, you will be able to see monochrome images arranged in block. They may seem boring, except that they are taken artistically. But they still could be boring because of their lack of color.

10-webistes-that-will-make-your-eye-pop14

Not until you hover them. You’ll see the pictures breath life. They will slowly have colors and be more beautiful.

6. Black Virgin

This is not some racist porn stuff. It’s a creative website designed to make your ears and eyes pop out.

Black Virgin’s feature starts with the cool lightning-bolt-enclosed-with-a-diamond-shaped-container loading screen. It gives you a forethought of how the site looks like. What I also like with Black Virgin is that everything that you could ask for is located within one page. You won’t go looking anywhere, or waiting for the page to load up. Everything’s in one page.

10-webistes-that-will-make-your-eye-pop15

7. LayerVault

LayerVault is one of those website where I could tell myself, “I wish I had the mind that designed it.” It’s simply alluring to the eye. Layervault’s use of green colors topped with flat design sprinkles. The website clearly used the flat design principle to their advantage.

10-webistes-that-will-make-your-eye-pop17

10-webistes-that-will-make-your-eye-pop16

What makes LayerVault a member of this list is that it uses animations that are cursor sensitive. The animation follows where you point it. This is to induce some interactivity between the site and the user thus ensuring more content reaching him.

8. Builtbybuffalo

When the world goes for circles, squares and triangles, builtbybuffalo used hexagons. He tried to be different with his flat design principle. The designer tweaked the design making it a more attractive page. It did not go mainstream with the conventional shapes used in web design but explored it at took  it to a better field.

10-webistes-that-will-make-your-eye-pop20

I also like how the site displays its stats! The use of circular data panels gave touch and a creative pinch to the whole page. It’s like seeing a car dashboard where you could see if how fast you are going, the fuel rate of your car and the like.

9. Lorenzo Verzini

This sign is drawn in flat all over. It manifests how a designer is able to use flat design to his advantage. In this website, Lorenzo was able to apply all the elements of the flat design. He had used simple images with no 3d settings or so. This was manifested on how the images look simple and easy to make. It also was able to use the colors well as they blended perfectly, producing a sense of consistency in the whole site. Spacing was not a problem as well because the site is clearly able to breath because of the ample white space it gave.

10-webistes-that-will-make-your-eye-pop18

10. Stuart Regan

If you want simple, this is the perfect guy. His site is built to manifest extreme simplicity as the menu is located within a few pixels of space. It also gives you a very minimalistic feel as not all the space was bothered to use. This just proves how this site is simple, both in design and in purpose.

TIP: click on the center image on the web

10-webistes-that-will-make-your-eye-pop19

These designs should always act as guides to improve your design. Sometimes, all you need to make that creative brain of yours to work is some inspiration! Keep trying until your eyes pop, or more so, until you make other’s eyes pop too!

July 24 2013

13:00

40+ Flat Web Design for Your Inspiration

For the last couple of months flat web design has been really a huge topic in the web. Up to now, it is steadily dominating the web. From UI, latest portfolio update, icons, and even the top web design blogs are now adapting flat web design.

So why many designers adapting this style?

Flat design makes things free from distractions, eliminating heavy background images, swirls, grunge that makes everything cluttered. It’s very easy to navigate, since there are no more gradients, drop shadows, glows and bevels. It gives more focus to the text, making making everything readable from big screens down to mobile.

Okay, enough talking. Time to check our collection of flat web design for your inspiration!

Agency

Blocklevel



Nitrografix



Conversionforge



Madebyfibb



Fhoke


PSD2HTML



Pexelplant



Playgroundinc



Northbounddesign



App

Sumall



Nextr



Geckoboard



Numbrs



Triplagent



Inky



Kippt



Publiq



Product

Winds Phone



Fitbit



Wistia



Mailchimp



Teamsort



Yourkarma



Fusionads



Kinhr



Portfolio

Adam Rudzki



Theissland



Sammrkiewi



Ivomynttinen



Evan Richards



Builtbybuffalo



Daniel Pertrarolo



Stedesign



Others

WDMTG



Mint Themes



BYNC



Redbull Studios



MTCDC



Tree House



Square Space



Chilicon Graphic



Dunked



Adayinbigdata



How inspired are you? Tell us!

August 20 2012

13:00

Stunning Watercolor Effects in Web Design, Tutorials and Brush Sets

Today the art of using watercolor is not limited to the canvas only, rather you can see loads of websites that have beautifully incorporated hand-drawn images and creation within their web designs. Such web designs look visually appealing and entice visitors. Watercolor masterpieces, because of their soft flowing strokes and smooth pastel colors, look visually gratifying; and incorporating such characteristics into a web design definitely brings outstanding results.

In this round up, we present a beautiful collection of some amazing and pleasing watercolor effects in website design. We hope that you will find this post interesting as well as inspiring for you. Enjoy!

1. Xhtml Cafe

Xhtml Cafe

2. Boompa

Boompa

3. Duirwaigh Studios

Duirwaigh studios

4. Deborah Cavenaugh

Deborah Cavenaugh

5. Web Designer Wall

Web Designer Wall

6. Wccnet

Wccnet

7. Istok Pavlovic

Istok Pavlovic

8. Giancarlo Fajardo

Giancarlo Fajardo

9. Imaginary Moments

Imaginary Moments

10. Lebloe

Lebloe

11. Corvus Design Studio

Corvus Design Studio

12. Weberica

Weberica

13. CSS Addict

CSS Addict

14. Football Made in Africa

Football Made in Africa

15. C Sharp Design

C Sharp Design

16. Siete de Febrero

Siete de Febrero

17. Five Points Interactive

Five Points Interactive

18. All For Design

All For Design

19. Syster

Syster

20. Platin

Platin

21. Billy Hughes At War

Billy Hughes At War

22. The Happy Time Cafe

The happy time cafe

23. Gummisig

Gummisig

24. Sunrise Design

Sunrise Design

25. Ryan Scherf

Ryan Scherf

26. N.design-Studio

N.design-Studio

27. The Croquis

The Croquis

28. Big Cartel

Big Cartel

29. Small White Bear

Small white bear

30. Element Fusion

Element Fusion

31. The World Snowboard Day

The World Snowboard Day

32. Fray

Fray

33. Davide Savelli

Davide Savelli

Watercolor Brush Packs:

Although all the brush sets are free to use, we would appreciate if you read the license agreements carefully before using them for commercial purposes.

34. Hi-Res PS Brushes

Hi-Res PS Brushes

35. Free Grungy Watercolor Photoshop Brushes

Free Grungy Watercolor Photoshop Brushes

36. Hi-Res Watercolor Photoshop Brushes

Hi-Res Watercolor Photoshop Brushes

37. Watercolour Brushes Set 2

Watercolour Brushes Set 2

38. Social Media Grungy Watercolor Brushes

Social Media Grungy Watercolor Brushes

39. 50 Watercolour-Style Brushes

50 Watercolour-Style Brushes

40. Large Watercolor Splatter Brushes

20 Large Watercolor Splatter Brushes

41. 28 HighRes Watercolour Brushes

28 HighRes Watercolour Brushes

42. Go Media Spills & Splatters

Go Media Spills & Splatters

43. Hi-Res Splatter PS Brush Set

Hi-Res Splatter PS Brush Set

44. WG Watercolor Brushes Vol1

WG Watercolor Brushes Vol1

45. Aqua color

Aqua color

46. Hi-Res Watercolor Textures

Hi-Res Watercolor textures

Watercolor Effects Tutorials:

47. Create Cool Watercolor Effects in Photoshop

The coolest thing in any design work is use of watercolor effects. So in this tutorial we will show a quick way to simulate that effect using only Photoshop and some brushes.

Create Cool Watercolor Effects in Photoshop

48. 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. It is one of the most fascinating and powerful Photoshop method, to use layer masks in your designs.

Creating an Abstract Watercolor Wallpaper

49. 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.

Create Convincing Watercolor Effects Using Photoshop

50. Watercolored Design Studio Blog Layout

In this tutorial you will learn how to make a clean and simple watercolor design studio layout for a blog.

Watercolored Design Studio Blog Layout

51. Create a Nature Inspired Painted Background in Photoshop

In this tutorial, we will show you some helpful techniques for creating this type of background.

Create a Nature Inspired Painted Background in Photoshop

52. Super Cool Watercolor Effect in 10 steps in Photoshop

In this tutorial we will use Photoshop, some brushes from Brusheezy and some stock photos.

Super Cool Watercolor Effect in 10 steps in Photoshop

53. 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. Let’s get it started!

Create a Watercolor-Themed Website Design with Photoshop

54. Easy Watercolor Painting Effect In Photoshop

In this Photoshop effects tutorial, we’re going to 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.

Easy Watercolor Painting Effect In Photoshop

Conclusion

In this round up you have seen some stunning and visually pleasing watercolors effects in web design and tutorials and Brush Sets. We have compiled this collection for your inspiration to let you see how you can also accomplish a stunning web design by using watercolor effects. Do share your opinions with us via comment section below. Enjoy!

August 04 2012

13:00

40 Free And Premium Beautiful Themes for Your First Tumblr Blog

WordPress is great, yet a lot of users don’t even need and use that many features. That’s when people start considering Tumblr. I bet you’ve heard of it but perhaps never ventured to try. Tumblr is a super pleasing microblogging platform that lets you share things effortlessly. Whether it’s a personal blog, a small portfolio or your new font presentation page, Tumblr is a perfect solution. Its customizability and themes don’t drop behind WordPress that much and even though there are some key differences, Tumblr is aimed to be as simple as possible and a very enjoyable way to start your first job.

To prove it we’ve gathered 40 fresh and stunning Tumblr themes for your next blog.

1. Six Caps

Sixcaps-free-tumblr-themes

  • Grid based layout
  • Custom header

2. Neptune

Neptune-free-tumblr-themes

  • Grid based layout
  • Sidebar left or right

3. XO

Xo-free-tumblr-themes

  • Simple, 90s looking layout
  • Fixed header

4. Montreal

Montreal-free-tumblr-themes

  • Grid based layout
  • Background image

5. chlamydia

Chlamydia-free-tumblr-themes

  • Simple and minimal layout
  • Sidebar left or right, fixes

6. Liberation

Liberation-free-tumblr-themes

  • Two or three columns
  • Custom background

7. Posters

Posters-free-tumblr-themes

  • Two or three columns
  • Infinite scroll

8. NTA2

Nta-free-tumblr-themes

  • Up to 4 columns
  • Custom fonts
  • Background image

9. Flip

Flip-free-tumblr-themes

  • Sidebar left or right
  • Customizable font size

10. 4 column

4column-free-tumblr-themes

  • 4 columns
  • Back to top button

11. Pyramids

Pyramids-free-tumblr-themes

  • Light and dark color scheme
  • Twitter feed

12. Grid Wings

Gridwings-free-tumblr-themes

  • 4 columns
  • Cute photos hover effect

13. Luxury

Luxury-free-tumblr-themes

  • Infinite scroll
  • Sidebar fixed or not

14. Cessation

Cessation-free-tumblr-themes

  • Background image
  • Fixed sidebar

15. Inkhorn

Inkhorn-free-tumblr-themes

  • Disqus comments
  • Localization

16. Meringue

Meringue-free-tumblr-themes

  • Custom fonts
  • Header image

17. Bulk Speed

Bulkspeed-free-tumblr-themes

  • Background image
  • Social network icons

18. Beastial

Beastial-free-tumblr-themes

  • Customs fonts, font sizes
  • Fixed sidebar

19. Perimetre

Perimetre-free-tumblr-themes

  • Single column
  • Instant reblog link

20. Inverse

Inverse-free-tumblr-themes

  • Horizontal scrolling
  • Large photos

21. La Belle Aurore

Labelleaurore-free-tumblr-themes

  • Fixed sidebar
  • Endless scrolling

22. Opulent

Opulent-free-tumblr-themes

  • Endless scrolling only
  • Consolas font (optional)

23. Plain

Plain-free-tumblr-themes

  • 3 columns
  • Drop down description

24. Sleepless

Sleepless-free-tumblr-themes

  • Webkit transitions
  • Rounded photo edges

25. Munich

Swagger-free-tumblr-themes

  • Background image
  • Infinite scroll

26. Mesh

Mesh-free-tumblr-themes

  • Up to 4 columns
  • Back to top button

27. Kitsune Grid

Kitsune-free-tumblr-themes

  • Sticky header
  • Custom fonts

28. this is a title

Title-free-tumblr-themes

  • Two columns
  • Background image

29. Esquire

Esquire-free-tumblr-themes

  • Disqus comments
  • Search functionality built-in

30. Supreme

Supreme-free-tumblr-themes

  • Two or three columns
  • Fade photos

Premium Themes

1. Lightglass (€2.49)

Lightglass-free-tumblr-themes

  • Up to 5 columns of posts
  • Infinite scroll
  • Show captions
  • Custom background image

2. wordographic ($9)

Wordographic-free-tumblr-themes

  • Suited for writers
  • Disqus comments
  • Control various aspects with tags
  • Specialized notes

3. Timeline ($14)

Timeline-free-tumblr-themes

  • Responsive layout
  • Carousel widgets
  • Twitter feed widget
  • Wide image slider

4. Pop Gallery ($14)

Popgallery-free-tumblr-themes

  • Responsive layout
  • Circular thumbnails (optional)
  • Editable color scheme
  • Facebook share optimized

5. Neat ($10)

Neat-free-tumblr-themes

Neat is a Tumblr theme which provides a classy and clean experience especially for photo blogs. It features a unique and original scroll experience for your visitor.

  • original scroll experience
  • vertical or horizontal layout (responsive)
  • well documented
  • clean JavaScript and CSS

6. Focus ($17)

Focus-free-tumblr-themes

  • Adaptive design & code
  • Customizable text & theme colours
  • Well documented
  • Support and updates

7. Mason ($20)

Mason-free-tumblr-themes

  • Ajax based page loading
  • Responsive design
  • Highly customizable
  • Twitter feed

8. Glide ($17)

Glide-free-tumblr-themes

  • Responsive design
  • “Flex” slider
  • Google web fonts
  • Updates and support

9. Notes ($14)

Notes-free-tumblr-themes

  • Disqus commenting with custom styling
  • Customizable icons and background
  • Tag cloud
  • Well documented

10. Popcase ($11)

Popcase-free-tumblr-themes

  • Image slider
  • Disqus Comments
  • Social networking integration
  • Short URL for each post

What do you think of these Tumblr themes? Share your thoughts in the comments!

July 23 2012

13:00

40 Artistic Hand-Drawn Websites for Your Inspiration

Inspiration is an unlimited power and it is a never-ending process, this is especially true for anyone involved in the arts. With the right inspiration, you truly can accomplish anything. Here, we will showcase some very beautiful hand-drawn websites for your inspiration. Hand-drawn sketches are always in demand because of their magnificence and visual appeal. Here you will find 40 excellently hand-drawn websites that will simply surprise you.

Hand-drawn images in website designs is, and has been, a trend over the last couple of years. Reason being the creative and personal touch of hand-drawn images that not only enthuse the onlookers but will also a visual appeal to the overall design.

Browse through our collection and get inspired!

1. Bootb Creatividad

With hand-drawn doodles and beautifully drawn elements, this website definitely earns its place in today’s collection.

Bootb Creatividad

2. Maluquinha Festas

This website is based on a hand-drawn theme and features a very elegantly designed header and footer.

Maluquinha Festas

3. Think Brownstone

Hand-drawn elements in this website give the impression of a sketch which is the best way to express the process of thinking.

Think brownstone

4. Zenzero

The website’s hand-drawn illustration in the background is simply marvelous.

Zenzero

5. Our Wildlife Garden

This is one of the best examples of websites using hand-drawn elements in their design. The whole website is made up of different hand-drawn elements giving it a childlike feel.

Our Wildlife Garden

6. Snailbird

Apart from an appealing color theme, the website also owns some truly amazing hand-drawn elements that add beauty.

Snailbird

7. Sarahhyland

The only hand-drawn elements used in this website are those that are present at the top navigation.

Sarahhyland

8. Buymeasoda

Emphasis is given to the proper use of hand-drawn elements even though there are not many of them, they appeal to the audience with their simplicity.

Buymeasoda

9. Redemptionmaddie

Simple and minimal website design with some cool hand-drawn elements placed at the side navigation bar.

Redemptionmaddie

10. Foto Marcol Art

Good use of hand-drawn elements in this website can be seen, right from the header to the footer.

Foto marcol art

11. Racket

Creativity at its best. Simple but effective use of hand-drawn elements. The header is well occupied with a hand-drawn menu.

Racket

12. Clever Craft

Clever Craft uses hand-drawn elements for the top navigation and footer as well as throughout the rest of the site.

Clever Craft

13. Paper Beats Internet

The website employs extensive use of different hand-drawn elements which sometimes give it a somewhat messy look but definitely comes across as creative.

Paper beats internet

14. Candc Coffee

Not too many design elements rather just the hand-drawn web elements. The main idea is to keep the design as simple as possible while keeping the appeal intact.

Candc Coffee

15. Teresawalsh

The website makes use of creative and beautiful hand-drawn elements in the header that grabs the attention at the first glance.

Teresawalsh

16. Eldodo

A very beautiful hand-drawn doodle is present in the header with beautiful illustrations that is followed by the website layout. The side bar also brings some hand-drawn elements into play.

Eldodo

17. Ygrin

You would not find too many of the hand-drawn elements in this website design, however even the minimal use of hand-drawn elements prove its worth.

Ygrin

18. Made by Mike

The website uses creative hand-drawn elements for its different sections without making the web design too messy or childish.

Made by Mike

19. Le Carnet Ordinaire

With some fascinating hand-drawn doodles, this website effectively creates a long lasting impression. The top navigation menu sets itself apart from other navigation menus with the creative approach it is designed with.

Le Carnet Ordinaire

20. Twodesigners

The only hand-drawn element used in this web design is the doodle of the two designers.

Twodesigners

21. MS U Pejska a Kocicky

This web design is creative, interesting and lively, mainly because of the background doodles.

MS U pejska a kocicky

22. Design Portfolio

This is not the pure hand-drawn website rather makes use of only few huge illustrations.

Design Portfolio

23. Studio Img. Not Conventional Style

Studio Img has got an exceptional style which is quite tempting and unique in its own way. The header has got a visually alluring illustration.

Studio Img. Not Conventional Style

24. Esteban Munoz

A simple hand-drawn illustration at the bottom of the page.

Esteban Munoz

41. Mobious

Great use of hand-drawn elements with a background effect that is quite unusual and gives the web design a more dynamic feel.

Mobious

26. Kevadamson Design

The creative illustration and hand-drawn doodles found on this website are truly eye-catching from the rest of the collection. An extensive use of hand-drawn elements can be seen here.

Kevadamson Design

27. Hugsformonsters

Original and unusual hand-drawn elements that make it different from the other websites.

Hugsformonsters

28. Sketch Odopod

Here you will find loads of sketches that are all hand-drawn. You can create your own sketches on this website as well.

Sketch.odopod

29. Great-Design

This is another beautiful example of hand-drawn elements that features some very appealing and astonishingly beautiful hand-drawn elements.

Great-Design

30. Oink

The main attraction in this website is the side navigation bar with excellent hand-drawn element bringing this whole web design to life.

Oink

31. Biola

This website makes use of somewhat unconventional hand-drawn elements which is the key point of this design.

Biola

32. Pixelmind

Pixelmind is one of those few websites that have implemented hand draw elements quite effectively and successfully in their website layout without making them look odd.

Pixelmind

33. Deborahcavenaugh

Hand-drawn elements bring this web design to the life.

Deborahcavenaugh

34. Coo Coo Core

In this website design, the elements that grab the attention of the visitors are their hand-drawn elements that give the whole web design a very catchy look.

Coo Coo Core

35. Kutztown

Simple, sophisticated and decent are the words to define this web design. The use of water color effects and hand-drawn elements are kept reasonably suitable and thus stand apart in the whole web design.

kutztown

36. Tfreak

Different shades of colors are used here to add a feeling of liveliness and energy while the use of hand-drawn elements is quite minimal.

Tfreak

37. Robbin Waldemar

In this web design, hand-drawn elements are used quite creatively with big and bold typography.

Robbin waldemar

38. Personal Portfolio

This website features funky illustrations.

Personal Portfolio

39. Studio Design

The creativity of the designer is demonstrated in this design. You can see how beautifully the designer has placed a hand-drawn drawing that is grabbing and appealing.

Studio Design

40. Christian Sparrow

Here the use of cool earth tones and beautiful hand-drawn illustrations are the main things in this web design.

Christian Sparrow

April 23 2012

13:00

40 Creative Examples of Pricing Page Design for Your Inspiration

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

At the moment, we are presenting some excellent examples of effective pricing pages that not only perform their job well, but also add a visual appeal to the overall web design. With the help of an appealing pricing page, you can certainly increase your sales to a greater extent. A pricing page is the first thing that your visitors or potential customers check when they want to sign up for your service. Therefore, the pricing page design along with the way it is displayed can have loads of determining factors on whether those interested visitors sign up or not.


We have previously posted a collection about Pricing Pages in Web Design but in this post we have collected the most creative and amazing pricing pages that we could find. In this round up, you will see how you can design pricing pages that are visually appealing, simple and let your visitors easily identify different types of packages you are offering. Let’s have a look and be inspired!

1. Yast

Simple and minimal design for the pricing page highlighting the personal package which is free and the business package that charges $4 per user per month. For custom package, you can contact them at any time.

Yast

2. Invoicera

This is a very colorful and visually appealing pricing page design. The use of different colors for different packages makes this design a visual treat.

Invoicera

3. 5pmweb

5pmweb makes use of a very brilliant approach to design their pricing page making it stand out in the crowd of dozen of ordinary pricing page designs.

5pmweb

4. Launchlist

Launchlist uses a very brilliant and catchy background for their pricing page design and makes it even more enticing with the graphics and presentations.

Launchlist

5. Volusion

This exclusively designed pricing page not only compares different packages but also highlights their most important and economical package.

Volusion

6. Getsatisfaction

This website has a very minimal kind of design for its pricing page which is good from the customers’ point of view as it helps them to choose the right kind of package for themselves.

Getsatisfaction

7. Ballpark

Ballpark presents four different plans with relevant information; however the same color used makes it difficult to distinguish between different packages.

Ballpark

8. Are My Sites Up?

In this design, you will see the use of different graphical element to add visual appeal to the overall page design while highlighting different packages with the help of different shades.

Are My Sites Up?

9. Zendesk

Among the four packages offered, they highlighted the Plus package as it offers additional features to the customers and they may be interested in testing the free trial prior to ordering.

Zendesk

10. HootSuite

Enjoy the refreshing color combination of this pricing page design along with fine use of typography.

HootSuite

11. LightCMS

A simple, effective design for a pricing page. In this pricing page design, you can see the use of different colors distinguishing different packages and their costs.

LightCMS

12. Business Catalyst

In this design, you can see creativity in the way the pricing of their packages are shown. The design is made for easy comparison between different packages as well as levels.

Business Catalyst

13. VSP.NET

In this pricing page web design, simply two packages are shown and that is one daily package with $6 per day charge and one is a monthly package that is $90 per month.

VSP.NET

14. Harvest

Three well defined and easy to compare packages are presented in this pricing page design with a pleasing design and color selection.

Harvest

15. Strutta

Simple and uncluttered page design that successfully compares two packages and makes selection easier for prospective customers.

Strutta

16. Ronin

Ronin makes use of a simple and elegant color for their pricing page design and highlights its most important package by bringing it to light while also focusing two other packages apart from the free one.

Ronin

17. Goplanapp

A very simple and professional way of presenting their rates and different packages while also highlighting the most affordable package.

Goplanapp

18. Media Temple

Images are added to create visual appeal. Monthly and yearly subscription charges are shown with a very captivating call to action button.

Media Temple

19. Pagelime

Here, they highlight their professional package with fewer charges but with adequate services that makes it an ideal one to pick. Color selection is good and matches with the overall theme of the site.

Pagelime

20. Dropsend

In this pricing page design, Standard package has been highlighted most among four other packages as it is economical and offers a good range of features.

Dropsend

21. Slidedeck

Slidedesk differentiates their packages with different color themes as well as with different content. This is quite a unique approach towards designing pricing page design.

Slidedeck

22. Rocket Theme

A very classy and elegant looking pricing page design that highlight three packages with respect to their cost, number of days the package is valid as well as the entitlements.

Rocket Theme

23. Eleven2

The use of graphics in this pricing page design truly stands out. You can see how all four packages look different from one another though they are the same color.

Eleven2

24. GoSitewave

They just present three packages with their monthly charges that are highlighted at the top in order to make the selection process easier for the customers.

GoSitewave

25. Tivo

This pricing page design goes beyond the ordinary styles of pricing page and presents the packages in a totally different way while keeping the whole selection process easier for their customers.

Tivo

26. Big Cartel

Somewhat simple and ordinary pricing page design, however, it successfully fulfills the purpose of having a pricing page. The top bar differentiates between different packages.

Big Cartel

27. Albumdruck

This exclusively designed pricing page not only compares different packages but also highlights their most important and economical package. Further, eye catchy graphics have been used to add beauty to the overall design.

Albumdruck

28. Github

A huge range of packages are displayed here focusing on charges and important features. The color theme and the way of presenting the packages can be a little bit better.

Plans & Pricing

29. PollDaddy

This pricing page design is indistinct and does not really stand out yet they effectively highlighted their professional package.

PollDaddy

30. AgileZen

This design differentiates their different packages by highlighting their per month charges with beautiful mouse over effects.

AgileZen

31. Basecamp

This is the perfect example of an ideal pricing page design that brings all the important aspects of a pricing page to light. The premium package is highlighted more as the sweet spot.

Basecamp

32. Action Method

A very simple and effective way to let users select their preferred plan either they want to go for the free introductory plan or want to choose a premium plan for additional features.

Action Method

33. Traffik CMS

They did not use a traditional table style to showcase the difference between their different packages rather they simply list down features beneath the every package.

Traffik CMS

34. Openhallway

Simple and elegant design for a pricing page that displays all the important features of all of the packages being offered.

Openhallway

35. Bigcontacts

With the help of beautiful and soothing colors and a nice typography, this simple pricing page design really stands out and makes its place in the today’s collection.

Bigcontacts

36. Sifter

This one is pure eye candy; you will be pleased to look at this pricing page design that is different and unique from all the other pricing page designs in this compilation.

Sifter

37. SolidShops

The standard package is highlighted emphasizing that it fits your needs the most and offers true value to your money.

SolidShops

38. Uploading

They highlighted their lifetime package as the one that their potential clients are supposed to choose along with two appealing call to action buttons.

Uploading

39. SoftLayer

This is somewhat different and unique approach to design the pricing page of a website. This design mainly focuses on the graphical elements.

SoftLayer

40. Brightbox

If you like dark designs then you will simply love this designs style.

Brightbox

March 12 2012

10:00

February 27 2012

16:00

February 23 2012

10:00

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples

It is estimated that within two years mobile internet users will overtake the desktop internet users. The rapid advancement of mobile internet has enabled more and more people to use their mobile device as a primary web browsing tool. What does it mean for web development? Well, the usual development for just a couple of screen resolutions is already dying out.

Mobile is the new trend and most of the businesses are recognizing it. Having a fluid and responsive website will not only make you cooler, it’s the new way of increasing conversions and engaging your visitors.

Not sure where to start? Responsive design might not be as big a mystery as you’ve imagined it. Indeed, there are frameworks and plugins that will make it much easier for you to create responsive designs. Continue reading and check out useful tools for creating responsive web design as well as 35 stunning examples of responsive web design.

Tools

1. Less Framework 4

Less-framework-responsive-web-design-showcase

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

2. Gridless

Gridless-responsive-web-design-showcase

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

3. Mobile Boilerplate

Mobile-boilerplate-responsive-web-design-showcase

Mobile Boilerplate is your trusted template made custom for creating rich mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.

4. Skeleton

Skeleton-responsive-web-design-showcase

5. 320 and up

320-up-responsive-web-design-showcase

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.

6. Fittext

Fittext-responsive-web-design-showcase

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

7. Media Query Bookmarklet

Media-query-responsive-web-design-showcase

The mediaQuery bookmarklet gives a visual representation of the current viewport dimensions and most recently fired media query.

8. Responsive testing

Testing-responsive-web-design-showcase

A quick and easy way to test a website design in multiple screen widths.

9. Media Queries

Media-queries-responsive-web-design-showcase

A collection of inspirational websites using media queries and responsive web design.

10. inuit.css

Inuit-responsive-web-design-showcase

Inuit.css is a CSS framework built to work on small screens. Inuit.css has a custom grid system builder for creating fixed or fluid grid system igloos.

11. PhotoSwipe

Photoswipe-responsive-web-design-showcase

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

12. Adapt.js

Adapt-responsive-web-design-showcase

Adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.

13. Adaptive Images

Adaptive-images-responsive-web-design-showcase

Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed.

Tutorials

We know that not everyone learns through reading, for some its all about actually getting up and doing it. That is why below, we are going to take a look at some good tutorials on responsive web design for those just itching to start playing with it.

1. Responsive Design with CSS3 Media Queries via Web Designer Wall

Media queries are the backbone of responsive web design, and this function of CSS3 will definitely up your ante if you’re familiar with. In this tutorial, Nick La does a great job of introducing and explaining media queries while offering a tutorial for using them.

2. Fluid Images via Unstoppable Robot Ninja

The early adopters of responsive web design were mostly text-based sites, with very few images. This is easy to understand because the one question a lot of people had that made them wary about this new practice was how images would render. Well after going through this article by Ethan Marcotte, you won’t be one of the latter.

3. How To Design a Mobile Responsive Site via UX Booth

This is a great tutorial written by Elaine Simpson, going into great detail and giving a great process to follow when going about a responsive design.

4. Responsive Data Tables via CSS Tricks

Data tables are an important aspect of showing results, or grouped information on a website. With this tutorial, you’ll learn how you can keep this aspect with style.

More Tutorials

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website via Smashing Magazine

Context Aware Image Sizing via Filament Group

Awesome Tutorials To Master Responsive Web Design via Cats Who Code

Experimenting With Responsive Design via Lee Munroe

Optimizing your email for mobile devices with the @media query via Campaign Monitor

Publications

Trying to learn new material is always hard when first starting out, which is why having great written work on the subject is a great way of easing the learning curve. That is why before going any further, we’re going to take a look at some very useful books and blog articles on responsive design.

1. Responsive Web Design By Ethan Marcotte

It is only right to start off our listing of great resources on responsive web design with this thoroughly detailed book written by Ethan Marcotte. In this book, Ethan guides an exploration of understanding and appreciated what is responsive web design. Honestly, this book very well may be all you need.

2. Responsive Web Design: What Is It and How To Use It via Smashing Magazine

This article written by Kayla Knight for Smashing Magazine is probably the best, at the very least one of the best, published articles in the blogosphere on responsive web design. This will give you a good explanation of what exactly responsive web design is, how it works, and how you’ll leave knowing some cool ways of implementing it.

3. Beginner’s Guide to Responsive Web Design via Think Vitamin

 

If you’re looking for something informative, and more so straight to the point, as a good introduction to responsive web design then Nick Pettit wrote the article for you. Nick did a good job at offering a very easy to follow explanation of responsive web design for the less experienced web designer or developer trying to get their feet wet in this new practice.

4. Introduction to Responsive Web Design via 1stwebdesigner

This is a solid offering by Christian Vasile at introducing those new to this topic, while also doing it in a brief manner.

More Reading

Responsive Web Design via sitepoint

Responsive Web Design via A List Apart

Responsive Web Design Demystified via Elated

Seven Lessons Learned From Responsive Web Design via .Net Magazine

Responsive Web Design Techniques, Tools and Design Strategies

Inspiration

1. Briangardner

Briangardner-responsive-web-design-showcase

Briangardner-2-responsive-web-design-showcase

2. Notloremipsum

Notloremipsum-responsive-web-design-showcase

Notloremipsum-2-responsive-web-design-showcase

3. Fortysevenmedia

Fortysevenmedia-responsive-web-design-showcase

Fortysevenmedia-2-responsive-web-design-showcase

4. Brace Yourself

Brace-yourself-responsive-web-design-showcase

Brace-yourself-2-responsive-web-design-showcase

5. Osvaldas

Osvaldas-responsive-web-design-showcase

Osvaldas-2-responsive-web-design-showcase

6. Thegregthompson

Thegregthompson-responsive-web-design-showcase

Thegregthompson-2-responsive-web-design-showcase

7. Studiopress

Studiopress-responsive-web-design-showcase

Studiopress-2-responsive-web-design-showcase

8. Food Sense

Food-sense-responsive-web-design-showcase

Food-sense-2-responsive-web-design-showcase

9. 255creative

255creative-responsive-web-design-showcase

255creative-2-responsive-web-design-showcase

10. Paperstreetinteractive

Paperstreetinteractive-responsive-web-design-showcase

Paperstreetinteractive-2-responsive-web-design-showcase

11. Raewynbrandon

Raewynbrandon-responsive-web-design-showcase

Raewynbrandon-2-responsive-web-design-showcase

12. Gonzoblog

Gonzoblog-responsive-web-design-showcase

Gonzoblog-2-responsive-web-design-showcase

13. Zync

Zync-responsive-web-design-showcase

Zync-2-responsive-web-design-showcase

14. Techdept

Techdept-responsive-web-design-showcase

Techdept-2-responsive-web-design-showcase

15. Pelicanfly

Pelicanfly-responsive-web-design-showcase

Pelicanfly-2-responsive-web-design-showcase

16. Marijazaric

Marijazaric-responsive-web-design-showcase

Marijazaric-2-responsive-web-design-showcase

17. Raymacari

Raymacari-responsive-web-design-showcase

Raymacari-2-responsive-web-design-showcase

18. Handsomecopy

Handsomecopy-responsive-web-design-showcase

Handsomecopy-2-responsive-web-design-showcase

19. Jaypegams

Jaypegams-responsive-web-design-showcase

Jaypegams-2-responsive-web-design-showcase

20. Joshuasortino

Joshuasortino-responsive-web-design-showcase

Joshuasortino-2-responsive-web-design-showcase

21. 36creative

36creative-responsive-web-design-showcase

36creative-2-responsive-web-design-showcase

22. Whitelotusaromatics

Whitelotusaromatics-responsive-web-design-showcase

Whitelotusaromatics-2-responsive-web-design-showcase

23. Forefathersgroup

Forefathersgroup-responsive-web-design-showcase

Forefathersgroup-2-responsive-web-design-showcase

24. Dentsunetwork

Dentsunetwork-responsive-web-design-showcase

Dentsunetwork-2-responsive-web-design-showcase

25. Upperdog

Upperdog-responsive-web-design-showcase

Upperdog-2-responsive-web-design-showcase

26. Teehanlax

Teehanlax-responsive-web-design-showcase

Teehanlax-2-responsive-web-design-showcase

27. Weareduo

Weareduo-responsive-web-design-showcase

Weareduo-2-responsive-web-design-showcase

28. Unfold

Unfold-responsive-web-design-showcase

Unfold-2-responsive-web-design-showcase

29. Builtwithmomentum

Builtwithmomentum-responsive-web-design-showcase

Builtwithmomentum-2-responsive-web-design-showcase

30. Glorm

Glorm-responsive-web-design-showcase

Glorm-2-responsive-web-design-showcase

31. Quazarwebdesign

Quazar-responsive-web-design-showcase

Quazar-2-responsive-web-design-showcase

32. Agenciart

Agenciart-responsive-web-design-showcase

Agenciart-2-responsive-web-design-showcase

33. Apgdesign

Apgdesign-responsive-web-design-showcase

Apgdesign-2-responsive-web-design-showcase

34. Createdm

Createdm-responsive-web-design-showcase

Createdm-2-responsive-web-design-showcase

Gathered and Arranged by: Jamal and Daniels

February 09 2012

21:00

Document Your 2012 With Style Using an Advent Calendar

Advent calendars aren’t yet the trend in the blogging industry but there have been really good bloggers that have found a great use for them. One of the well-known advent calendar is 24 Ways.

They have done a good job with their advent calendar which has created a new meaning for it. I am not sure if 24 ways was the pioneer in the wave behind advent calendars for blogs but they surely have been the driving force. Today, we will try to show you some of the best advent calendars. We will discuss what makes these advent calendars stand out and how they can catch the attention of your website’s visitors.

What is an Advent Calendar?


Google the keywords Advent Calendar and you will find the Wikipedia page that states that Advent Calendars have something to do with Christmas. Advent Calendars are more like flashy archive calendars which are being used by webmasters to give their schedules a new meaning all together. Well, that is the textbook definition of an Advent Calendar. Otherwise, the term Advent Calendar has evolved quite a lot lately and it is no longer just for Christmas but anything that you want. Actually, the blogging community recently picked up Advent Calendars and shaped its definition to suit their needs.

5 Amazing Advent Calendars


1. 24 Ways

The mother of all advent calendars, 24 Ways (as I said before) was the reason behind the sudden surge in advent calendars on various websites. The quality of content and the presentation of the advent calendar with a blog made people’s jaws drop. 24 Ways is famous for topics ranging from design to development. Even discussions on business matters and inspirational articles make way into the elite list of content that is published in 24 ways. This way the website is able to target niche readers and new readers alike.

The design of 24 ways takes care of various screen resolutions which in itself is a big advantage for readers and publishers too. Also, this advantage takes care of readers who prefer to access the website on mobile devices or other platforms like tablets. 24 Ways is famous for its high quality content and the over-the-top advent calendar is enough to attract users.

2. HTML5 and CSS Advent 2011

You might feel turned off when you see the HTML5 and CSS Advent Calendar 2011 after 24 Ways. But, please bear with the new players in this game. 24 ways has set a standard that might be tough for the rest to achieve, but it does not mean that others will never achieve the same. It is just a matter of time. Anyways, this advent calendar was designed with a set plan. The plan was to publish a new article every day until the end of the year 2011 and looks like the webmasters behind this advent calendar did well to publish quality content.

HTML5 and CSS3 Advent Calendar is full of crazy content with amazing images and planned drafts. The final versions of articles that you see on this website will surely force you to learn something new no matter how big an expert you are in the field of HTML5 and CSS3. I wish that these guys had planned to continue even after the year 2011. But, good things always come to an end, right?

3. Electric December 11

This happens to be Watershed’s annual calendar which covers the best possible short films from across Europe. Electric December 11 gives you the opportunity to enjoy 24 short films from across Europe. Enjoy the underwater bubble ride, discover secret twins, listen to unbelievable music, hug a tree or meet the prime minister.

Electric December 11 is not like the regular blogs with advent calendars. Rather, it happens to be an amazing collection of video based content with presentation skills that cannot be ignored. Do share your experiences once you are done with Electric December 11.

4. PHP Advent

Let us concentrate on websites that are more like blogs with advent calendars of sorts. PHP Advent is one such website with a simple to understand advent calendar. PHP Advent is another blog with content curated for the needs of its niche readers. The idea behind PHP Advent was to push its writers to write regularly. This is another advantage of an advent calendar. If you see a calendar right on the home page of your blog then there is this instinct to push content so that the advent calendar looks lively. This is when you learn to be disciplined and regular.

While you are at PHP Advent, you can also visit Photo Advent which happens to be the brain child of the same people who are behind PHP Advent. Similar template with niche concentrating on photography instead of PHP.

5. MDN Holiday Calendar

When big guns enter the arena they have to be different and better than the best. This is what Mozilla Developer Network did when they launched their advent calendar. The calendar focuses on dates that have something special related to Mozilla and its fan following. Be it just for fun stuff for its followers or ongoing developer news which can be of use to Mozilla developers, the advent calendar is regularly updated with fresh content.

The best part of Mozilla’s advent calendar is its look and its smooth display on any browser. Being a firm believer of Open Source, Mozilla has uploaded the source code of the advent calendar on GitHub. If you want something similar for yourself then you know exactly where you need to look for help. Good luck and do share your experiments with us.

Create Your Own Advent Calendar


You can either use the source code provided by Mozilla (and the two part tutorial) to create a Mozilla look alike advent calendar or jump over to Advent Calendr if you are using a tumblr blog. With the tools provided by Advent Calendr, one can easily turn a Tumblr blog into a advent calendar. You get to choose from multiple skins which can help you create an advent calendar that stands out from the crowd.

Advent Calendr provides its users with customization options and can be customized to suit various users’ needs. One can even separate the Tumblr posts from the advent calendar to reduce the amount of confusion that tend to creep in with a advent calendar.

Lastly, it will be your own expertise when it comes to designing your own advent calendar.

Conclusion


There was a time when blogging was new for us. It took time, but slowly everyone dived into the world of blogging and we know how it is today. It’s the same case with advent calendars. They are still in their infancy and webmasters are still experimenting with them. It will take a lot of time before we see very polished advent calendars and they become common on a lot of blogs. Until then, let us just enjoy 24 ways!

February 06 2012

10:00

Illustrated History of Web Forms

How many forms are filled out each day across the web? Billions of them, for sure. From small household blogs to government portals, it’s hard to imagine a website not having at least one form. And this comes naturally, since forms are the quickest way of having users:

• subscribe for a newsletter
• add comments to an article, pose questions or ask for support
• fill out applications (e.g. job applications)
• answer surveys
• perform purchases
• join clubs and forums

Styling web forms for both usability and aesthetics is a usual practice for any web designer working on a project. However, at the very beginning of the Internet forms were so dreadful that no modern user would have had the slightest desire to fill in one of them – no customized design, no smart capabilities, scarce consideration towards user experience.

Let’s see the evolution web forms over the past 10 years. It’s simply a lot of fun!

1. Pre-web era forms – the prints that we all despise

Yes, yes, these ones do bring bad childhood memories of endless queues at public administration desks. Perhaps this is the reason most of us don’t enjoy filling out any kind of forms. Hopefully, those prints will become out of fashion before we run out of wood.

2. The early days of WWW: 1991 – 1998

The first years of the Internet (1991-1996) remain obscure as far as web forms are concerned. Since we don’t have NeXT software on hand anymore, there’s no possibility of taking screenshots from back then to see how forms looked (if they existed at all).

As we all know, in a short time WWW became a mass medium and electronic forms made their way in. However, they were awfully rudimentary. Customer feedback was processed through executable files running on the hard disk. It was hard to find  anything like an online contact form. For subscribing to a service, you most likely had to download a form, fill in a hard copy and send it to the webmasters via postal services.

The existent web forms at that time mainly performed search and submission tasks. The interface was dead simple and dull, HTML based with no CSS of course.

BACK THEN:

NOW:

3. Form use in online sales: 1994 – present

1994 brought two major enhancements in the web arena: e-banking and online ordering (pizza, as you may guess). Shortly after, Amazon launched its online shopping service in 1995 and eBay the next year. Naturally, all of them were using web forms.

Those days, e-commerce was hindered by the limitations of credit cards that didn’t support online transactions. The issue was solved around 2000, once online payment processors appeared. Web forms could then exhibit products for sale and then direct submitters right to the payment gateway where they could complete the transaction. This was a major leap for the internet making its entrance in the day-to-day life of regular people.

BACK THEN:

NOW:

4. Web forms in the days of social media: 2004 – present

Two major landmarks for social media are 2004 (the launch of Facebook) and 2006 (the birth of Twitter). Facebook had the most interesting evolution in regards to web forms.

From the very beginning Facebook provided its own tools for creating simple polls and for planning events. However, the original Facebook forms were simple ones, they had security issues and as for styling they used to hold the blueish standard skin of FB. Things got better though. In August 2006, Facebook launched the free Developers API, which led to a burst of applications, widgets and tools. Around 2010 came the first form management apps for Facebook. Users could now have their own signup forms for fan pages, reuse personalized forms brought from outside and build specific mailing lists. Since then, Facebook forms and surveys are among the most popular tools for businesses that perform social media marketing.

BACK THEN:

NOW:

5. Web forms and security

SSL protocol for data encryption was released by Netscape in 1994. Anti-spam tools for web forms such as CAPTCHA and password protection have only been available since 2000. In the dark ages before, there were knight battles with hackers and spam.

How could you prevent bots from signing up countless times? Using IP validation methods that aren’t by far infallible. One famous hijack of a web form occurred in November 1999, when slashdot.org had the idea to run an online poll asking what was the top graduate school in computer science. Even if the IPs were stored in order to prevent duplicate entries, the students of Carnegie Mellon managed to create a program that voted thousands of times for their university. The next day, the competitors (students at Massachusetts Institute of Technology) put up their own program and the two rival bots took over the poll, leaving the valid submissions in shadow. Fortunately, security options we have today are by far more efficient.

6. Contemporary profile of web forms

An important improvement came around 2007 when the first WYSIWYG form builders made their way in. Any internet user could then create forms. HTML knowledge is not mandatory anymore, since the remotely hosted form generators provide wizards with intuitive interfaces.

The portrait of a form that stands at the top of the evolution chain includes, by case:

  • slick design, CSS customizable
  • various publishing options: on blogging and social media platforms, on regular websites
  • e-mail submissions received, secure data transfer and storage
  • capacity to draw reports over data
  • payment processing
  • integration with 3rd party apps to extend its functionality.

Today’s websites are bursting with creative web forms. Contact pages aim to be both visually appealing and efficient as lead generation tools. Forms are successful in performing a wide variety of tasks: online ordering, event registration, research across the web, feedback. With CSS and HTML 5 at hand, forms can be successfully styled so that they blend in with the overall look and feel of any website.

Some Creative Contact Forms

Aterlier Detour

Aterlierdetour

Camping ilfrutteto

Camping ilfrutteto

Red Bull Soapbox Racer

Red Bull Soapbox Racer

More amazing contact forms:

40+ Creative Contact Forms That Will Inspire You

91 Trendy Contact And Web Forms For Creative Inspiration

February 03 2012

21:00

38 Remarkably Designed Donation Pages Which Will Soften Your Heart

For the majority of non-profit organizations, online fund-raising has become one of the most important sources of income, especially the last 10 years. Designing an inspiring and appealing donation page can certainly make a big difference in converting large numbers of visitors into donors. But, unfortunately many non-profit organizations simply overlook this much more mundane aspect of online appeal while paying loads of attention and time in developing innovative and inspirational online content. In this round-up, we are showcasing some exceptionally designed donation pages for your inspiration.

1. Save the Children

This website has a very sleek design with beautifully designated avenues intended for assistance. There are plenty of courses of action for users that could have made it a cluttered mess, but the design keeps it all very well-organized.

Save the Children

2. Keep a Child Alive

This sleek design makes use of large buttons with a variety of ways to contribute to the mission. A slight grungy effect is used in order to highlight areas of the page. Overall the design is simple and impressive.

Keep a Child Alive

3. Manna FoodBank

In this website, you can see the use of a natural color scheme that fits with their mission. The call to action button with the slightest change in color definitely stands apart.

Manna FoodBank

4. Red Nose Day

The Red Nose Day site makes use of a simple two-tone color scheme that symbolizes the passion for the mission. The red colors spreading through the donation page drive people to take action.

Red Nose Day

5. Oxfam

Here the design of the donation page focuses the entire attention on the obligatory mission and calls to the readers.

Oxfam

6. Habitat For Humanity

The design of this website’s donation page is simple and clutter free; and focuses only on the mission.

Habitat For Humanity

7. Witness

The Witness donation page is mainly covered with the text and relevant information with a nicely designed call to action button that is placed right at the upper right corner.

Witness

8. Make-A-Wish

In this web design, although it is constructed well, there is a lack of distinction for its calls. The blue turns out to be rather awe-inspiring with the amount of information it contains.

Make-A-Wish

9. American Heart Association

This stylish donation page mainly draws the attention of their users towards the calls. They picked their color scheme quite smartly and the subtle uses of white with the blue definitely look great.

American Heart Association‘s

10. Giving to Johns

Giving to Johns Hopkins pushes their cause with a very stylish and appealing donation page that stands out mainly because of its alluring contrast in colors on the header and call to action button.

Giving to Johns

11. Doctors without Borders

This design of a donation page stands out in our collection as it utilized tabbed windows in order to separate the different paths that users can take to dig in.

Doctors without Borders

12. ASPCA

Here is another example of a subtle donation page. ASPCA uses purple for their calls that truly stands out from the overall orange design colors. With such a soft coloring, ASPCA imparts a sense of comfort that in turn eases the readers into the cause and taking action.

ASPCA

13. Susan G. Komen for the Cure

Susan G. Komen for the Cure website uses a brilliant color scheme that symbolizes their true passion for the mission.

Susan G. Komen for the Cure

14. Natural Resources Defense Council

The Natural Resources Defense Council uses a very simple approach. They bring overly large and bold call to action buttons into play that make their donation page stands out from the rest. This no frills approach puts pure focus on the mission.

Natural Resources Defense Council

15. Invisible Children

The Invisible Children donation page is as inspiring and touching as their mission is. In order to connect with their mission effectively, they utilize large images of the children the world tends to overlook.

Invisible Children

16. Donate Life California

This is a somewhat unusual design for a donation page but this one really stands out from the rest of the site because of its pink calls to action buttons.

Donate Life California

17. Charity: Water‘s

With the help of this understated design, Charity: Water‘s keeps their donation page extremely simple and focuses only on the mission.

Charity: Water‘s

18. Humane Society‘s

Large images and bold buttons are used to draw the users’ attention towards the main cause and convince them to take action.

Humane Society‘s

19. Action for Children

This website has an attention-grabbing, large and appealing call to action area. This call to action area offsets the donation area satisfactorily and efficiently pulls the reader to it.

Action for Children

20. MJFF

MJFF brings warm and inviting colors into play in order to engage their readers. The color scheme works well and the gradient on the actual donate button makes it stand out.

MJFF

21. The Nature Conservancy

The Nature Conservancy uses a quite unusual approach for their donation page. They placed two subtle calls under the header where users are likely to expect the navigation to be.

The Nature Conservancy

22. Kiva

Kiva has a very simple, sleek donation page that focuses on several routes to help users. The boldly colored call to action buttons are truly attention grabbing.

Kiva

23. Operation Warm

Here you will notice a nice, friendly color scheme that varies throughout the page. Though the main calls to action mix together with a majority of the site because they are the same color while the secondary calls are a bit more obvious because they break from the blue.

Operation Warm

24. Mozilla

Mozilla features a delicate donation page design with an innovative header that accompanies their website. Their fans and users can donate to keep their mission active.

Mozilla

25. Network for Good

Network for Good has got a fantastic design that possesses three courses of action that their readers may pursue. Each of them holds a large, attention-grabbing call to action button.

Network for Good

26. Virgin Money Giving

Here is a unique donation page that is divided into categories in order for users to find the kind of charitable organization they are seeking to support.

Virgin Money Giving

27. Planned Parenthood‘s

Here a form is used for the main appeal with more subtle calls placed in the upper right corner. Overall the design is simple and effective leading the reader into the ‘action center’.

Planned Parenthood‘s

28. World Food Programme

World Food Programme uses a very subtle design for their website with an online form to help their users donate for their cause to keep it alive.

World Food Programme

29. Red

In this web design, you will see minimalism in a new style as this donation page features overly large typographical elements that truly work well to draw the users’ attention to the action areas.

Red

30. Amnesty International

Amnesty International design of the donation page focuses the entire attention on the obligatory mission and calls to the readers.

AMNESTY INTERNATIONAL

31. Dalit Freedom Network

Dalit Freedom Network uses a very natural and earthy color scheme that works well with their mission along with eye catching and appealing call to action buttons.

Dalit Freedom Network

32. Take The Walk

The boldly colored call to action buttons in this design truly stand out from the other donation page designs. The color scheme is also very appealing.

Take The Walk

33. Practical Family Living

Another excellent example of a subtle donation page design that works very well for the mission. All the design elements are in perfect balance making this design stand out.

Practical Family Living

34. Housing Works

What makes this design stand out is its excellent color contrast as well as call to action button. Housing Works pushes their cause with an extremely trendy and tempting donation page.

Housing Works

35. Children’s Rights

Children’s Rights donation page is designed by keeping the overall design simple and clutter free. The call to action button is moderately sized and positioned at the center of the page.

Children’s Rights

37. Project Rescue Foundation

In this web design, you will see a unique approach for designing donation pages. An online form is also there to help you donate to their cause.

Project Rescue Foundation,

38. Custodial Abuse

Here they use a large image to connect with their cause in a simple but effective way as they are working for a very sensitive cause.

Custodial Abuse

38. Memphis Zoo

This rather remarkable design for a donation page truly stands out from the rest of the site due to its excellent and vividly colored calls to action button.

Memphis Zoo

January 11 2012

21:00

41 Inspiring Email Newsletter Designs

An email newsletter is an imperative tool for developing a graphic design business. It is one of most valuable ways to share what type of work you are doing and seeking. Email newsletters are amazing marketing as well as communication tools with multipurpose functions and benefits that expand your reach into a user inbox. With the help of an email newsletter, you can make an additional connection with your viewers beyond the website, and in this way you can keep them in the loop with the latest news and happening to look out for.

Email newsletters, while building a relationship with your visitors or customers, can keep them coming back to your website. This will ultimately result in increased sales. So, without any further ado let us get a load of exceptional ideas to create appealing and engaging graphic email newsletter designs for your new campaign.

1. Elizabeth Davis

This newsletter design plays tremendously well with the color usage that makes this newsletter design visually alluring and attractive. Furthermore, the newsletter starts with a catchy tagline.

Elizabeth Davis

2. eMag

This newsletter design brings somewhat bright color into play with the amalgamation of black color to give it an attention grabbing look. You can easily notice how the call-to-action buttons are placed.

eMag

3. Heroes Over Europe

One of the most outstanding newsletter designs in this collection which sets itself apart from the other ordinary designs.

Heroes Over Europe

4. Nature Baby

This newsletter design brings beautiful typography and soothing color combination into play to create a compelling and persuasive newsletter design.

Nature Baby

5. Percept Brand Design

This creative newsletter has been designed by keeping the target audience in mind and this is the reason why it successfully grabs the attention of the potential customers.

Percept Brand Design

6. Michael Kors

Michael Kors makes use of spanking new and refreshing color and an interesting approach to differentiate the newsletter from others.

Michael Kors

7. Limes Farm

The designer of this newsletter design has successfully kept this design simple and unfussy while giving it a very striking and appealing look.

Limes Farm

8. Disney Pixar

With this newsletter design, they tend to dazzle those who love animated movies. Apart from the design, the message of the newsletter is loud and clear.

9. ScrapBlog

This newsletter apart from being visually appealing also fulfills the main purpose of a newsletter and that is informing its audience about the subject of the newsletter.

ScrapBlog

10. eMAG Newsletter

In this newsletter, you will see extremely high contrast colors along with top notch quality of graphics that looks simply stunning and grabs the attention of onlookers.

eMAG Newsletter

11. Icon Inc

This newsletter design goes well with their tagline “Your Creative Partner”. Further it brings a very innovative approach towards newsletter designs.

Icon Inc

12. Dress Up Diana

This newsletter design perfectly defines the nature of this collage like newsletter design, and this newsletter fits well on the adage ‘A picture worth thousands words’.

Dress Up Diana

13. Sephora

This is a magnificently designed newsletter for advertising beauty products. The use of excellent graphics and color contrast helps in making this newsletter more appealing and stylish.

Sephora

14. Paul Frank Industries

Here you will notice excellent use of graphics that will grab the attention to their flat rate shipping.

Paul Frank Industries

15. IrelandHotels

With a magnificent look at Ireland accompanied by the essential details on going, there is adequate creativity in this newsletter to attract potential tourists to look into the hotel for their next trip for sure.

IrelandHotels

16. Pizza

This newsletter design showcases a yummy and delicious pizza on the plain background which is sufficient enough to fascinate the onlookers.

Pizza

17. Apple

This newsletter brings imaginative use of beautiful graphics into play along with many iPhones that are placed in the shape of a heart in order to embody the love that we all have for the device.

Apple

18. Bing

This newsletter demonstrates what Bing has introduced in the world of the internet. This newsletter invites its users to discover what is popular on Bing.

Bing

19. Miche Bag

This is a well suited template deign for a newsletter that offers exciting deals through newsletter

Miche Bag

20. MapMyRide.com

The tempting graphics and captivating tagline are the important components of this newsletter design that mainly focuses on the excitement of cycling.

MapMyRide.com

21. Splinter Cell

Here the newsletter design is slightly more stylish as compared to other ordinary newsletter designs. The use of black and white colors is quite interesting and makes a distinction between different segments.

Splinter Cell

22. East London Design Show

The color theme of this newsletter is really comforting and delicate. The whole newsletter design has been given a very natural and well accepted look,

East London Design Show

23. Glasshouse

Yet another great example of using black or dark colors to create a strong impression and grab the attention of the audience.

Glasshouse

24. Nike

We can define this newsletter template as being simple, un-cluttered and fresh newsletter design with delicate and nice color combination.

Nike

25. Cafe Diario

Tremendously simple and fresh design for a newsletter without too much graphical components being overstuffed in the design. The content of this newsletter is presented against the plain background giving it a very professional look.

Cafe Diario

26. Steve and Co

The designer effectively has created a very natural and lovely newsletter design for Steve and Co that not only gives you a revitalizing feeling but also is pleasing to eyes.

Steve and Co

27. One is enough

No more added graphical elements are used in this newsletter design rather the designer only takes advantage of nice typography to draw the difference between different elements.

One is enough

28. Look Hear

This creative newsletter design plays tremendously fine with the color handling that makes this newsletter design visually tempting and appealing.

Look Hear

29. District Dining

District Dining newsletter design is simple, uncomplicated and has been designed with the concept of minimalism.

District Dining

30. The Beast Magazine

Yet another excellent example of employing soft and delicate colors while making a strong notion.

The Beast Magazine

31. Appstrakt

Rather unique color contrast you will notice in this newsletter design. The designer has blended grey, yellow, black and white extremely well in a single design.

Appstrakt

32. Webfit

This innovative newsletter design has been created by keeping the target audience and their expectations in mind and this is the reason why it effectively grabs the attention of the potential customers.

Webfit

33. MarketSpace

Another beautiful example of the combination of creativity and skills that can be seen in this newsletter design that sets itself apart from others.

MarketSpace

34. Big Cartel

Big Cartel design is comparatively different and unique from other newsletter designs as it has been designed with an extreme creative mind. The concept of this design

Big Cartel

35. Sprowt’s

This creatively designed newsletter template is one of those templates that grabs the onlooker’s attention at the first glance and inform them about the subject of the newsletter in a very concise and engaging manner.

Sprowt’s

36. Chris Assaad

Chris Assaad makes use of fresh and energizing colors to distinguish the design of their newsletter from the others and creating a powerful first impression.

Chris Assaad

37. Hard Rock

Another best example of the black newsletter design that looks simply stunning, eye-catching and highly appealing.

Stampin Up

38. Unica

This design is somewhat simple and designed on the concept of minimalism. A beautifully designed and neat design.

39. Namesco

This interesting newsletter design is an excellent example of acquiring loads of information into a small space concurrently keeping the whole thing de-cluttered as well as user-friendly.

Namesco

40. Sioux Chief Patriot

This particular template plays quite well with the eye catching color combination that makes this newsletter design visually appealing and soothing.

Sioux Chief Patriot

41. Lands End, Email Marketing

In this newsletter design, you will see how the designer has used a very simple concept in an extremely creative and innovative way.

LANDS END, E-MAIL MARKETING

December 23 2011

21:00

50 Creative Websites with Highly Unusual Navigation

Navigation plays a crucial role in the success or failure of any website. An easy to navigate website is more likely to be explored in more detail as compared to a website with more complex navigation. Regardless of the functionality of the website, the navigation is the first thing that must be taken care of.

Accomplishing matchless navigation that successfully performs its function is almost similar to mounting Mt. Everest. Getting an exceptional navigation with wonderful functionality makes the website easy to navigate and interesting for the visitors, therefore assuring a better user experience.

At this time, we have selected some websites with marvelous and distinctive navigational elements that will not only enthuse you, but will demonstrate to you how to merge novelty with realism. Enjoy!

1. Tvrdek

On this website, you may feel that the website does not have any content but once you explore its navigation, you will love to browse this website more than anything.

Tvrdek

2. Racket

Here you will see the navigation menu hanging in the air. The navigation menu looks somewhat off the cuff but at the same time it looks so cool.

Racket

3. Iamyuna

Here the navigation may appear minimal and negligible but once you keep your mouse on the option it shows you the complete list of all available choices. The mouse over effect is simply amazing.

Iamyuna

4. Kutztown

Kutztown creates a very artistic look with its design and typography, further the navigation adds more beauty to it.

Kutztown

5. Samsung Mobile

Samsung Mobile features an extremely dynamic and animated website with a unique and appealing navigation style.

Samsung Mobile

6. Case Studies

Centrally aligned navigation with some links at the top of the page is truly an extraordinary approach for a navigation menu. Clicking on any centrally aligned option will reveal the detail page.

Case Studies

7. Acko

An artistic representation even through the choice of navigation menu. Acko takes advantage of its bright color combination to make its navigation even more attractive.

Acko

8. Helmy Bern

Helmy Bern features a somewhat disorganized top navigation but the side bar and the bottom navigation menu are simply amazing. The use of the right color to create the right impact can be seen here.

Helmy Bern

9. Cathy Beck

Cathy Beck makes use of a unique approach for her site navigation. Here the navigation is set at the bottom of the page rather than the top of the page, further the mouse over effect is out of the ordinary.

Cathy Beck

10. TinyTeam

TinyTeam offers a very systematic and pragmatic navigation menu that eliminates any confusion a new visitor may have in browsing the website and finding its desired information.

TinyTeam

11. Alexbuga

The sliding effect on mouse over is the key point of navigation plan of this website that makes this navigation extremely classy and elegant. The main navigation reveals when you place your mouse on the logo design at the top of the page.

Alexbuga

12. Thibaud

It’s truly fun to browse this website. You can actually arrange and rotate the cards present on the home page by simply dragging and dropping them to your desired location and can see the portfolio by clicking on it.

Thibaud

13. Small Stone

An unusual navigation that matches the website name. Here the designer has successfully imitated a recording device as a navigation menu.

Small Stone

14. Gleis3

The navigation plan used in Gleis3 website looks somewhat like a road map that leads you to your desired location easily and effortlessly. Simply click on an option and you will get the relevant information.

Gleis3

15. Amore

With a horizontal as well as vertical navigation plan, this website holds its own charm. The main navigation menu is placed at the bottom of the page with some cool and beautiful mouse over effects.

Amore

16. Yodabaz

Here the navigation is presented with an animated background image sufficient enough to create that attention grabbing first impression. Clicking on the portfolio reveals some of their excellent work.

Yodabaz

17. Sensi Soft

The whole navigation is set to be at the center that makes this website extremely well-organized and easy to navigate. The effects that this website uses are beyond the ordinary mouse over effects.

Sensi Soft

18. Nickad

Nickad brings flash into play to make its navigation menu and overall website design look stunning. This is something that you will never find in any other website navigation plan.

Nickad

19. Not Forgotten Movie

The navigation options in this website are in the shape of playing cards and when you put your mouse on it, they will give a burning effect suitable with the theme of the website.

Not Forgotten Movie

20. 75b

75b also has a horizontal and vertical navigation plan. The main options or menu is placed with the vertical navigation while the sub-menus are placed with the horizontal navigation.

75b

21. Dave

This website not only brings an exceptional use of navigation into play but also experiments with unique typography to set it apart from dozens of other similar websites.

Dave

22. Vernon Clarke

Here the whole navigation has been summed up within an icon of a film tape with some small icons on it. Besides that the website also features some exceptional work on the main page.

Vernon Clarke

23. Booma Webdesign

Simple and efficient navigation without extra or jumbled up elements. The navigation used here is also easy to understand for the new visitors.

Booma Webdesign

24. Revolution Driving Tuition

Simple and nice navigation with no more classy effects, even a novice can also understand how this website works.

Revolution Driving Tuition

25. Jeremy Levine

An imaginative demonstration of the navigation menu that makes this website fun to browse. Jeremy Levine takes advantage of its dazzling color combination to make its navigation even more eye-catching.

Jeremy Levine

26. Wards Exchange

The whole navigation has been placed at the side of the website design that makes this website tremendously well-ordered and easy to navigate. The effects this website uses are beyond the ordinary mouse over effects.

Wards Exchange

27. Sideshow Press

The navigation is presented with some cool and appealing effects giving this website a personal and human touch. Clicking on any option will take you horizontally to the relevant section.

Sideshow Press

28. Bountybev

Bountybev make the most of its bright color combination to make its navigation even more attention-grabbing. The use of bold typography further makes this website design hard to forget.

Bountybev

29. Noonstyle

Here again, the navigation has been set at the sidebar to make this website look well organized and efficient. When clicked, the website also shows the relevant options in the sidebar.

Noonstyle

30. Vanity Claire

Easy and on the contrary an artistic approaches to design navigation for Vanity Claire that not only matches with the main concept of the website but also affords regularity.

Vanity Claire

31. EwingCole

Here, the navigation options are divided into two parts. The top most navigation reveals the content in the customary style while the second navigation is presented in a somewhat trendy style.

EwingCole

32. Custom Tshirts

Here the main links are presented at the top while a portfolio or T-shirt photo are presented with a mouse over effect that enlarge the photo when you place your mouse on it.

Custom Tshirts

33. Hello Goodlooking

When browsing this website, initially you may feel like that this website does not contain any content but once you explore its navigation, you will love to browse this website more than anything.

Hello Goodlooking

34. Christian Sparrow

Christian Sparrow makes use of a simple but attractive navigation plan that not only grabs the attention of the visitors but also creates an everlasting first impression.

Christian Sparrow

35. Enila

Enila has a rather jumbled navigation menu but the side bar at the top of the page makes it simple and easy to navigate, and also add an interesting feel to the design.

Enila

36. Salt Films

In this navigation menu the thing that stands out is the animated hand which gives the whole website a very unique and appealing look.

Salt Films

37. Blue Bug Digital

Blue Bug Digital makes use of an animated background that revolves 360 degree providing you a complete preview along with the navigation menu.

Blue Bug Digital

38. Section Seven

Section Seven also uses its navigation menu in an extremely creative and artistic way making the whole website look and design visually appealing and remarkable.

Section Seven

39. Sq Circle

While the website loads completely, the message says we are creative and pragmatic. That proves true when you explore the site in detail. The navigation truly is out of the box and extraordinary.

Sq Circle

40. EyeDraw

EyeDraw presents a very non-fussy and clean website layout giving its visitors an easy to navigate and understand website. The main options slide to give you a complete preview when you place your mouse on it.

EyeDraw

41. Light Motion design

Light Motion design also provides a navigation plan or guide for those who are not very internet savvy. On the whole, the navigation is exceptional and has been designed in a very systematic way.

Light Motion design

42. Studio Stemmler

Studio Stemmler combines effective navigation, excellent design and a beautiful color combination all in a one to get this visually appealing and attractive website to the surface.

Studio Stemmler

43. Eric johansson

A fun and irreverent site that also give you the option to view the site in a more traditional way.

Eric johansson

44. Iipvapi

Innovation at its very best is what that describe this navigation menu perfectly. Simple but effective navigation with some cool effects.

Iipvapi

45. Narrow Design

A vertically sliding navigation menu that moves to the left when one item is clicked giving its details on the remaining part of the screen.

Narrow Design

46. Organic Grid

Organic Grid holds a visually appealing website navigation that consists of more than 90% of the main page.

Organic Grid

47. Smriyaz

An extremely beautiful website design with neat and efficient navigation menu that guides its visitors how to explore the site to make the most of it.

Smriyaz

48. Unfold

Simple but a creative approach to design navigation for Unfold that not only matches with the main concept of the website but also provides symmetry. Simply click on the top navigation links to explore the site in detail.

Unfold

49. Yugop

The navigation is placed at the bottom of the page with some exceptionally animated effects.

Yugop

50. Vanalen

Vanalen also presents a very unusual and unique navigation menu that is totally different from the ordinary websites. The navigation plan used in this website is rare and exceptionally creative.

Vanalen

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

December 06 2011

21:00

20 Mind-Boggling Parallax Website Design And How To Make One

There hasn’t been a design style that has captured the web’s creative community like that of parallax website design in ages, which, in non industry terms, is about a few months. You might be wondering what parallax website design is, I don’t believe I have ever heard of this. Well actually you have heard it, and seen its use for some time now. Before going into showcasing some really well designed websites utilizing parallax design, let’s take some time to examine and explain what it is.

By definition, parallax means the apparent displacement or the difference in apparent direction of an object as seen from two different points not on a straight line with the object. In web design use, parallax refers to the scrolling technique used to create the illusion of depth on websites. This technique is not new however, this technique has been around for quite some time in the web design community before its recent rise to a trending style. The use of this technique to create the illusion of depth can also be traced back to older forms of media, like old school video games for instance. Below you’ll find some nicely designed websites that masterfully utilize this hot new trend.

1. Living Word

As you scroll down the homepage, the header stays in its position but the background changes in the direction you are scrolling in. The images and text within the page also add to the experience, making this a really cool effect.

2. Nike Better World

An oldie, but still quite a goodie. This website was one of the early adopters that caught wind of how cool parallax web design is.

3. Dezignus

Keep your focus on the background behind the logo.

4. Sullivan NYC

Get ready to engage? Well considering their great use of parallax design, that seems like quite the understatement.

5. Cultural Solutions UK

Great use of adding motion in the header, and using a simple background to make such a cool effect.

6. The Beatles Rockband

Just keep your focus on the clouds.

7. Smart USA

As you scroll, the car zooms in closer to you.

8. Emm and Enn

See even the kid in the picture is excited about parallax web design. It is cleverly incorporated into this frame to make for a nice playful experience.

9. Convax Solutions

Look how they bring their sketches to life with parallax design.

10. XHTML Slicing

This designer obviously likes to hang with parallax design. The hanger effect is an interesting twist to the normal use of this trend.

11. Heart 2 Heart

Just follow the arrows.

12. Manufacture d’essai

The eyes, and feet, of these models follow you everywhere.

13. Cantilever Fish & Chips

Keeping it nice a simple with a layered background.

14. Art of Flight

This is one of the best examples of parallax design on the net! There’s so much depth and various angles of the site as you scroll. You have to see it for yourself to believe it.

15. Billy’s Downtown Diner

A very nice and playful use to make the header more fun.

16. Phase 2 Design Studio

Who would’ve guessed that the journey of a rain drop through a plumbing system could be so much fun?

17. Tennessee Trails and Byways

Just follow the trail of signs throughout the city. You’ll enjoy the ride.

18. Jan Ploch

The more you drink, the more knowledge you gain. Can you make it all the way to the end?

19. Campaign Monitor is Hiring

Another good example of what fun can be had with multiple image layers.

20. Smokey Bones

On this site you can make a burger, have a drink of beer, and after all that play some pool in the footer. What more could you need?

Learning How to Do It

After learning what parallax website design is, and seeing some really well designed sites utilizing this hot style, you’re probably wondering how you can use this style in your next design. Well  fortunately for you, implementing this style is not that difficult. There are actually four easy to understand methods that can be used to create a parallax website design.

The Layered Method

The use of multiple backgrounds that can move independently horizontally or vertically, depending on your preference, and can be composited on one another.

The Sprite Method

Simply put, using one big image comprised of multiple images that displays only parts of that said image when at different positions. A commonly used effect in navigation menus.

The Repeating Pattern Method

Scrolling displays built up of individual tiles can be made to float over a repeating background layer

The Raster Method

Lines of pixels in an image are typically composited and refreshed in top-to-bottom order with a slight delay between drawing one line and drawing the next line.

This effect is quite easy to do yourself, actually you’ve unknowingly been learning how to do this effect for quite some time. Using such tools as JavaScript, MooTools, CSS, and jQuery, there isn’t that much new material to learn. Below you can find a nice collection of tutorials and resources to help guide you along the way.

May 07 2011

10:00

Pricing Tables – Best Practices, Tips and Inspiration

Pricing tables have become an essential element of every online business website. While it can hike up your business if done neatly, it can also be the tombstone of your online business. A pricing table’s task is to help users choose the best pricing plan for them based on their needs. But we often find the tables dazzling and hard to understand. Designing an efficient pricing table requires a subtle yet solid mix of design and usability. In this post I’m going to share some tips on creating stunning pricing tables, discuss some of the best practices and present a list of some of the most successful pricing tables out there.

Structure

Most of the pricing tables are horizontal because it’s easier to compare the offers and see features. That doesn’t mean you should always use the horizontal layout, though. It really depends on the variety and complexity of the information you want to display in the chart. Best practice is to use a horizontal solution when you have to display a lot of features and a vertical one when you don’t have a lot of plans to offer and you’re not planning to include a long list of features.

Dropbox-pricing-charts-best-examples-tips-inspiration

Dropbox is an example of vertical layout pricing chart. Their plans only have minor differences so this is an efficient way to display them.

Champion-sound-pricing-charts-best-examples-tips-inspiration

Champion Sound is a classic example of horizontal pricing table structure.  They need to include some features which are easier to compare viewed side by side so a horizontal layout is the best solution here.

Design

Design can do one of two things to your business – either sink it or raise it to the top. You have to be very careful when designing a pricing chart. Fonts, headlines, layout – it all has to be balanced and done neatly. Furthermore you have to make sure the chart’s design works with the main site. However don’t forget about your main goal. In pricing tables, design is just a tool to achieve your objectives, namely – increase sales. Simplicity is the key to success. Remember that you’re not creating a collage for school, you’re creating a design for a specific reason. Don’t clutter your chart with unnecessary elements. A common mistake is to write down a list of features most of the plans don’t offer and then put dozens of red crosses in your chart. Consumers don’t want to see what you’re not offering, they want to see what you’ve got and for what price.

Think-vitamin-pricing-charts-best-examples-tips-inspiration

Think Vitamin is an excellent example of proper use of design in pricing charts. In the left section you can see features and the most important phrases are bold. They’re using subtle green checkmarks and there are only two red crosses which are necessary to compare these two plans.

Rulefm-pricing-charts-best-examples-tips-inspiration

Rule.fm is another example of appropriate use of design in pricing charts. They’ve adapted the chart to their main design and have managed to use design elements neatly and plainly.

Emphasis

Emphasizing one specific plan is a common practice and you should do the same. With a lot of different plans to choose from it’s important to make it as easy as possible for your customers to choose the right one for them. With an emphasis on one particular plan you immediately draw your visitors attention to that one special plan. Most of the services choose to highlight the most popular package, however you can experiment. Yet don’t go to extremes- highlighting the cheapest and most expensive plans won’t bring much income. Emphasizing the right one can seriously enhance your business and it can also be incredibly useful from a potential customers point of view.

There are plenty of ways to emphasize a plan. Vivid colors, different backgrounds, badges, frames, huge call to an action buttons. Design and creativity – it’s all up to you. However keep in mind that exaggeration will only do harm. Never emphasize more than one pricing plan. Using different backgrounds for each pricing plan can be fine though you have to be careful with that too.

Shopify-pricing-charts-best-examples-tips-inspiration

Shopify uses a bigger background graphic and price font size to emphasize their most popular plan. They’re using different backgrounds for each pricing plan though they haven’t exaggerated the color scheme and the colors create the right ambiance.

Ning-pricing-charts-best-examples-tips-inspiration

Ning is using a different background color to emphasize one specific plan. Note that it’s the medium-price plan so emphasizing is most likely used as a marketing strategy. The green immediately catches your attention and most likely you won’t even look at the other pricing plans.

Difference

If you’re offering both free and premium plans then from the business perspective your goal is clear – convince people to choose the premium plan. This is where design and marketing play a major role. You have to be able to share your message quickly and in a visually effective way. It may not be important if you don’t offer a free plan though you should still be aware of this. Try to distinguish the differences between pricing plans as clearly as you can. A common mistake you should avoid is writing down a list of features that are available in each plan. Also think about the sequence. You want to place your main and distinctive features for each plan somewhere near the top. As you’re coming to the bottom you can start to include some features that are provided in all plans.

Big-cartel-pricing-charts-best-examples-tips-inspiration

When looking at the Big Cartel pricing chart I just can’t fight the feeling of actually wanting to sign up. They’ve managed to distinguish their premium plans from their free plans and make it very appealing.

Evernote-pricing-charts-best-examples-tips-inspiration

Evernote has also achieved an appealing look for their premium plan. Besides the smooth pricing chart they’ve got some descriptions with icons in the page. Remember that charts ain’t the only way to attract clients.

Be Clear

While you may think that offering more plans is effective and gives costumers a wider range of choice,having too many plans can severely affect your bottom line. What’s more, a lot of services don’t offer enough unique features to sustain a lot of pricing plans. The most popular solution is to have about 2-5 plan options. Going beyond that will just confuse your costumers and harm your business.

So you’ve created your, let’s say, three pricing plans and now you have to introduce the clients to the services you offer. You write down every single thing you offer including a lost password’s recovery. Then you look at your final result and conclude that you have to scroll the page down to see all the features. That’s a fine thing to do if you want to shoo your costumers for good.

Having the right pricing plans isn’t enough. You have to present your services the right way. There are pricing tables that leave you uncertain and confused about what the company is trying to sell. And there are tables that leave you puzzled and overwhelmed by the quantity of features. With more features the amount of information the visitor has to absorb grows. You need to find the right balance between too much and not enough information. You want your feature list to be comprehensive but concise so that after reading it the potential consumer can knows what he’s getting for his money.

Animoto-pricing-charts-best-examples-tips-inspiration

Animoto pricing chart undoubtedly won’t leave you confused. They’re using a minimalist design style with some accents. They’re offering three pricing plans and each of them is distinct. The main features are listed at the top and followed by more advanced features which are offered only in the pro plan.

Draftboard-pricing-charts-best-examples-tips-inspiration

Draftboard has gone with the “less is more” approach. They’re using a modest gray pricing chart with green accents. The chart is not cluttered with unnecessary elements so it’s very easy to comprehend. Plus they’ve highlighted one particular plan so it’s even easier for potential clients to make the decision.

Wrapping up

A lot to take into consideration, isn’t it? Well, wherever there’s money involved you’ll have to adapt and shape your design in order to achieve the desired result. I hope these five points helped you to get a little insight into designing effective pricing tables and gave you a clearer idea about embracing design and how best to combine it with marketing. These guidelines aren’t written in stone and it’s up to you how you follow them. Maybe you find them useless for your business and that’s absolutely fine. There is no one right formula for designing pricing tables since every business is a bit different. However I believe that these points made you at least consider your existing/forthcoming pricing table. That would be about it from theory outlook. Time to give you some terrific examples. Below you’ll find 15 examples of well-designed pricing tables for your inspiration.

Inspiration

1. Skype

Skype-pricing-charts-best-examples-tips-inspiration

2. Teambox

Teambox-pricing-charts-best-examples-tips-inspiration

3. Proposable

Proposable-pricing-charts-best-examples-tips-inspiration

4. Vaultpress

Vaultpress-pricing-charts-best-examples-tips-inspiration

5. Drupal Gardens

Drupal-gardens-pricing-charts-best-examples-tips-inspiration

6. Wufoo

Wufoo-pricing-charts-best-examples-tips-inspiration

7. Formstack

Formstack-pricing-charts-best-examples-tips-inspiration

8. Squarespace

Square-space-pricing-charts-best-examples-tips-inspiration

9. Zendesk

Zendesk-pricing-charts-best-examples-tips-inspiration

10. Crazyegg

Crazyegg-pricing-charts-best-examples-tips-inspiration

11. WooThemes

Woothemes-pricing-charts-best-examples-tips-inspiration

12. Campaign Monitor

Campaign-monitor-pricing-charts-best-examples-tips-inspiration

13. Raven Tools

Raven-tools-pricing-charts-best-examples-tips-inspiration

14. Typekit

Typekit-pricing-charts-best-examples-tips-inspiration

15. Business Catalyst

Business-catalyst-pricing-charts-best-examples-tips-inspiration

March 27 2011

10:00

31 Fresh and Useful Photoshop Tutorials

Photoshop is the premiere graphic editing program used by designers all over the world. It’s popularity never stops growing and as it grows more people want to try to create something beautful, fun or just weird with this incredible software. Photoshop is second to none and today we have compiled a great collection of awesome, useful and totally fresh Photoshop tutorials.

1. Design a Clean and Corporate Website Layout

Design a great-looking, high-quality clean and corporate website layout with the option to download the PSD file

2. Create a Professional App Store Web Layout

Check out this kick-ass photoshop tutorial which teaches you how to make a professional looking app store layout

3. Design a Cool Textured Portfolio Design

One more stunning and well-prepared layout Photoshop tutorial which teaches you how to design a nice textured portfolio design.

4.Create the Surreal Photo Illustration checkmate

This Photoshop tutorial teaches you some techniques, but especially a surreal and abstract photo manipulation.

5. Create a Mysterious Photo Manipulation in Photoshop

We’re moving on with another Photoshop, photo-manipulation tutorial which shows off the creation of a dark and mysterious poster.

6. Create a Speeding Car Scene with Lighting Effects

This Photoshop tutorial has a well-written and explained process of creating a colorful, bright car scene.

7.Create a Fallen Rain Soaked Angel Composition

Take a look at this awesome and well-designed dark angel composition which shows the use of some kick-ass skills.

8. Create a Nature-Inspired Photo Manipulation

The following Photoshop tutorial teaches how to create a stunning nature inspired and bright photo manipulation.

9. Create a Dark and Surreal Poster in Photoshop

One more Photoshop tutorial which teachesyou how to design a dark/surreal and awesome poster design

10. Serene Fantasy Photo Manipulation

Learn how to create a high-quality and beautiful work of art by following this tutorial which shows the creation of a serene fantasy poster.

11. Design a Personal Website Layout

Design an amazing personal website layout in Photoshop by taking a look at this useful tutorial. It is also possible to download the final version in PSD format for free.

12. Create a Landing Page in Photoshop

This well-written Photoshop tutorial will teach you how to create an elegant landing/single-page  website layout.

13. Dezign Folio Portfolio Designing Tutorial

If you need or want another great website layout, then this tutorial will work great for you. Learn to make a very detailed portfolio design.

14. Create a C0lorful Aged Poster

The following tutorial goes into detail to teach you how to create a colorful and aged poster.

15. Create a 3D Industrial Style Icon

This really interesting tutorial will show off how to make a 3 dimensional industrial styled icon in Adobe Photoshop.

16.How to Draw a Classic Electric Guitar in Photoshop

This useful and really well-prepared tutorial will teach how to create a detailed and stunning classic guitar.

17.Making a Super-Hero Movie Teaser Poster

By following this stunning tutorial, you will design a great super-hero inspired move teaser poster

18.How to Create an Intense Movie Poster

Another tutorial on how to create a movie poster for Photoshop. This time you’ll be learning how to make an intense, bright poster.

19. Ringed Supernova Photoshop

The following surreal and abstract Photoshop tutorial will teach you how to create a nice-looking composition of supernova planet.

20. Drawing of a Pig Tutorial

This is probably the best tutorial in this showcase. It teaches you how to create a very realistic, yet abstract, pig portrait in Photoshop.

21. Create a body made of rain

Another kick-ass and high-quality poster design on making a person look like they’re made of rain.

22. Playstation Portable Realistic Buttons

Learn to make some well-designed PlayStation buttons by following this really useful tutorial.

23. Milk Monster Design Tutorial

Make a monster from almost anything! Here you will find out how to create cute monsters that will scary anybody!

24.How to Create an Outstanding Wallpaper

Hard to find something you like for a background? You don’t need to search at all, because here you will learn how you can create original backgrounds by yourself!

25.Create an Ice-Cream Type Treatment in Photoshop

Awesome text effect made out of simple things, Just what you need to learn basic illustration techniques!

26. Create a Shiny Apple

This tutorial will teach you how to take a boring fruit and make it really a ‘peel’ ing!

27. Create a Balanced and Abstract Poster

Abstract doesn’t mean easy! Here you will find a way to make it easier by learning the balance in an abstract composition.

28. Create a Radar Icon in Photoshop

A small tutorial that will give you the hints for creating your own unique and awesome radar icon.

29. Awesome Glitter Text Effect

Shiny and glossy, here you will find how to make your text like that just using glitter texture and some little tricks.

30. Create a Dark Digital Art Piece

This can be a source of inspiration + hints for your own piece of art, learning how to use the grunge effect in your photos.

31.Make a Tron-Inspired Photo Manipulation

Think that surreal manipulations are too hard for you? Here you will learn the basics and create a fine TRON style picture.

March 21 2011

10:00

Designing Quality Infographics: Tips, Resources and Inspiration

Infographics are graphic visual representations of data and information. They come in extremely handy when you need to explain complex information, numbers or data rather quickly and effectively. Infographics are used worldwide from magazines to metro stations. A great infographic can render complicated information easily understandable and engrossing. However, infographics can be pretty hard to design since you have to gather together a lot of information and make it look good. In this article you’ll find some tips for designing outstanding infographics as well as some resources and inspiration.

Succinctness

When creating an infographic your main goal is to answer a specific question or problem. Broach a question you want to cover in your graphic and start by answering it concisely. After you’ve done that you can add additional facts or information to make your graphic broader. Being concise about your topic will also help to create a more effective visualization of the graphic.

Disastrous-oil-spills-design-outstanding-infographics-tips-resources

The World’s Most Disastrous Oil Spills is the title for an infographic created by Travel Insurance. Their infographic answers the question precisely. After the map with biggest oil spills they’ve added more significant and interesting facts. This is a prime example of being concise and relevant.

Creativity

Ingenuity and design is what separates an infographic from the simple charts you see elsewhere. Think of an infographic as a poster in which you can express yourself while keeping in mind the information you have to include. Don’t be afraid to use typography, illustrations, icons or other design elements. Creativity and a bit of an audacious design will make your infographics stand out.

Spider-crane-design-outstanding-infographics-tips-resources

This graphic, supplied by Minicrane-Hire provides some information about the original UNIC mini-spidercrane, which is celebrating its 8th anniversary this year. The design is definitely unique and creative,and is more about catchy and light facts than a serious analysis, so the emphasis is on creativity. The design is sort of grungy and resembles a poster. It’s really pleasing and engaging.

Visualization

You don’t want your infographic to be just plain text. Plain data is boring and can sometimes be hard to comprehend. Use geometric shapes, charts, diagrams, anything that can help people visualize your data. If possible, replace words with icons or symbols. Of course, you have to keep the information front and center since that’s the ‘info’ in infographic. Nevertheless, remember that nowadays people are a lot more visual thanks to technology, and aren’t as interested in plainly presented information.

Big-byte-design-outstanding-infographics-tips-resources

This infographic by Rackscape is an outstanding example of visualization in infographics. They’ve created a graphic about bytes, which may seem quite boring, though they’ve managed to make it extremely enjoyable and interesting. Each piece of information is accompanied by a large colorful illustration so the infographic is easy to comprehend.

Organization

Precise and well-organized information is the basis of any great infographic. Compare various information sources, make sure your acquired data is objective and relevant enough. Even the most elegant design won’t attract readers if the information is incorrect. Sometimes Google won’t be enough, you’ll have to visit a library or even turn to an expert. Infographics will be easier to create if you have some prior knowledge about the topic, or have a really good idea where to research the information. Information organization is one of the most essential things when designing an infographic. You have to try to organize your information contextually and visually.

Plates-collide-design-outstanding-infographics-tips-resources

This infographic about earthquakes is a collaboration between GOOD and Column Five Media. Design is not playing the main role in this graphic though the information and facts are very applicable and neatly organized. They’ve includes some important facts together with some demonstrative graphs.

Transparency

Infographics can be subjective and lead readers to biased conclusions. Always cite your information sources and give readers the chance to explore the information deeper if they want to. Give them the opportunity to find additional information straight from your infographic. Don’t hide your information (no matter how ‘top secret’ you think the source is) because you’re publishing the graphic one way or another.

Quest-power-africa-design-outstanding-infographics-tips-resources

This is another collaboration between GOOD and Column Five Media. They’ve created an infographic about electricity and energy supplies in Africa. It’s a complex subject so some people might want to look deeper into it. Though they’ve not included direct links, there is the list of sources used in the bottom of infographic.

Accuracy

Be accurate and precise when designing infographics. It’s easy to make mistakes when you’re trying to scale your data in charts and graphics. Use different sizes and shapes that visualize data, but don’t be excessive. You should never draw the shapes by hand and without a base scale. Use mathematical equations, compare the numbers and then use the same proportions in graphics.

People-buy-online-design-outstanding-infographics-tips-resources

In this infographic by Column Five Media we can see perfect proportions being used. They’re using proportional semicircles to compare goods purchased in store with goods purchased online. The radius ratio of circles ideally matches the ratio of numbers.

Relevance

Find the style and look that fits your infographic. If you’re creating an infographic about an important and sensitive topic don’t make it bright and dashing. Choose a design that’s appropriate and reflects the topic best.

Struggling-countries-around-world-design-outstanding-infographics-tips-resources

This infographic by Visions Service Adventures is a perfect example of appropriate infographic design. They’ve made an infographic about struggling countries in the world so they’ve included a world map as well as some illustrative icons and illustrations that reflect on the topic.

Simplicity

Don’t exaggerate with visual elements and the amount of information in infographics. Having a neatly-designed and informative infographic is good, but too much detail can make it too scattered and difficult to comprehend. Knowing your target audience will also help you to adjust the visual complexity and design of the infographic. If you’re designing an infographic, let’s say, for a poster that’s going to be seen on a streetlight a simple infographic is more likely to attract attention. People are not willing to spend time on complex graphics and data if they’re in rush. However if you’re creating an infographic for a magazine you can afford to include more complicated charts and in-depth information because it’s more likely that people will spend more time looking at your infographic.

Deal-bloggers-design-outstanding-infographics-tips-resources

What’s The Deal With Bloggers by Flowtown is a great example of simplicity in infographics. They’ve used a plain background, solid colors and simple charts to present the data. The result is a splendid, demonstrative and easy to understand infographic.

Blogs & Related Sites

Just like with web design, there are many blogs out there dedicated to infographics and data visualization. Even if you’re not so interested in infographics you can find really useful and interesting information on some of them. Below you’ll find 10 of the best blogs and websites dedicated to infographics, data visualization and the art of information.

1. Flowing Data

Flowing-data-design-outstanding-infographics-tips-resources

FlowingData explores how designers, statisticians, and computer scientists are using data to understand ourselves better – mainly through data visualization. Money spent, reps at the gym, time you waste, and personal information you enter online are all forms of data. How can we understand these data flows? Data visualization lets non-experts make sense of it all.

2. Information Aesthetics

Information-aesthetics-design-outstanding-infographics-tips-resources

Information Aesthetics is a weblog that explores the symbiotic relationship between creative design and the field of information visualization. More specifically, it collects projects that represent data or information in original or intriguing ways.

3. The Infographics Showcase

Showcase-design-outstanding-infographics-tips-resources

Infographics Showcase is collecting the best of the web infographics with a nod to some exciting graphic design. If you love information communicated in a visually appealing and simple manner then you are in the right place.

4. Information Is Beautiful

Information-beautiful-design-outstanding-infographics-tips-resources

David McCandless, is a London-based author, writer and designer. He’s written for The Guardian, Wired and others. He’s into anything strange and interesting. Information Is Beautiful is his blog where you’ll find visualized ideas, issues, knowledge and data.

5. Cool Infographics

Cool-infographics-design-outstanding-infographics-tips-resources

Cool Infographics is a blog that highlights some of the best examples of data visualizations and infographics found in magazines, newspapers and on the Internet.

6. Strange Maps

Strange-maps-design-outstanding-infographics-tips-resources

Frank Jacobs loves maps, but finds most atlases too predictable. He collects and comments on all kinds of intriguing maps—real, fictional, and what-if ones—and has been writing the Strange Maps blog since 2006.

7. Chart Porn

Chart-porn-design-outstanding-infographics-tips-resources

Chart Porn is compiled by Washington DC based economist/artist Dustin Smith.  This site grew out of an admiration for all the amazing data analysis work being done in the world, and the desire to pull it all together in one place.  The blog’s original focus on economics and graphic design has expanded over time to cover a wide range of topics.

8. Visual Complexity

Visual-complexity-design-outstanding-infographics-tips-resources

VisualComplexity intends to be a unified resource space for anyone interested in the visualization of complex networks. The project’s main goal is to leverage a critical understanding of different visualization methods, across a series of disciplines, as diverse as Biology, Social Networks or the World Wide Web.

9. Data Visualization

Data-visualization-design-outstanding-infographics-tips-resources

Data Visualization is a transversal discipline which harnesses the immense power of visual communication in order to explain, in an understandable manner, the relationships of meaning, cause and dependency which can be found among the great abstract masses of information generated by scientific and social processes.

10. Infographics News

News-design-outstanding-infographics-tips-resources

Infographics News is a blog dedicated primarily to news, curiosities and information about infographics. They also cover news related to data visualization and unusual infographics.

Information Sources & Resources

Information quality is crucial in infographics. If you have to work with infographics quite often, having a resource and data library is very important. I’ve gathered some of the best free websites and services that offer high-quality current data in many categories.

1. U.S. Census Bureau

Census-bureau-design-outstanding-infographics-tips-resources

U.S. Census Bureau is the leading source of quality data about the nation’s people and economy. They provide the best mix of timeliness, relevancy, quality, and cost for the data they collect and provide. This website contains the Census Bureau’s Statistical Quality Standards, information quality guidelines, and procedures to seek correction of information that does not comply with the information quality guidelines.

2. Gallup

Gallup-design-outstanding-infographics-tips-resources

Gallup Daily News provides unique, unrivaled insight into the political, economic, and social issues of the moment. Gallup Daily and global tracking make Gallup Daily News a must-read for audiences that need the most accurate and up-to-date information on the thoughts of people around the world.

3. Reuters

Reuters-design-outstanding-infographics-tips-resources

Thomson Reuters is the world’s largest international multimedia news agency, providing investing news, world news, business news, technology news, headline news, small business news, news alerts, personal finance, stock market, and mutual funds information available on Reuters.com, video, mobile, and interactive television platforms.

4. Mbendi

Mbendi-design-outstanding-infographics-tips-resources

MBendi Information Services (Pty) Ltd is a privately owned Internet business publishing company founded in 1995 and based in Cape Town, South Africa. The company uses the Internet to support business and political decision makers worldwide.

5. NumberOf

Number-design-outstanding-infographics-tips-resources

Here at NumberOf they try to answer the question that begins with “How Many..?”. All the facts are divided into five different categories. In order to keep the facts correct, they verify each fact after 6 months of its last modification.

6. Nation Master

Nation-master-design-outstanding-infographics-tips-resources

Nation Master is a massive central data source and a handy way to graphically compare nations. NationMaster has a vast compilation of data from such sources as the CIA World Factbook, UN, and OECD. Using the form above, you can generate maps and graphs on all kinds of statistics with ease.

7. Economic Research Service

Economic-research-service-design-outstanding-infographics-tips-resources

The Economic Research Service is a primary source of economic information and research in the U.S. Department of Agriculture. With over 350 employees, ERS conducts a research program to inform public and private decision making on economic and policy issues involving food, farming, natural resources, and rural development.

8. Every Block

Every-block-design-outstanding-infographics-tips-resources

EveryBlock filters an assortment of local news by location so you can keep track of what’s happening on your block, in your neighborhood and all over your city. They aim to collect all of the news and civic goings-on that have happened recently in your city, and make it simple for you to keep track of news in particular areas. They’re a geographic filter — a “news feed” for your neighborhood, or, yes, even your block.

9. Guardian Data Blog

Guardian-data-blog-design-outstanding-infographics-tips-resources

Guardian News & Media (GNM) is the national division of Guardian Media Group. It publishes the Group’s flagship national newspapers – the Guardian and the Observer – as well as Guardian Weekly, one of the world’s best-selling international weekly newspapers, and the guardian.co.uk website. Their Data Blog is an awesome place to find infographics and data visualization daily.

10. World Bank Data

World-bank-data-design-outstanding-infographics-tips-resources

This site is meant to provide all users with improved access to World Bank data and to make that data easy to find and use. The World Bank recognizes that transparency and accountability are essential to the development process and central to achieving the Bank’s mission to alleviate poverty.

11. Freebase

Freebase-design-outstanding-infographics-tips-resources

Freebase is an open, Creative Commons licensed repository of structured data of almost 20 million entities. An entity is a single person, place, or thing. Freebase connects entities together as a graph. Most of the topics are associated with one or more types (such as people, places, books, films, etc) and may have additional properties like “date of birth” for a person or latitude and longitude for a location. These types and properties and related concepts are called Schema.

12. Geo Commons

Geo-commons-design-outstanding-infographics-tips-resources

GeoCommons enables everyone to find, use and share geographic data and maps. Easily create rich interactive visualizations to solve problems without any experience using traditional mapping tools.

13. Transparency Data

Transparency-data-design-outstanding-infographics-tips-resources

Transparency Data is a central source for federal lobbying disclosure, federal grants and contracts, earmarks and federal and state campaign contributions. Here you can begin your search, find the information you need, and then download records of what a candidate has received, what an individual has given, how much an organization has spent on lobbying, and many other queries.

14. OECD Statistics

Oecd-design-outstanding-infographics-tips-resources

The mission of the Organisation for Economic Co-operation and Development (OECD) is to promote policies that will improve the economic and social well-being of people around the world. OECD.Stat includes data and metadata for OECD countries and selected non-member economies.

15. Kaiser Family Foundation

Global-health-facts-design-outstanding-infographics-tips-resources

A leader in health policy and communications, the Kaiser Family Foundation is a non-profit, private operating foundation focusing on the major health care issues facing the U.S., as well as the U.S. role in global health policy.  Unlike grant-making foundations, Kaiser develops and runs its own research and communications programs, sometimes in partnership with other non-profit research organizations or major media companies.

Premium Resources

Finding high-quality data newspapers and other free services and sorting it in the way you need it can often be quite frustrating and time-consuming. We’d all love to get the exact data we need neatly delivered and as cheap as possible. I’ve gathered a couple of premium data marketplaces and sources for you to find dozens of high-quality data sheets. You can also make a requests for specific data you’re looking for. Unfortunately, I was able to find only three services, so if you know some more you could share them in the comments section.

1. Data Market

Data-market-design-outstanding-infographics-tips-resources

Launched in May 2010, DataMarket is a data portal that provides access to statistics and structured data from various public and private sector organizations. This enables users to find, compare, visualize and download statistics from organizations such as the UN, World Bank, Eurostat, Gapminder and others in a single place. Time series can be linked to news events and any selected data can be downloaded in a format suitable for use elsewhere, e.g. in Excel.

2. Data Marketplace

Data-marketplace-design-outstanding-infographics-tips-resources

Data Marketplace makes it easy for people to find, buy and sell data online. Most data must be aggregated, cleaned, and analyzed to extract useful information. It doesn’t make sense that the same person should do all of these things. Data Marketplace connects people who need data with people who are good at collecting, cleaning, and analyzing it.

3. Infochimps

Infochimps-design-outstanding-infographics-tips-resources

Infochimps is a place to find, sell and share data with others. It comes in two forms on our site: Data Sets: Instantly available for download. Some are free and some are for sale. Data APIs: Available with a simple subscription and an API key. Access very large or frequently updated data sets in minutes without having to host or scrape anything.

Inspiration

1. The Dangers of Driving

Dangers-driving-design-outstanding-infographics-tips-resources

2. How Would You Like Your Graphic Design?

Graphic-design-outstanding-infographics-tips-resources

3. United States of Unhappy Campers

Unhappy-campers-design-outstanding-infographics-tips-resources

4. Digital Nostalgia

Digital-nostalgia-design-outstanding-infographics-tips-resources

5. Happy Birthday Formula 

Ferrari-formula-design-outstanding-infographics-tips-resources

6. The Potato Lifecycle

Potato-lifecycle-design-outstanding-infographics-tips-resources

7. Visualizing Daily Activities With Media Wheel 

Media-wheel-design-outstanding-infographics-tips-resources

8. Treni ad alta velocità

Train-design-outstanding-infographics-tips-resources

9. How Developmental Aid Flows Around The Globe

Developmental-aid-flow-design-outstanding-infographics-tips-resources

10. My Head Hurts

Head-hurt-design-outstanding-infographics-tips-resources

11. The Ride of Your Life

Ride-life-design-outstanding-infographics-tips-resources

12. iPod plus iTunes Timeline

Ipod-itunes-timeline-design-outstanding-infographics-tips-resources

13. How Coffee Affects the Global Economy

Coffee-affect-global-economy-design-outstanding-infographics-tips-resources

14. Bus Ride 37 Mintutes

Bus-ride-design-outstanding-infographics-tips-resources

15. Periodic Table of Typefaces

Periodic-table-typeface-design-outstanding-infographics-tips-resources

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