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

February 14 2014

14:00

January 24 2014

14:00

10 Portfolio Websites that Will Make You Say Wow

Why is it necessary to have a portfolio website? Is it a requisite for all designers? Here are 10 portfolio websites that can lead you to the answers.

Why haven’t I thought of that?”

Well, those were the first words I uttered when I saw this collection of websites that will make you say wow. I thought it would be great if I will be able to share these to you.

The answers to the questions above are very simple. It is necessary for a designer to have a portfolio website because it showcases your talent and provides your future clients with an idea of how good you are. If a prospect client wants to hire you, he will of course want to know what your previous projects are and how efficient you were on doing it. They will conduct research (Everybody does. Who wants to throw off their precious bucks for people who can’t deliver, right?) to have an idea about your professionalism, efficiency, speed and talent. If you don’t have a portfolio, where will your clients look?

So, why don’t we begin looking at these and in the end, just be awed and say Wow!

The Toke

portfolio-websites-01

Viewing the projects in this one is as simple as viewing them in a photo browser. With minimal audio and keyboard shortcuts, this portfolio website is professional looking and sleek.

Alex Abramov

portfolio-websites-07

The designer used the big background photo to serve as map-like design where points in the city were made to represent the page you will be viewing.

Zuppaduppa

portfolio-websites-02

This doodle-looking portfolio looks both cute and magnificent. Using Parallax to enable horizontal scrolling, this portfolio simply amazes me.

Insidepiet

portfolio-websites-06

Talk about being creative and interactive! This website rocks. With the cool background music and the transitions, it proves to be one amazing portfolio.

M-1 Design

portfolio-websites-03

Mouse-responsive motion, this website eats it like a piece of cake. Using clever and surreal designs with great transitions, you’d want something like this.

IE Studio

portfolio-websites-04

Simplicity is the main reason behind this website’s beauty. Nothing beats the minimalist. Check out the artistic use of images both of which are photographic and computer generated.

Harlo

portfolio-websites-05

Some things are more beautiful when naked. This website is a great manifestation of it. It is the simplest form of  being simple. No flashy effects, just the off-white colors blended with the occasional red will surely equal to an amazing portfolio website.

Vitor

portfolio-websites-08

This mixed the simplistic and minimalistic designs with great effects. Eyegasmic, this site is easy to understand and navigate.

Guided Creative

portfolio-websites-09

This one amped up retro designs with the flat design trends creating a bright blue beauty.

R Leonardi

portfolio-websites-10

Love interaction? This one interacts with you like a video game. With its clever use of animation and transitions, you’ll find yourself browsing to the last page just to see how it finishes.

Conclusion

Portfolio websites like these serve as inspirations for web designers to continue to hone their talents. Having a great portfolio website is almost tantamount to a great work. Of course, if you are able to design projects which are eye-popping, it is both necessary and obvious that you should have a great portfolio to hold them off.

WOW! Right? What do you think?

Further reading:

6 Tips for Budding Designers to Earn While Building a Portfolio

7 Mistakes that Force Potential Clients to Dislike Your Portfolio

Creating an Effective Online Portfolio: 40+ Tips, Tools & Inspirations

10 Easy Steps On How To Create A Good Photography Portfolio

10 Outstanding Tools to Build Portfolio Easily and Professionally

January 20 2014

14:00

From Fabric to Flat Screen: How Color Combination Theories in Fashion Can Help a Web Designer

One cannot deny how color combination theories in fashion can help a web designer. You see, clothing and web designing have a lot in common. Both require a great deal of effort in trying to balance purpose and beauty. The two fields also require a great amount of effort in making quality designs become tangible products. In clothing, the design should be transformed – using scissors, thread, fabric and needles – into a tangible, comfortable, wearable and fashionable outfit.

Meanwhile, in web design, the designer should be able to create – using images, text boxes, codes and typefaces – a browsable, comfortable and usable website. These two, being common in some ways, also possess the similar techniques in creating elements. Fashion designers should have a very good sense of color combination. They make the most out of every hue to make their clients feel good about themselves. In fact, designers take loads of time to decide which colors they are going to use for such creations. They employ careful selection and consideration of visual and analytic aspects to make their work more appealing to the eye. For, in the end, fashion, clothes and dresses are still visual.

fabric-flatscreen-02

Photo by: Michiel Schuurman

fabric-flatscreen-03

Photo by Madame Herve

fabric-flatscreen-01

Photo by Amelie Hegardt

It is in the same principle that a web designer must select his color scheme. Like fashion, web design is mainly visual. The eye is the main processing unit of the body which perceives what is flashed on the screen of the computer or mobile device. A good web designer knows which colors combine and which do not. The designer must remember that these combinations suit different occasions and circumstances.

web-colors-02

Experiment with color schemes at colorschemedesigner.com. color-scheme-01

What if you haven’t studied web design or multimedia arts? What if you are just an ordinary blogger who has an extraordinary dream of getting a lot of readers? What will you do? Fear not. The secret is simple: stand up, go to your dressing room and  look at your closet. Try to look at your clothes. Which fabric fits the color of another? Which combination fits an occasion? Which of these gazillion fabrics compliment each another? Choose and answer these questions. Then, transform those fabric colors into flat screen ones

. color-combination-web002jpg

Photo by Andrea of www.udandi.com

But, in case you are too preoccupied, (or in semantic terms, too lazy) to open your dresser, here are some few friendly reminders:

1. Occasionalize

Here is an example: unless it’s Christmas, or your company color dictates so, do not mix green and red. Don’t make your website look like a Christmas present. Red and green mix well only when it’s Christmas time (or when the company or client dictates so). People might think of your blog as a Santa’s Elves Labor Union website. Your readers might appeal that they got the wrong present last year. To avoid this, apply color theories. Learn the techniques on using colors to fit the theme of your website. Having a theme gives you identity. It’s something that all products, either on the Web or in the real world would want to attain. If a person recognizes you because of the color of your site, then you have nothing to worry because your website can be popular before you know it.

christmas-website-01

The thing is, you should learn how to occasionalize. Fit a color for the occasion or the nature of the website or blog. Example, if you manage a bank website, use blue colors as they suggest trustworthiness. If you are running a spa, use brown or/and green. If you are into a restaurant business, better use orange, yellow, and red. If you are a car dealer, use black. Fit every color, hue and shade for every occasion. But if you are designing for a Christmas-themed website, better retain the red and green colors because there’s no other more appropriate colors for Christmas than those. Web designing is like dressing up. If it ain’t fit the occasion, might as well go naked.

2. Be a Fame-whore!

