Line25

35 Creative Examples of Doodles in Web Design

Read the full post

The everyday doodle is often left hiding away in a designer’s sketchbook, never being fulfilled in life as a complete design, but every now and again doodles get their chance of being part of the big picture. In web design, designers often strive to inject creativity into their interfaces and layouts. The good old pencil can be a highly useful tool that can easily add personality to a design, giving that feeling of originality that you just don’t get with crisp, smooth digital effects. This showcase of creative doodles in web design provides a wealth of inspiration and shows how hand-drawn elements can add that tactile and low-fi feel to a website design.

N.DesignStudio

View the website doodles in web design

N.DesignStudio’s website features Nick La’s works and even some tutorials. It uses a Koi fish illustration that gives his site an original look.

Web Designer Wall

Web Designer Wall doodles in web design

The Web Designer Wall is one the most popular design blogs thanks to its content and appearance. If you’ll take a look you’ll also notice that the background uses quite an interesting doodle.

Creative Cruise

Creative Cruise doodles in web design

Creative Cruise has a catchy appearance with their colorful animated website. You can check it out or, if you want, you can hop on-board and get inspired by like-minded creative professionals.

Friday Cat

Friday Cat. New cat every Friday doodles in web design

Friday Cat is a website that presents a different cat each Friday. Scroll down to see the rest of the cats or propose one yourself!

Artattackk

Website Designing Company in Delhi, India Web Design & Development

This website is nearly entirely made out of doodles. How cool is that? It belongs to a team of creative minds that usually build stars and planets but also some websites in their free time.

Miki Mottes

Illustrator, Animator, Designer doodles in web design

Miki Mottes is an illustrator, animator, and designer and this website will only surprise you with creativity as you scroll down. Not only will you find a gallery of projects but you’ll also notice that the entire web site is a carefully thought and designed.

Denise Chandler

Denise Chandler Web Design & Development doodles in web design

Denise Chandler surely stands out with her animated doodle that turns into an illustration. Scroll down to find more of her doodles!

Joby

Joby Varghese doodles in web design

Joby’s website works as a personal scrapbook. It starts with a white horizontal band that shows quite an interesting doodle and then showcases all the projects he’s worked on until today.

Natrashka

Grafički dizajn Natrashka doodles in web design

This is a graphic designer’s website that starts with a nice doodle and a warm hello. If you’re interested you can check some more doodles or projects in the gallery below.

Low Morale

One man's struggle to cop doodles in web design

This website focuses on presenting one character’s struggle to cope with a series of animations and doodles.

Heather Sloane

Heather Sloane doodles in web design

This is Heather Sloane’s gallery that showcases her work over the time. You’ll see doodles, illustrations, and other cool stuff.

Wefail

WEFAIL doodles web design

This website uses doodle to create a frame for the content they post. They also have some cool short films you can watch.

Deborah Cavenaugh

Deborah Cavenaugh doodles web design

This is website is Deborah Cavenaugh’s blog which does not only use one of her beautiful paintings as background but also showcases a gallery of other projects.

Dean Oakley

Web Design Gold Coast, Australia _ WordPress Websites

Dean Oakley is a web designer and developer that specializes in WordPress and this is his horizontal scrolling website. You’ll also notice an illustration that gives a friendly warm vibe to his page.

319Heads

319 Heads – Design Studio doodles web design

This is yet another example of a website that uses doodle. This time everything starts with a cool logo and ends with an amazing gallery of impressive artwork.

Who is Red

Red Russak doodles web design

Red’s page is one that makes you smile when you see it. This is a business card website that portrays Red Russak through a nice illustration.

Kev Adamson

UK based Freelance Web Designer doodles web design

Kev Adamson’s website also uses doodles in its design layout which makes the interface look more friendly. Even the web menu has a unique design approach.

Leihu

welcome to leihu

Leihu uses a cool illustration on its home page.  If you like it you can also check out his portfolio or read some of his thoughts.

Legwork Studio

Legwork Studio doodles web design

This is yet another example of using doodle in your next project. Get inspired by this cool site and check out their creative slideshow.

Suie Paparude

Suie Paparude doodles web design

Suie Paparude has a cool and original website that uses doodle that makes you want to check out their music or book a ticket to their next concert.

Rleonardi

Robby Leonardi doodles web design

This website uses Robby Leonardi’s illustrations to portray himself. You’ll out it’s divided into 3 parts: a game based resume and two portfolios.

Masterofshapes

Master of Shapes Interactive Design Direction doodles web

Master of Shapes combines typography with a doodle in the site’s header and the result is amazing! Check out this design-driven interactive studio website!

Sean Halpin

Seán Halpin doodles web

This is Sean Halpin’s business card website. He is a web designer who uses illustrations to best display what he can do and how he can help.

Hasrimy

hasrimy.com doodles web

hasrimy.com specializes in designs that are ‘out of this world’! They have a horizontal scrolling website that uses doodles, galleries and so much more.

Stuffandnonsense

Fabulous web design UK, Stuff & Nonsense doodles web

Stuffandnonsense uses doodles and illustrations in their web design which gives the site a familiar touch while also laying out important information to their readers.

Jason Love

