1

I am designing a website in Illustrator and then handing the PDF off to the web developer. What size in inches should my mock up be?

  • Designing websites in Illustrator is to head into the heart of darkness. I would double check with your developer that s/he is definitely happy with a PDF. The first website I ever designed was in Illustrator in 2008 (because at the time I was stronger and faster in that program), I've never done another in AI. Stick to Photoshop if you can. – Consume Coffee Feb 19 '16 at 18:24
2

I'm pretty new here so I don't know how much "into detail" I can go, but here are 2 Tips for Designing for web (be it an app or website).


Design in Pixel

  • As @Darth_Vader pointed out, don't use inch or any other measurements beside Pixels for designing in Illustrator for Webdesign.

Illustrator Project setup for Webdesign (source: seesparkbox) Illustrator Project setup for Webdesign (source: seesparkbox)


Create a User Interface Kit

  • If you have to use elements more than once, I would suggest creating a user interface kit, either in the Symbol Panel

User Interface kit saved in the Symbols library (source: smashingmagazine)

User Interface kit saved in the Symbols library (source: smashingmagazine)


Conclusion

If you want to design a fast markup, I would go with Illustrator. But Photoshop is far more advanced and better to organize the elememts

  • Thanks for the contribution! Let us know if you have any questions – Zach Saucier Feb 29 '16 at 3:30
  • Loving the tip about creating a UI Kit or symbols library. Any thoughts on how to do that in Gimp? Not having much luck Googling it. – Eric Hepperle - CodeSlayer2010 May 17 at 15:35
1

You should be setting up Illustrator in pixels not inches and this only depends on what you're supporting/developing. There are so many variations to target in website development. Also, this approach will be very time consuming based on how your question sounds. Illustrator is best utilized only for wireframe and mockup not for the full design. If you have elements like a logo or icons I would go ahead and produce them with Illustrator and export out as PNG or SVG. If I were you I would create a style tile and figure out what screens you want to target then build a template so you can quickly produce a mockup and pass that to the web developer in a PDF format. So if you were going to build a site to be mainly supported for mobile iPhones you could have something like this:

enter image description here

Reference:

0

Piece of advice, don't use Illustrator, use Photoshop. Photoshop has every bit needed for you and your developer (tools, units, etc...) can craft a site. Illustrator does not, you need to configure it (tool, units, color mode, etc...). Why would you configure an app to work as another that you probably already have? I could keep on with reasons but lets go back to the question ^^

Regarding size, first you need to talk with your developer, if he's planning for a responsive, fluid or static website, there are many bits that could help you and him speed up the whole design, build, play process. (That's why its always recommended to a) sketch and b) Wireframe before starting any design prototype, funny enough, Illustrator is used a lot to craft wireframes, but just that when it comes to "web design").

If it's not a responsive website and just a static one (very 90's btw), you can decide which dimension you want to focus on, here's a list of screen size statistics: enter image description here

I'd take 1024px as the min and 1366px as max for the safety of your content (width), but again... if you need a fluid, responsive or adaptive site, this won't matter much since content and interface will rearrange or scale automatically to fit any specific screen size resolution.

Second piece of advice, if you are designing a responsive site (mostly cause you want it to adapt to mobile devices) it is always a good idea to start the design based on mobile proportions and not a desktop screen, it makes the design process LOTS easier when moving to the desktop version after. "If it looks and works properly on mobile, it will mostly look and work good on desktop" they say.

Here´s also a link that shows in a very basic way the difference between adaptive, fluid, responsive and static.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.