Be a fame-seeking-madman, in a good sense. Get attention. Crave for it. Be crazy about it. Use your colors to attractively get subscribers. Like in clothing, neon colors of red, orange, yellow, purple and green attract attention. It suggests urgency. It is very useful to convey important messages. In the context of web designs, you could use such colors in your buttons which require attention. Hook your prospect readers by attracting their eyes first. Provide a good bait.

neon-color-buttons-01

Getting their attention is one way of making them read your blog. The formula is simple: get them to read a part of your blog. If they like that part, they might as well read every entry. So that’s why you should able to get their attention! Use bright colors for your subscribe buttons, read-me pages, or any page or button that will require the attention of your would-be readers. Remember: Bright is right! Just be careful with this and don’t make your page look like a book with Stabilo highlighters all over. Too many neon colors are blinding, irritating and uninteresting to read.

3. Background-foreground agreement

If in clothing, you need to consider your skin color in selecting hues for your shirt, we have the seemingly same rule here. When designing web pages, consider the text-background relationship. Now, most beginners have a hard time on this. That is the reason why we see a lot of photos superimposed with texts and the text becomes unreadable. The background-foreground agreement rule generally says that you should make the foreground text readable. The background is just a designing tool. It just decorates the main thing.

superimposition01

Photo from Pamela Geller’s Book Stop the Islamization of America 

You should always remember the general principle: light colored background to dark colored text and vice versa. But if you are using pictures as background and the color is varying, it is most advisable to use solid-colored shapes as background superimposed to images.

Sta Ana

Photo by Rudolph Musngi

Conclusion

Web designing and fashion have the same roots. They both come from the early concepts of visual design. It is very obvious that they should possess the same philosophies- and color combination is one of them. The ability to produce a design which has complementing colors is something a designer should possess. He should be aware that the colors that he will use will affect, either visually or psychologically, the quality of his work. Knowing, understanding and applying the rules of fashion in web design is very beneficial. Yes, learning the theories and concepts that make colors coordinate with each other is a very tall order; and yes, it’s a big struggle but it’s a battle that you should win. All of these hard-fought troubles in learning new things will make you a better designer. You’ll produce better designs, and in turn, more money. So, start learning today!

Though the learning process may be,you should out-battle this struggle. You should be able to pick up the important lessons of design and put them in your arsenal. And these will matter to you in the end.

January 15 2014

14:00

10 Easy To Understand Photoshop Tutorials on Lighting Effects

Most designers find Photoshop very versatile. Photoshop tutorials on lighting effects is highly sought after. Although mainly used in photography, this favorite software of designers bridges different kinds of needs, from typography to web design.

Not to exaggerate, Photoshop can supply all your design needs. Today, we will be highlighting a very particular need. This article is directed mainly to graphic designers and photo enthusiasts but could be a very good springboard to web designers too. With lightning effects added in your photos, you will be able to add more dynamism and professionalism in your designs. In short, it would make your awesome website more awesome. How cool is that?

The need I am talking about is lighting effects. In photography and graphic design, lighting is very important because it stimulates the vision to think or perceive a certain period of the day. Light, in these specific art forms, creates the illusion of time and space. You can readily make people believe that you took a certain photo at night just because the lighting says so. One can also confuse a picture to be taken at dusk when in fact it’s otherwise just because the light says so. Having said that, it is important to put in mind these reminders and master the art of lighting.

For beginners, you’ll find these tutorials very fun-to-do and instructive. For experts and masters, you’ll find these links refreshing. So here they are:

Nike Ad in Photoshop

photosho-lighting-effects-11

Morning Light in Photoshop

photosho-lighting-effects-10

Lomography Effect

photosho-lighting-effects-09

Rainbow Light Effect

photosho-lighting-effects-08

Light Bulb Text Effect

photosho-lighting-effects-06

Apocalyptic Effect

photosho-lighting-effects-05

Fiery Explosion

photosho-lighting-effects-04

Dynamic Lighting

photosho-lighting-effects-03

Crystallized Effect

photosho-lighting-effects-02

Scarecrow + Sick Background Lighting

photosho-lighting-effects-01

Conclusion

You have to admit that Photoshop is the best editing software when it comes to photos. With its versatility, you can easily play with the lighting of your photos or graphic illustrations. These tutorials are just guides. Remember that you should never stick to them point by point. You should learn how each step works and how can you adjust them for different photos of different scenarios. This way, you can apply the concepts in your everyday designs.

December 27 2013

19:00

A Colorful Illustrated Map of London's Great Little Places

"I know this great little place..." is something you've probably said or heard dozens of times. Well the folks behind Great Little Place decided to gather up people's recommendations for the amazing city of London and do something creative.

This wonderful illustrated map of London's great little places was painstakingly hand drawn by Charlie Davis, an illustrator and designer based London. There's no doubt that a lot of hours and a lot of love went into every beautiful detail, just take a look for yourself.

If you'd like to see more about London's Great Little Places, you can explore them directly on the website. And if you'd like a little piece of London in your own home, there's prints available too. Cheerio!

Tags: Illustration

December 24 2013

11:52

471 Premium Design Resources for Free from InkyDeals.com! (sponsored)

Advertise here with BSA


Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work.

471-premium-design-resources-free-InkyDealscom-1

They’re the only deals website who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

471 Premium Design Resources for Free

Because Inky (the lovable little ink blob and mascot of Inky Deals) and his team enjoy giving back to the community, they’ve created a huge free web design bundle: 471 Premium Design Resources for Free value $519, which you can find exclusively on Inky Deals.

471-premium-design-resources-free-InkyDealscom-2

Partners

It contains textures, UI kits, HTML, PSD & WordPress templates, patterns, fonts, courses and much more. Here are their partners who helped them put this great bundle together:

471-premium-design-resources-free-InkyDealscom-3

Resources

This bundle has got dozens of good reviews, hundreds of shares and thousands of fans from all over the world. Let’s see what you get by downloading this full pack of resources:

45 OpenType Fonts from 128Bit Technologies

471-premium-design-resources-free-InkyDealscom-4

Pixel Perfect Social Media Icons from Design TNT

471-premium-design-resources-free-InkyDealscom-5

Dead Stocker PSD Website Template from DesignModo

471-premium-design-resources-free-InkyDealscom-6

Subtle Patterns Set from Design TNT

471-premium-design-resources-free-InkyDealscom-7

This is just a small part of the design goodies you get by downloading this free bundle. Check out the entire 471 Premium Design Resources for Free!

11:49

471 Premium Design Resources for Free from InkyDeals.com!

Advertise here with BSA


Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work.

471-premium-design-resources-free-InkyDealscom-1