Horizontal scrolling humor by Handmade Interactive

If you’re in the mood for a creative website, then Jason Love’s project on handmadeinteractive is your go-to. He uses doodles and illustrations, asks questions and tells stories.

Kid Acne

Kid Acne doodles web

Kid Acne is a passionate artist, illustrator, print-maker and emcee and he spent most of his time writing graffiti. His site best shows his hobbies and interest as it uses many doodles in its web design layout.

Daydreamdesigns

Daydream Designs doodles web

They’re a full-service creative agency and they use doodles and illustrations on their website’s background and menu. They share their friendly attitude and passion for the job through their website.

A Crayon’s Life

A crayons life doodles web

A crayon’s life uses a repeated doodle as a background texture. This gives the website a sensitive and familiar touch.

Pikaland

Pikaland - Connecting the dots doodles web

Pikaland focuses on connecting the dots between creativity. It uses doodles in its background and showcases a large range of illustrations and arts.

Story Pixel

View the website doodles web

Story Pixel uses doodles all through their website. From the leaves in the header to the warm ‘hello’ and ending with a nice drawing at the bottom of the page.

Appd

Aarp doodles web

This Russian website is one of my favorites. It is a creative and interactive website that focuses on children health care.

Guillaume Juvenet

Guillaume JUVENET doodles web

Guillaume Juvenet takes doodle to another level and gave his personal page an animated and original look.

Jan Cavan

Jan Cavan Designer, Illustrator & Iconographer doodles website

Jan specializes in user interface design, illustrations and iconography and his website is a good example of using your creativity to the maximum.

Assets.wwf.org.uk

WWF doodles website

This horizontal scrolling website uses doodles and typography to raise awareness about the food we eat and how we could keep our world brilliant.

Smallman Records

Smallman Records doodles website

Smallman Records uses doodles in their header and as their background to give their website a friendly and creative touch.

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.

23 Comments

  1. Jessette says:

    I’m browsing through designmeltdown.com and I came upon this site. I’m happy to see my design is included in the list. :D Thanks!

  2. m a r c o says:

    Really cool post… Very creative and inspiring websites. I started in this business because as a kid, all I did was doodle around… Drawing caricatures on my school books (I have the attention span of a fruit fly)… As a grown-up I still do (every phone conference I have ends up being nothing but a date on top of the page and nothing but caricatures). I honestly hadn’t ever considered putting any of that on the web… until just now. So a very enthusiastic thank you for your post…

  3. Krishna says:

    I love the “doodle” style on websites, I think it adds a touch of personality…

    A nice list to refer back to! :)

  4. Chris Ingram says:

    I love to see this kind of design on websites, too bad i’m not creative/arty enough to do this myself

  5. alen says:

    Great list, we have inspiration now…Thanks…

  6. alen says:

    thanks chris

  7. Website Design Contest says:

    I liked web designer wall a lot and thanks for including it in the list. I am going to build a site and going to post it in a contest held by grafikguru.com

  8. Web Design Philadelphia says:

    This is a good collection of doodle sites. I enjoyed checking them out. I love building sites artistic like these you have listed.

  9. Jonathan says:

    Can’t get more unique than if you doodle it yourself. Thanks for rounding up these great looking sites.

  10. Eko Setiawan says:

    Great list, we have inspiration now…Thanks…

  11. Stratos says:

    What was awesome :O

    Thanks!

  12. CodeMyConcept says:

    It is amazing what having no limits can do with designers creativity. I wasn’t even able to pick a favorite.

  13. William Knight says:

    I recently became friends with a Wacom tablet and am very excited to apply some of these concepts to my future projects. These are great examples! Thanks Chris Spooner!

  14. Michael Pitzer says:

    Nice collection. Thankfully you only focus on great work as I know a few of things I’ve created would find their way on to the not so great list…

  15. Mike Smith says:

    I have to admit Chris, I’m a bit sad that I didn’t make the list :(

    This is a killer list though. My favorite kind of site designs to be honest.

  16. paul says:

    Nice list!
    What is the best technique for creating doodles in web design?
    Draw it with a pencil and then scan it in?

    • Sue Mary says:

      Hi!
      Maybe it would be more elegant to use a graphics tablet or something similar, but since I do not own any device like this, I used exactly the method you described.
      If you need the doodles just for web and you do not want to print them as large posters, this works really good.

  17. squareart says:

    Stunning list, very inspirational.
    – as are you: )
    Thanks Chris.

  18. jay design says:

    Great collection. I think this kind of web design is becoming more appealing at the moment.

  19. Tutorijali HDonWEB says:

    Excellent list Chris. Just like everything you publish on line25 :-)

  20. Belinda says:

    These are gorgeous! Thanks for showing them.

  21. Design Informer says:

    Great roundup Chris. I was going to say that it’s an excellent Monday Morning round-up, but it’s still Sunday evening here. :)

    Nice collection. Definitely a great source of inspiration. While this trend might be slightly overused, I think if done right, it can really make a website look very nice.

  22. Konstantin says:

    Great list Chris. Beautiful! Right what I need for my Monday morning inspiration ;) Thanks for sharing!

    ~ K.

Leave a response