: Designing a website mockup in Illustrator 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?

@Martha945

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:


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.

Vote Up Vote Down

@Alves566

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)



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)



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

Vote Up Vote Down

@Karen819

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:



Reference:


What are the steps in designing a website?

Vote Up Vote Down