They’re the only deals website who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

471 Premium Design Resources for Free

Because Inky (the lovable little ink blob and mascot of Inky Deals) and his team enjoy giving back to the community, they’ve created a huge free web design bundle: 471 Premium Design Resources for Free value $519, which you can find exclusively on Inky Deals.

471-premium-design-resources-free-InkyDealscom-2

Partners

It contains textures, UI kits, HTML, PSD & WordPress templates, patterns, fonts, courses and much more. Here are their partners who helped them put this great bundle together:

471-premium-design-resources-free-InkyDealscom-3

Resources

This bundle has got dozens of good reviews, hundreds of shares and thousands of fans from all over the world. Let’s see what you get by downloading this full pack of resources:

45 OpenType Fonts from 128Bit Technologies

471-premium-design-resources-free-InkyDealscom-4

Pixel Perfect Social Media Icons from Design TNT

471-premium-design-resources-free-InkyDealscom-5

Dead Stocker PSD Website Template from DesignModo

471-premium-design-resources-free-InkyDealscom-6

Subtle Patterns Set from Design TNT

471-premium-design-resources-free-InkyDealscom-7

This is just a small part of the design goodies you get by downloading this free bundle. Check out the entire 471 Premium Design Resources for Free!


Advertise here with BSA

November 04 2013

15:31

10 Humorous Infographics Beautifully Designed

Like many web surfers, I could waste a lot of time browsing through infographics, especially if they are insightful or funny. In fact, infographics are becoming a popular way of providing information, creating awareness, or simply attracting attention with some humor. As such, infographics are a design speciality that should be added to any designer’s list of skills. The benefit? You will always find businesses needing an infographic for their blog. The drawback? Infographics can take a long time to create.

However, just as with any other design skill, becoming faster and better at creating infographics is as simple as researching and practicing. And, of course, it doesn’t hurt to have a little fun along the way. So, here for both your entertainment and education are 10 humorous infographics that are quite beautifully designed. Some are thigh-smacking hilarious, a few clever, and others a little odd in a funny way. Take a look, enjoy, and be sure to let us know which of these are your favorite.

Thirteen Reasons Why Your Brain Craves Infographics

This incredible web-based infographic designed by NeoMam Studios presents reasons why infographics are so popular in a brilliant paralax scrolling effect. The team designed the entire infographic using HTML5 and CSS3, and while more informational than humorous, it still includes some funny illustrations that will produce at least a giggle in most viewers.

How to Survive a Zombie Apocalypse

The following hilarious infographic was designed by GoalZero. It gives “real” advice for how to prepare for a zombie end-of-the-world attack and does so with stunning graphics and an easy-to-follow layout.

how to survive a zombie apocalypse
Find more great infographics on NerdGraph Infographics

How to Kill Time

Created by ColumnFive, this infographic gives a fresh spin on advice for time-management by illustrating what not to do. The retro design fits perfectly with the tone of the infographic.

Killing-Time-How-To-Destroy-Your-Productivity-Infographic

The Hangover Helper

Most of us have gone through/ will go through/ are going through phases of drinking too much alcohol. Here’s a witty infographic to help anyone curb the effects of drinking the next day, and it also gives some very insightful facts that may provide enough incentive to get beyond an excessive drinking phase much more quickly.

What Women Want…Dating Secrets Revealed

A revealing yet funny infographic from NowSourcing, this one outlines what type of guy most women search for based on their online dating profiles. The illustrations are amazing, and the layout lends to a witty tone.

24 Things You Didn’t Know About Beer

The colors and illustrations in this humorous infographic sponsored by WearYourBeer.com contribute to the lighthearted tone. Lots of fun facts that most people probably never knew about beer make for an entertaining read.

24 Things You Didn

Explore more infographics like this one on the web’s largest information design community – Visually.

Serif vs. Sans: The Final Battle

The age old battle between the uses for serif and sans serif fonts is fought and ended in this clever infographic from UrbanFonts.com. The design is layed out well and the fonts used are stunning.

Are You Happy?

Sometimes the simplest infographics are the best. The following design uses a grunge poster style to add appeal and draw the eye, and presents a revealing message in a humorous way.

Are You Happy?

Explore more infographics like this one on the web’s largest information design community – Visually.

50 Things a Geek Should Know

While the following infographic is more a description of several different types of geeks combined, it is still good for a few laughs. The retro design is a perfect reflection of old era geek facts.

Courtesy of: VirtualHosting.com

11 Untranslatable Words from Other Cultures

Last but definitely not least on the list is the following infographic from Maptia. Not only are the phrases interesting and a few hilariously detailed, but the illustrated fonts and graphics are brilliant. This could easily be the best eye candy of the roundup.

October 02 2013

13:00

Icon Talk: Choosing the Perfect Icons for Your Website

This thought might be the prevailing philosophy that hides beneath the shroud of web design: that small details sometimes happen to be the most important ones. That the things we think do not matter in our design are, in fact, necessary for the smooth flow and exchange of information.

Sometimes small things tend to have the biggest importance.

One of these small things that are commonly taken for granted are icons. Icons can be considered as a worldwide-understood element of web design. They are apprehended by most people, making the websites benefit from the addition of such. It is in this universality that icons are considered to be one of the most important design elements that have ever walked (figuratively) on the face of the earth.

iconography-02

By Kev Simpson

Icons are good tools of stamping an impression to an audience. They play a vital role in making the viewers understand what the message or the context of the website or application is.

What’s amazing about icons is that, even in their small space they occupy in the pixels of the screen, their role is immense. A lot of websites have invested a lot of effort, creativity and even money just to produce good icons that would suit the needs of their website. The ones created, in turn, reciprocate this by producing more viewers and easy to understand content. However, due to the variety of available icons, it becomes slippery to a point that designers seem to be confused. Iconography is a rather broad field because it encompasses a lot of concepts in fulfilling a lot of roles. As you all know, icons can be used for a lot of purposes, methods, occasions and motifs. Thus, the need to choose the correct and most appropriate icons is heightened.

iconography-01

By Joshua Sortino

As web designers, this lesson will make us more equipped with the ideas on how to choose the right icons.  Most website failures result in poor iconography. This all branch out and eventually lead to the effect that readers find themselves to be out of place, just seeing the website. And how could we evade that situation? Here are a few tips.

Icons should be appealing and readable

Icons should be visually appealing. They should be beautifully designed; thereby, be remembered by ordinary people. When designing or looking for icons for your website, remember that the people’s memory retains for two things: either they are beautiful enough to be remembered, or horrible enough not to be forgotten. If you prefer the former, then you should always look for beautiful icons.

