Learn How to Design a Responsive Website in Adobe Illustrator – Part...

Learn How to Design a Responsive Website in Adobe Illustrator – Part 3 | Dansky


In this follow-up tutorial, we’re going to learn how to add the design to our website layout in Adobe Illustrator.

PART 1 – The Responsive Grid

PART 2 – Defining the Layout

PART 3 – Adding the Design

LEARN | Adobe Photoshop

LEARN | Adobe Illustrator

LEARN | Adobe InDesign

Facebook http://www.facebook.com/foreverdansky
Twitter http://www.twitter.com/foreverdansky
Instagram http://www.instagram.com/foreverdansky
Tumblr http://www.foreverdansky.tumblr.com


  1. You could show viewers how to use Horizontal Distribute Space more often, rather than spacing stuff out 'by eye'. Great video series otherwise. Cheers.

  2. Hello D. I'm a beginner, and in this moment i really dont kno what to choose for studyyind and practice web design, i have a bit of confidence with adobe fotoshop cs6 )) i'll apreciate if u will give me some expert advice THANK YOU

  3. I just found this Youtube Channel and i really like your tutorials.
    I have followed the 3 parts of how to design an responsive webdesign in Illustrator.
    However i have one question. Once you have made the design, What fileformat do you choose so the coding guys can make your design in to an actual website ?

  4. Hello, Thanks for the videos! I just wanted to ask, How to design the pages in the site – About, Gallery..?

  5. is there going to be a part 4? i would really love to know the coding and some other usefull stuff 🙂 loved the series. keep up the good work :)

  6. Really liked the videos. I have a couple of questions:
    1. Do you usually group those components into layers? I have watched a couple of other videos and people do stress on that.
    2. Do you use a color palette? You seem to randomly select some colors in this video.
    3. Same for Typography.

    Anyway, really liked the way you talk, the intro of your channel and the content. Please continue doing this!

  7. Thanks Dansky, you can check out these tips for web design in illustrator like global color and text styling designsprint.net

  8. Thanks. Great series Dansky!

    Was the transparent 30% overlay primarily to allow the white text copy to have contrast, the general mood/effect, or both? I quite like it but I also could see the argument for just leaving the photo unadulterated.

    Again, loved getting a glimpse in to your process.