G$earch

Illustration in Web Design: 30 Inspirational Examples

Posted by Harshad

Illustration in Web Design: 30 Inspirational Examples


Illustration in Web Design: 30 Inspirational Examples

Posted: 27 Dec 2012 05:04 AM PST

Editor’s note: This is a contributed post by Babar, a freelance designer from Pakistan who specializes in Website and Interface design. He designs with simplicity, usability and beauty in mind. He also writes for WebHostingBreak.com.

There are many ways for giving a website a unique look, but none is more effective than creating some awesome illustrated elements for it. Illustrations can give a lot of personality to the layout of your website, provided that you know how to use them properly.

It doesn’t matter if it’s a completely illustrated background, a sketched font or a hand drawn icon, it will provide your design with a unique feel as long as your approach towards inserting these elements in your design is correct.

Today, we’ll be sharing with you some awesome examples of illustrated elements in web design. Hopefully, they will inspire you in creating something unique for your own website or projects.

Duct Tape & Glitter. It’s a design studio so naturally these designers will want to create something unique for showing off their skills. And usage of illustrated elements has surely helped their cause.

O3. Another design studio that uses illustrated background to increase the visual appeal of their website.

Trent Walton. Trent Walton uses both the illustrated background and hand drawn icons to create a unique feel for its layout.

Postable. Postable’s hand drawn icons and stylish fonts are really binding together the layout of this website.

AppGear. The usage of some great illustrated graphics from their games is helping AppGear create a unique website for themselves.

Aggregift. Large illustrated graphics and hand drawn icons makes Aggregift an attractive website.

Sir John a Day. Top notch illustrations and the fact that they are interactive makes visiting Sir John a Day an enjoyable experience.

Babel. Created for a young audience, Babel needed the illustrated elements to catch their imagination.

ParaNorman. You will need illustrated elements in your website if you are trying to promote an animated movie and that’s exactly what ParaNorman did.

Impress A Penguin. An example of just how much can be achieved through proper usage and placement of illustrated elements.

SoleilNoir. An excellent website with some great illustrated elements and a sketched font.

Luhse Tea. Custom font and illustrated elements makes Luhse Tea a real eye candy.

inTacto 10 Years. With the help of its illustrated graphic this website makes it easy for the user to know the achievements of inTact in the past one decade.

Inspire Conference. This fully illustrated website is doing a great job in promoting the inspire conference which will be held next month in Leiden, Netherlands.

Spokes. This one has everything you can ask for, illustrated background, hand drawn icon and a custom font, but what makes it special is the proper placement of these elements.

UK Energy Consumption Guide. Illustrated elements makes explaining difficult statistics to an average user a lot easier, and this website is a perfect example of it.

Somos La Pera Limonera. This design studio uses some nice illustrations to create a fresh look for their website.

Muffi. The quality of the illustrated elements used in this website tells a lot about just how good this design studio is.

Shape. I guess design studios just love illustrations.

ConvergeSE. Another design conference promotion website using illustrated elements to attract the user’s attention.

WWF. Let’s face it, most of us are not great readers. And guys at WWF understand that, so they used illustrated elements to convey their message.

The Great Bearded Reef. Josh Wilis surely knows how to promote himself.

Boks Quiz. Illustrated elements can be a great asset for a website dealing with a young audience, take a look at Boks Quiz for a proof of this statement.

The Hybrid4 Graphic Novel. This website has some of the most detailed illustrated graphics.

These are Things. Awesome illustrations really, and they needed them as well, because they are selling their illustrated “THINGS” through this website.

DIY. Illustrated backgrounds, hand drawn icons plus a nice approach towards the placement of these elements and you get a winner like DIY.

Alex Buga. By looking at the illustrated elements of his website, one can instantly know how good a designer Alex is.

Explanimate. Another nearly completely illustrated website.

More than Twenty. The illustrated background and the custom font creates a nice harmony in the layout of More than Twenty.

Pieoneers. Development studios are often not into illustrated elements, but when they do decide to use them the result can be as awesome as Pieoneers.

Easily Generate Android Or IOS App Icons With MakeAppIcon

Posted: 27 Dec 2012 06:43 AM PST

So you have your app icon ready for release. You love both iOS users and Android users the same so you’re going to release your app to both the Apple App Store and Google Play. But did you know that there are different image dimensions required of each app submission?

Make App Icon

There’s a lot of different image requirements to keep track of. You need an icon image optimized for toolbar, navbar, launcher, tile view, menu, etc and across two platforms. Today we are featuring a website that can lend a hand: MakeAppIcon.

All you need is an image file of your app icon; and you’ll get the correct dimensions and file names ready for submission.

Create App Icons With MakeAppIcon

To begin, ensure you have your app icon image ready. For best results, make sure the image is square e.g. 1024 x 1024 pixels, and in the image formats of JPG, PNG or PSD.

Next, go to the MakeAppIcon website. There, you will see a bread toaster; this is where you will drag or icon to, to upload the image.

Drag And Drop App Icon

After a few seconds of ‘baking’, your app icons will be labelled and generated in the correct dimensions. You can preview what the app icon will look like on an iPhone or Android smartphone. Insert your email address at the top to receive your generated app icons.

Preview

All the generated icons for both iOS and Android are emailed to you in a ZIP file. In conclusion, this is a really simple to use app to help you resize your app icons into the right dimensions and correct file names for easier app submission.

0 comments:

Post a Comment