iconography-06

Photo from Mike Clarke

They should be universal

Choose icons that are easily understood by people. These icons should be famous enough that it would not produce confusion. Because you are dealing with imagery and its interpretations, the image that you should produce should always be universal. You need to make every person, at the very least, know what you are talking about. Make your icons be transcendent!

Example, never use a wrench, or a gear icon if you will not going to refer it as a settings link or menu. Of course, the average people, who are so used to seeing gears or wrenches for settings would think of it as a link or menu to the preferences of your website. They will get lost. Think of it as if you are making road signs. If you were the traffic sign manufacturer or installer and you happen to have made a mistake by switching signs, people might get lost, or worse, their cars might stumble with each other and your face will be all over the news.

iconography-04

By Barry Mccalvey

They should be consistent

Ever experience having a nice conversation with a friend and then suddenly, you say something that is out of context, and your friend will pose a besmirched face, with an eyebrow raised and say, “Huh?”

Well, that will happen if you don’t start adding consistency to your icons. It will result into a breakage in the flow of information, and you won’t want that to happen.

For this, you should remember to use the same color or color scheme. Adding a very consistent color theme will make the identity of your icons stable. People will see your website and remember it. Also, you should remember to use, as much as possible, the same shapes. Shapes are also very good memory tools. Third, is that you should style your icons without borders. Borders, shadows, and gradients affect the technical and aesthetic quality of the icons.

iconography-10

From cssauthor.com

It should complement with the motif

The illustrations have to look legit. They need to be visually compatible with the motif of your website. Before choosing the icons, ask yourself, how would my site look like? Will it be comical, formal, creative, flamboyant or plain? The answer to your question, should match the icons that you will use. Like fonts and colors, icons are thematic. They are occasional and prefer to be represented and used in specific occasions.

721

From designyoutrust.com

They should be functional

Icons should be functional. Period. Their quality should not defeat its true purpose. Sometimes, we tend to extravaganize the design by adding unneeded icons. But you should remember to put what you need. Don’t be greedy. Less is more. Lesser is most. The more that you add, the more it becomes visually heavy. So be wise.

iconography-11

From graphicdesignjunction.com

Conclusion

The thing that you need to know in choosing icons for your web design is that you need to be understood and purposive. You have to be so universal that even a simpleton will understand you. You have to apply the purpose and try to achieve it in your design. A great web designer does not stop just because he is tired of looking for good icons. A great web designer will just stop, when he sees it in the website.

Truly, small things tend to have greater roles and those bits of facts can mean a great deal of inspiration. And I bet the icons agree.

Useful links

Any Tips to Share?

September 24 2013

13:00

Graphics and Lyrics: How to Make Eyegasmic Infographics

Graphics play a role in our Internet learning experience. Images have become part and parcel of the information acquisition process in our lives. Normally, graphics like pictures and drawings are used as aids and not the main tool for learning. They are just appendices that help people understand the information that is being fed to them.

That was the general idea before the influx of the Internet. The pre-Internet idea is dominated by the belief that graphics are just ‘aids.’ But it has surprised learning purists that graphics can be very good tools as main information sources. Thanks to the Internet, we now have Infographics!

infographics-02
From Brafton

Infographics or information graphics are visual and artistic representations of data or knowledge. They are presented in a creative, quick and witty manner using diagrams, charts and design elements. Infographics are filled with drawings, vector and flat-design images, sketches, icons and texts to facilitate the learning experience better and more fun.

infographics-01
Source

The average tourist can quickly and, with fun, go through the city using an infographics-designed map, or take researching student who could quickly grasp the use of colors for advertising.

maps-for-infographics03
What makes infographics eye-gasmic is that they use design elements like colorful charts, dandy diagrams, flamboyant flowcharts and intelligent icons. This makes it easy for the readers to process the data because their eyes are fed with the simplicity of the design. Infographics turn away from text-heaviness and eye-sore font spacing and gives the eyes a lot of creative breathing room.

Finding the info

The first thing you take note when making an infographic is the info. That is elementary knowledge. Information, which comes before the graphics, should be correct, interesting and relevant. The graphics would totally fall and suck if you’re data is as intelligent as Patrick Star.

So how do we find intelligent data? Consult Einstein or Stephen Hawking? That would be a very good idea. But since most of us are ‘busy’ enough to even stand up and remove ourselves in front of our own computer tables, we might as well make the most out of what we have. We could browse blogs that provide us with relevant data, tweets, books, or we could just Google things out!

But if you are really frustrated and has enough bucks to hire a freelance researcher, might as well do it.

The best way to gather data for your infographic details is through search engines. There are a lot of search engines to choose from and Google is probably the best and most picked choice. Of course, after typing in your search query, you will be bombarded with thousands, even millions of results. Now you need to sift those information out so that your research will stand.

As a rule of thumb, Wikipedia is not really suggested as a main source (Sorry, Wikipedia fans). As much as possible, use .org, or .edu domain names. Try to consider the status of the website. If you are looking for web-design related topics, you wouldn’t choose a website which has few followers, right?

Next is you need to filter what you need. You need to choose the relevant, interesting and precise data for this. The reason is very elementary. No one will read you infographics if they are boring and wrong.

Try looking on these:

The Skeleton

Okay, this part isn’t anatomy; you’re still at 1stwebdesinger. The skeleton is just a step in making an eye-gasmic infographic. This is the part where you need to arrange the data you have collected into an organized story or flow. Each datum must point to another and so. The rule of thumb in infographic-making, there should only be six main points or parts as a maximum.  You should determine these six parts. You need to list six of the best and most interesting facts you have. The trick here is, if a data bores you, it will bore everyone. If it entertains you, it will still bore everyone, so you might as well look for a better one. This will ensure sustained interest and readership and would not result into brain explosions due to information overload.

Source

Once arranged, the data must be represented in a visual format. It is very advantageous to make an outline and think of the needed graphics for your work. You also need to process data and make them graphs, flowcharts and comparisons. Remember that a good organization is as good as the design itself. If your data is as peaceful as Syria, try again. Make them as easy as possible to understand.

Source

I listed a few of the well-arranged infographics data-wise:

The Value of Being LinkedIn

infographic-01

Profile of a Twitter User

infographic-02

The Descent to Credit Card Debt

infographic-03

Art-attack time!

After arranging your data, you could now proceed to the design. Most infographics have a portrait orientation. According to QuickSprout, vertical infographics are posted 28.9% more frequently than horizontal ones and are 41.7% to be more likely borrowed by other websites. This might just make sense that vertical infographics are more advantageous to post.

Source

