Learn How to Design a Responsive Website in Adobe Illustrator - Part 1 | Dansky

In this tutorial, we're going to learn how to set up the responsive grid for our website in Adobe Illustrator.

PART 1 - The Responsive Grid

PART 2 - Defining the Layout

PART 3 - Adding the Design

-------------------------------

-------------------------------

[olivermaaker]

Coldn't you just draw one big rectangle that matches a desired width/height of your grid and use Object > Path > Split into Grid and add desired parameters? There is also a nice option to add the guides.

[lisap]

Thank you for this great tutorial. It was very helpful.

[LCJ]

Hey Dansky, thanks for this great tutorial.

[TheTJHill]

Thank you so much! This was very helpful

[solidsn]

Do you only use 70x70 and 30x30 spacing? Also can you set first the 30px box and after that the 70px? There usually is some padding on the left and right of the page where you put the 4 boxes.

[Design.by.Hameed]

its really help but the title give us more expectations hahah

[blackredJazz]

Why did you go with a 1170px width?
Asking because most of the screen width I see are 1366. Thanks.

[edwin]

Hi Dansky. My artboard is 970px by 600px. How do I create these guides affectively so when I duplicate the guides it aligns perfectly at the end of the artboard?

[savant_spoon_bender]

Are these 12 column layouts still best practice when subjugated to flex-box environments?

[JimHoltAgitprop]

Misleading title - should say 'how to create a grid'

[redengarcia]

hey Dansky, I cannot clearly see the window of your document, what are the height and width you use?

[ИлијаЧворовић-эу]

Ey, what's this skin? Can i make it myself or get it anywhere?

[Reddit_Tales]

The short of it is your screwed until you get Adobe XD

[Julidulia]

Um, hey Dansky, you said to copy the guides by pressing shift and hold? what was that second? basically i can't copy the guides as you said.

[nikkimarie]

HOW or WHAT did you use to get from the finished layouts we're making here, to having it flow in a website?

[marcustheboxman]

At 2:42 when i create the second pair of guides then the first pair disapears

[ahmedarceo]

can you do a tutorial how this your web page upload on the internet and make it live?

[Midorigami]

why 1170 x 1170 pixels ? can I use different sizes ?

[brandonclark]

Shift and although isn't allowing me to copy and paste the lines. Why not

[AbduTaleb]

why doesnt work with me i lock guides, i seclect lines . then doesnt happn to duplicate lines !! AI sucks ..