Remember to use complementary colors. This color combination tends to attract most readers as the graphics is presented in a more readable and understandable manner. You should also use large fonts to be able to convey the message even if zoomed out.

It is also advisable to use creative icons, 3d and flat. All of the posts that I have uploaded to this site will matter. Typography, colors and flat design!

Here are a few inspirations to start with:

100 Million Professionals

infographic-04

The Future Farm

infographic-05

Pikes Peak Course

infographic-06

Ancient Hebrew Cosmology

infographic-07

The Kulula Airlines

infographic-08

Titillating Title

Think of a titillating title! Attracting attention through titles is as good as attracting readers to read the whole work. Good titles would commonly tantamount to good articles. No one wants to read a boring article with a boring title.

In this step, you should consider the relevance of the title to the theme of the graphic. Think of puns, assonances, allusions to your title. Be creative as possible. Try to be funny and intelligent all at the same time. Common titles include “How to”, “Where to” and “Top 10s” as they tend to hit most search engines.

Tips

  • Catch the fish. Be an attention seeker. You must immediately grab someone’s attention by just your title.
  • Be relevant. No matter how unorthodox your title might be, try to stay in line, try to connect the title with the infographics.
  • Be short and quick. The shorter your title gets, the powerful it becomes.
  • Deviate from these tips. Try to be different once in a while.

Here a few inspirations:

Serif vs Sans: the final battle

infographic-10

What The Flux? How The Flux Capacitor Works

infographic-09

How Big Is Your Byte?

how big is your byte

A Day in the Life of a CEO

More inspiring infographics here!

Conclusion

Just like many writing disciplines, doing Infographics involve a great deal of attention to detail. Every bit of information is considered to be vital to the both the design and the content. A disharmony between the two will cause poor facilitation of data and, hence, confusion. In doing this kind of artform, one must consider every aspect of the design. The infographic artist should consider not only what is seen, but also what is learned. He should be aware of  his role to sort out and distribute information. He should know where to place what and when to place it. He should be well versed with research, writing and graphic designing, for these three, after all, are what makes an infographic.

August 26 2013

06:30

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 14 2012

13:00

60 Mind-blowing Advertisements That Will Boost Your Creativity

Love it or hate it, advertisements are all around us. Those times when you had to be horrified by those ugly banners in newspapers are gone. The classic ways of advertising are not working anymore. In order for an ad to be successful it has to resemble an “ad” as little as possible. Interaction with customers, experiments, installations etc. are taking over the world of advertisements. That’s why along with creative print advertisements (which are equally awesome), we’ve also collected some videos with next level advertising. Continue reading and check out these 60 mind-blowing advertisements to satisfy your urge for creativity.

1. Choose Later

Jvc-later-creative-advertisements

2. The German Crafts: The Craftsmen’s Boobs

Boobs-creative-advertisements

3. Prudence Neon Condoms

Neon-condoms-creative-advertisements

4. Crossword Bookstores, Audio books

Audio-lips-creative-advertisements

5. Heineken –  The Switch

6. Fast vs. Fast

7. The Walrus: Read Something Else

Read-creative-advertisements

8. Daikin: Poker

Poker-creative-advertisements

9. PETA –  Death Bet

me>

10. Mercedes-Benz: Multicontour Seat

Mercedes-creative-advertisements

11. Visionlab Prescription Glasses: Lease Contract

Glasses-contract-creative-advertisements

12. Getty Images: Shark

Getty-creative-advertisements

13. Volkswagen Trucks: Supermarket

Volkswagen-creative-advertisements

14. Go Outside Magazine: Mouse

Outside-creative-advertisements

15. Mercedes Night View Assist: Child

Mercedes-child-creative-advertisements

16. booksTALK Audiobooks

Bookstalk-creative-advertisements

17. Austria Solar – Annual Report

18. DNA Project: Cape Town Station Activation

19. Playboy Magazine: Hands

Playboy-creative-advertisements

20. Lexus GS: Drive By

Lexus-creative-advertisements

21. Patit: Chili

Chili-creative-advertisements

22. Toyota FJ Cruiser 4×4

Toyota-creative-advertisements

23. DB Export Dry: The Wine List

Wine-list-creative-advertisements

24. Ô Fiô Bier Bar: Real date

Real-date-creative-advertisements

25. Beijing Sports Radio: Boxing

Sports-radio-creative-advertisements

26. Queen Bee Salon & Spa

Waxing-creative-advertisements

27. Fundacion Padre Hurtado: Drunk

Drunk-creative-advertisements

28. Lifestyle YOU, Wife Swap Australia

Wife-rules-creative-advertisements

29. FF English School: Sheep, ship, chip

English-school-creative-advertisements

30. Skoda Superb: Domino

Skoda-creative-advertisements

31. 3M Privacy Filter: For your eyes only

Privacy-creative-advertisements

32. Coopers: Life After Dark

Coopers-creative-advertisements

33. Belair Health Club: Truths

Health-club-creative-advertisements

34. Kinderhilfe West Afrika Children’s Aid

Children-aid-creative-advertisements

35. B&B Hotels

Hotel-creative-advertisements

36. Amstel Lager: The Boxer

37. Protex Antibacterial Hand Sanitizer

Hand-sanitizer-creative-advertisements

38. Vinyl Exchange

Vinyl-exchange-creative-advertisements

39. 3M Lint Roller

Roller-creative-advertisements

40. New York International Latino Film Festival

Film-festival-creative-advertisements

41. Adidas Benelux: Ajax Players Gave Their Fans A Surprise They Won’t Forget

42. Quit Smoking

Smoking-creative-advertisements

43. Watta Pure Water

Water-creative-advertisements

44. DirecTV: Questions

45. LEGO® Life of George

46. Close up – Kissdemic

47. Meat Pack: Hijack

48. BarBla: Responsible Sip

49. Twix: Ideologies

50. New Lexus GS Hybrid – 120 Heartbeats

51. MINI: MINI Horn

52. Google Play Test #0923: Balloons

53. Volkswagen: Alarm Clocks

54. Knorr Quick – Ping Pong

55. Red Tomato Pizza: VIP Fridge Magnet

56. Wise Up English School

Wise-english-school-creative-advertisements

57. Taco Bell: Discovering Bethel, Alaska

58. Lung Cancer Alliance

Lung-cancer-creative-advertisements

59. Kalnapilis: Mouse

Kalnapilis-creative-advertisements

60. Arçelik: Autologic Washing Machine

Autologic-creative-advertisements

What do you think of these creative advertisements? Feel free to share your thoughts in the comments below.

August 07 2012

07:41

Adobe Illustrator Tutorial: Create a Detailed Dynamite Illustration


  

In the following Adobe Illustrator tutorial you will learn how to create a detailed dynamite illustration. We’ll start by turning some plain text into a symbol, and by making some simple rectangles. Once we have our starting shapes, we’ll continue with some Extrude&Bevel and Warp effects plus some Pathfinder options along with a bunch of basic blending techniques. For the final touches we’ll use some complex linear gradients and some blur effects.

As always, this is the final image that we’ll be creating:

Step 1

Hit Control + N to create a new document. Enter 600 in the width and height box then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before you click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid). Next, you’ll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box.

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.

Step 2

Start with the Type Tool(T) and add your black, "dynamite" text. Use the Myriad, Bold font with the size set at 10pt. Open the Symbols panel (Window > Symbols). Make sure that your text is still selected and click on the New Symbol button from the bottom of the Symbols panel. Pick a name for your symbol and click OK. Make sure that your new symbol shows up in the Symbols panel then remove the one from the Layers panel.

Step 3

Pick the Rectangle Tool(M) and create two, 50 by 315px shapes. Fill them both with R=153 G=30 B=45 and place them as shown in the following image. The Snap to Grid will ease your work.

Step 4

Pick the Rectangle Tool(M) and create two, 25 by 315px shape. Fill them both with white and place them as shown in the following image.

Step 5

Reselect the right, white rectangle created in the previous step and go to Effect > 3D > Extrude& Bevel. Enter the data shown in the following image and click on the Map Art button. Go to"Surface 1" and select the "dynamite" symbol from the Symbol drop down menu. Rotate it and place it as shown in following image then click OK. Make sure that this white rectangle is still selected and go to Object > Expand Appearance.

Step 6

Move to the other white rectangle created in the fourth step. Select it and add the same Extrude&Bevel properties used in the previous step. The only thing that you need to change is the position of the symbol from the map art menu. Don’t forget to go to Object > Expand Appearance after you add all these properties.

Step 7

Focus on the two groups created in the last two steps. Move to the Layers panel, drag the wrapped symbols outside their groups then delete the rest of the shapes. Reselect the wrapped symbols one by one and turn them into compound paths (Object > Compound Path > Make).

Step 8

Pick the Rectangle Tool(M), create a 50 by 325px shape, fill it with R=190 G=30 B=45 and place it as shown in the first image. Continue with the Rectangle Tool(M), create a 25 by 325px shape, fill it with white and place it as is shown in the second image.

Step 9

Reselect the white shape created in the previous step and add the Extrude and Bevel effect used in the previous steps. Don’t forget to add the symbol as shown in the first image. Once you add all these effects go to Object > Expand Appearance. Again, keep the wrapped text and delete the rest of the shapes. Also, don’t forget to turn the wrapped text into a compound path (Object > Compound Path > Make).

Step 10

Pick the Rectangle Tool(M), create a 50 by 325px shape, fill it with R=212 G=30 B=45 and place it as shown in the first image. Continue with the Rectangle Tool(M), create a 25 by 325px shape, fill it with white and place it as shown in the second image. Select this white rectangle and make a copy in front (Control + C > Control + F).

Step 11

Reselect the copy of the white rectangle created in the previous step, add the Extrude and Bevel effect (and the symbol as shown in the first image) and go to Object > Expand Appearance. Focus on the resulting group of shapes, turn the wrapped text into a compound path (Object > Compound Path > Make) and delete the rest of the shapes. Select the other white rectangle created in the previous step, add the Extrude and Bevel effect (and the symbol as shown in the third image) and go to Object > Expand Appearance. Focus on the resulting group of shapes, turn the wrapped text into a compound path (Object > Compound Path > Make) and delete the rest of the shapes.

Step 12

Reselect the compound paths created in the previous steps, make sure that they’re all filled with black and lower their opacity to 15%. Select the four, red rectangles and go to Effect > Stylize > Rounded Corners. Enter a 2px radius, click OK and go to Effect > Warp > Bulge. Enter the data shown in the following image, click OK and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Object > Expand Appearance.

Step 13

Reselect the right, red shape and make two copies in front (Control + C > Control + F > Control + F). Pick the Rectangle Tool(M), create a 5 by 325px shape, fill it with white and place it as shown in the second image. Select it along with one of the copies created in the beginning of the step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 30% and change the blending mode to Overlay.

Step 14

Pick the Rectangle Tool(M), create a 5 by 325px shape, fill it with black and place it as shown in the first image. Select it along with the other copy of the red shape created in previous step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 25% and change the blending mode to Soft Light.

Step 15

Reselect the left, red shape and make three copies in front (Control + C > Control + F > Control + F > Control + F). Pick the Rectangle Tool(M), create a 5 by 325px shape, fill it with black and place it as shown in the second image. Select it along with one of the copies created in the beginning of the step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 25% and change the blending mode to Soft Light.

Step 16

Pick the Rectangle Tool(M), create a 10 by 325px shape, fill it with black and place it as shown in the first image. Select it along with one of the copies created in previous step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 25% and change the blending mode to Soft Light.

Step 17

Pick the Rectangle Tool(M), create a 5 by 325px shape, fill it with black and place it as shown in the first image. Select it along with the remaining copy created in step 15 and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 25% and change the blending mode to Soft Light.

Step 18

Reselect the right middle, red shape and make two copies in front (Control + C > Control + F > Control + F). Pick the Rectangle Tool(M), create a 5 by 335px shape, fill it with black and place it as shown in the second image. Select it along with one of the copies created in the beginning of the step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 25% and change the blending mode to Soft Light.

Step 19

Pick the Rectangle Tool(M), create a 15 by 335px shape, fill it with white and place it as shown in the first image. Select it along with the other copy of the red shape created in previous step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 30% and change the blending mode to Overlay.

Step 20

Reselect the left middle, red shape and make three copies in front (Control + C > Control + F > Control + F > Control + F). Pick the Rectangle Tool(M), create a 10 by 335px shape, fill it with black and place it as shown in the second image. Select it along with one of the copies created in the beginning of the step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 25% and change the blending mode to Soft Light.

Step 21

Pick the Rectangle Tool(M), create a 5 by 323px shape, fill it with black and place it as shown in the first image. Select it along with one of the copies created in previous step and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 25% and change the blending mode to Soft Light.

Step 22

Pick the Rectangle Tool(M), create a 15 by 335px shape, fill it with white and place it as shown in the first image. Select it along with the remaining copy created in step #20 and click on the Intersect button from the Pathfinder panel. Select the resulting shape, lower its opacity to 30% and change the blending mode to Overlay.

Step 23

Select all the shapes that make up the left dynamite and group them (Control + G). Continue and create three new groups. One with the shapes that make the left dynamite, one with the shapes that make up the middle left dynamite and one with the shapes that make up the middle right dynamite.

Step 24

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Focus on the middle left dynamite, select the main red shape and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down using the down arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=110 G=30 B=45.

Step 25

Reselect the main red shape from the middle left dynamite group and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px down using the down arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its opacity to 75% and change the blending mode to Overlay.

Step 26

Reselect the main red shape from the middle left dynamite group and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up using the up arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=110 G=30 B=45.

Step 27

Reselect the main red shape from the middle left dynamite group and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 2px up using the up arrow. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its opacity to 75% and change the blending mode to Overlay.

Step 28

Move to the other dynamite shapes and repeat the techniques mentioned in the last four steps.

More on Page Two

That get’s us about halfway there! Head on over to page two to finish up the tutorial and put the finishing touches on your illustration.

July 30 2012

09:49

Bob Gill

Bob Gill website

Here’s a relatively new website for Bob Gill. Born in Brooklyn in 1931, the renowned graphic designer always seemed to have a talent for turning design briefs into memorable, appropriate, witty outcomes.

A couple of his logos (for AGM and Television Associates) are featured over on Logo Design Love.

See more on his site (some great illustrations and posters, too).

Bob Gill illustration

Bob Gill illustration

Ecumenical = general, universal (my new word of the day).

I missed the release of his latest book, Bob Gill, so far, published by Laurence King in October last year, but there’s a copy in the post so I’ll share a few thoughts and spreads when it arrives.

From the archives:
Graphic Design as a Second Language

Identity Designed

Brand identity inspiration on Identity Designed.

Related posts worth a look

July 09 2012

07:00

March 15 2012

09:04

Explosions of Color: Inspired Collection of Bright and Colorful Vector Illustrations


  

With Spring on its way to so many, the landscapes will soon be blossoming with bright, vibrant colors. For those who are not wanting to wait for that seasonal colorful explosion, we have prepared a splash of brighter tones to help. With so many talented vector artists sharing their fine works across the web, we have turned out spotlight their way for an inspirational showcase that is sure to please.

So take a look through this bright and colorful collection of vector illustrations to get an inspirational recharge. With a range of subject matter and moods, these pieces’ expressive use of colors are sure to put a smile on your face and even potentially an idea or two in your mind.

Explosions of Color

Encomium: Lana Turner by jengartist

wooof – lonely wolf by maxtodie

Monster Avenue Doodle by reyexzyl

We Are Not Alone by GoshaDole

Foodie Babe J by CQcat

Tuti Suka Es Nong-Nong by fajardesign

Leisure Precipice by digitalsleaze

Blossom by iamkzee

Render Cecilia by sakucitah

Gal de los Muertos by SashaZombie

Distorted Reality by x-posion

Ponyville Flower Shop by RainbowRage12

Wild Pinetree and Friends by Mag1cWind0w

Ling-Liang by andyshade

Indonesia by morlock22

Principito by ALPHA11-11

Nature areaClosed

Caligrafia by lauliver

Summer Time by Cuccko

Park by jarist84

TERESHA X SALLY by silocult

Sound in my ear by Tomekkaz

Matilda by stigmatan

22 by TimurKhabirov

The spirit maya by AR-MANDO

Fruity-fruit by chibiorangebing2

Black Friday Collaborations Project by chicken1985

Ace in the Hole by Maglii

Rainbow pipe cloud by Giesji

Zosterops japonicus by 398hajime

Japan by morlock22

Memory by pikachu0221

punKgirl by Psycool

Chun lee street fighter Vector by brainwavedesigns

GoGo Girl by MidniteHearts

Passado-Presente-Futuro by ine5ita

Me… Oh Wait…! by iveinbox

~ combi ~ by bagusetiawan

Dave Koz by prie610

Little Vampire by Camilo-Otalora

(rb)

January 30 2012

09:23

Send in the Toons: Collection of Creative Cartoons


  

For most of us whether it was the Saturday morning programming, the Sunday morning comic strips, more, or all of the above cartoons have been a major part of our adolescent and adult lives. For whatever reason, we seem to be drawn to the often exaggerated drawings of cartoonist’s pens. Be they digital or analog, classic or modern their cartoons call to us. Connect us to other times and places. And of course, they inspire us.

That is what brings us here today. We have sought out a collection of creative cartoons that touch across a range of styles and feels to inspire Noupe’s readers. So whether your tastes tend towards the retro fashions of tooning’s yesteryear, or the more edgey stylings of more modern artists; character studies and creation, or the illustrated landscapes and scenes inspiration awaits.

The Toonage

Greg by Philipp Broemme

Santa Claus, no luck in poker by Max Golubev

Turtle by Nynke Bloembergen

Classical Animation by Ruwan Fernando

Book Cover Illustration by Dan Shefelman

Charming Pirate by Gustavo Rios

Mascot and Character Design by Dirceu Veiga

Doctor Foster (Nursery Rhyme) by Vitalij Sidorovic

micro-macro by ed jankovsky

ADVENTURES by jhon tiven

-
CE Contest II by Rizky widodo

Mallorca’s Youth stands up to the crisis by Victor Dorado Martorell

Digital Works 2012 by DJ Luongo

Sample Works by Robert Cori

THE ENDLESS ONE by Saul Salazar

Cartoon logos by Scott Evans

Angry Sheep Studio by Ann Marshall

mix of ages by KO+KO architects

Ghost in the Machine by Tom Sparke

Staedtler by Daniel Oldenburg

-
The dog by Wipawee Juntarawong

Boring Europa by Karolina Pyrcik

CARTOONS by Jmenko Musiyenko

Amy by José María Matia

The tree of hapiness by Alejandro Ovalles

MAGGU by Uzair Baig

Let’s Rock by Jira Jiramakorn

Farytale by Aleksandr Kuskov

MEGAMUERTE by felipe Niño

Local DJ In Love by Ashley Fontones

(rb)

January 26 2012

17:55

Creative Uses of Illustration in Web Design


  

Using illustration in web design has become quite trendy these days. People love to see beautifully designed illustration based websites because they stand out from the rest. Not only because of the beautiful illustrative art work and carefully crafted web designs but also because of the perfect balance struck between these two important components.

Today, we want to dig into some creative ways you can work beautiful illustrations into your web design projects. We hope that this compilation will inspire some new ideas. You can see in the examples where designers have captured a certain illustrative style and wonderfully integrated it into website design in various ways. These unique illustrative styles make a website more memorable. Enjoy!

The Showcase

Plavacek.net
Plavacek.net takes a unique and gorgeous approach with its design that certainly looks great and attention grabbing. The designer imaginatively presents the underwater and above water scenes in a single frame brilliantly.

Screenshot

Meomi
In this web design, although the mascot is not the only bit of illustration and character work present it does add a lot of personality. The overall illustrations and style of the site make it a less formal presentation.

Screenshot

The Last March
This is another illustration driven web design that demonstrates the different levels of playfulness and whimsy these types of illustrated elements can add beyond pure decoration.

Screenshot

Pampaneo
Pampaneo’s lively use of yellow and green with idiosyncratic characters creates a bold look with depth and balance.

Screenshot

The Pixel
This is another site with a very stylish design, but with a much busier layout. The blue-tone gives a very strong impression.

Screenshot

Pojeta
With this web design, the designer conveyed his own personal and unique style with a single illustration against a vast amount of whitespace. This makes the design look hugely impactful and very beautiful.

Screenshot

YODAA
This website successfully manages to be unique in its own way by highlighting the illustration with carefully positioned content; and since this is accomplished effectively, the result is quite spectacular.

Screenshot

Aussie BBQ Legends
What makes this website stand out is not only the stunning illustrative art work or the vigilantly crafted design; rather it is the beautiful balance between these two components like was mentioned in the opening.

Screenshot

Ufo.lt
This website demonstrates a beautiful submersion in illustration. You can see how creatively the designer makes use of their illo skills.

Screenshot

Pieoneers
The illustration presented in this website although it is very colorful and has some depth, it still maintains a bit of a simplistic feel. The muted tones used for the rest of the site really make the splash of color in the pie very pleasing to the eyes.

Screenshot

Html5 Lab
Html5 Lab has a bold site, using large 2D illustrations and some light embellishments coupled with a sharp color scheme of grey and red with little traces of white and black to pull the design together.

Screenshot

Pigeon and Pigeonette
The uncharacteristic layout and quirky, vibrant illustration make Pigeon and Pigeonette worthy of exploring.

Screenshot

Teamnomad
Teamnomad’s header reinforces its own theme simply and in an understated way, though it is still extremely apparent, creating a strong brand connection quickly. The rest of the page leaves enough room to breathe, so viewers aren’t overwhelmed.

Screenshot

Iwit
A large stream of character illustration is paired with an otherwise simple website design, creating a very attention-grabbing result. There truly isn’t much here that could use improving.

Screenshot

Rays-lab
Here the design uses a rich, vibrant illustration that provides a stunning foundation for the design to work off of.

Screenshot

Coopers kids
Coopers kids’ illustration doesn’t carry on all through the page, but it works wonderfully with the peaceful color scheme creating a look that is both simple and effective.

Screenshot

Ericsteuten
Although very eventful, with lots of movement to draw the eye, the design here is still balanced well. This balance seems so simply struck that it makes the whole process look easy.

Screenshot

Attack of the web
Attack of the web mostly confines the use of exceptional illustrative elements to the over-sized header of the single page site. This is a great example of a functionality driven site with a strong use of illustration.

Screenshot

Cubeclub-chemnitz
This web design has a strong letterpress print feel, with bold text and original icons. The repeated texture pattern is a nice touch.

Screenshot

Dedoce
In this design, the underwater scene possesses loads of grunge and texture which keep it from looking like just another vector built website.

Screenshot

Cool Brush Design
Cool Brush Design’s site throws restraint out the window yet still manages to pull off sophistication with ease. The majority of the illustration serves both ornamental and functional purposes.

Screenshot

Arbel Designs
The illustration work in Arbel Designs’ site is extremely attractive and attention grabbing, however the way the tabs adjust when they are clicked is somewhat distracting; but the overall design is still extraordinary.

Screenshot

Toris Eye
In this web design, illustrations are put to work to create an overall theme that looks visually alluring and appealing.

Screenshot

Racket
Here the thematic illustrations are used establish a very surreal tone or theme for the site, and they certainly grab the attention of the users.

Screenshot

Get my boss to North Cape
This web design whimsically repeats its fundamental mission statement through the illustration which comically recreates the site title whilst simultaneously establishing a theme.

Screenshot

Egopop
This is another site with an atypical layout in this collection. The illustrations in the design let you know about the individual this site represents as well as break the normal web mindset a visitor may have.

Screenshot

Duirwaign Studios
Duirwaign Studios makes use of illustration in a very beautiful and breathtaking manner. It also provides some life and movement to the design putting a memorable face to it.

Screenshot

Mellow Mushroom
In this case, the interactive illustrative elements provide much more than mere decoration, adding an edge which smartens the design in a way that only interactive illustration can.

Screenshot

The Great Bearded Reef.com
The Great Bearded Reef makes use of creative illustration to create this playful masterpiece. This is a distinctively fun, tongue-in-cheek design which fits and serves its purpose well.

Screenshot

Moshi Monsters
Here, the illustrations are relatively strange yet tempting owing to their inimitability and innovation. The big and bold typography definitely is the first thing that gets noticed, and compliments the rest of the design well.

Screenshot

The Alamo Basement
The background texture of this website provides it an extraordinarily captivating and personal feel. The visual explosion of characters and colors is great for getting the reader’s attention.

Screenshot

Florida Flourish
This is an enormously stunning illustration full of interactive elements which comes with an unmatched style that captivates the visitors.

Screenshot

Webbli World
This website illustration instills a sense of enjoyment and wonder that engages the visitors with its appealing design.

Screenshot

Old Loft
Old Loft brings into play an artistic and inventive illustration that makes this website both unforgettable and exceptional.

Screenshot

Visit Cascadia
The overall style of this website feels like an illustration, and still, it doesn’t have the characteristic humanistic elements.

Screenshot

Veerle
Here the illustration lends more backup support, with many brilliant background elements in play. Some of these are more corporeal than others, although in general they are more about visual support than anything else.

Screenshot

Tea Round App
This is an ideal example of illustrated design. The style is tremendously stunning, totally unique, and very appealing.

Screenshot

Pixel Baecker
The hand rendered design here showcases the designer’s talent. It demonstrates that they creates artwork with their hands that connects flawlessly to their animation skills.

Screenshot

Chernobyl heart
In this web design, the illustrated text is far more subtle than most. Rather than driving the whole direction of the design, it merely plays along nicely.

Screenshot

Instant Ad Legend
The somewhat singular style of this design delightfully incorporates the large illustrative elements which play several roles in the overall design.

Screenshot

(rb)

January 23 2012

21:00
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