Prototyping a web layout in illustrator: tips and tricks part 1

July 10th, 2009 | 4 Comments | Posted in Tutorials

Two out of three times when I’m approached by a client to build them a website, I ask for prototype images to give me an idea of what they want. This is always met by baffled and suspicious looks of my true intentions as they assume a website is built off the top of the developers head. This couldn’t be further from the truth.

For that top-notch, breath-taking website you have in mind with 3-D like effects, drop shadows on starry background, round corners and flickering flash images, you need to put that into still images called prototypes. These are high-resolution pictures, usually JPEG for its fantastic pixels that capture screenshots of the proposed website. They are used to quickly communicate visual ideas between a web designer/client and the developer about the proposed website’s layout and design before coding. The devil is in replicating the images details painstakingly in HTML code.

Illustrator is probably the best graphic design software I’ve encountered so far. Other major contenders for this coveted position are FireBuilder , Balsamiq, MindNode, and OmniGaffle which use a combination of wireframing and rapid prototyping to generate the layout and designing of a website.

Coming back to illustrator, drawing web concepts is so practically simplified that, save for the creativity aspect, one would credit it for the picturesque art it facilitates a designer to create! Below are some cunning, behind-the-scenes tricks I use to make web design a lesser nightmare than coding:

More »

« Newer Entries
Video Marketing

Community News

  • 50+ JavaScript Tutorials For Get More Helping TechniquesJune 6, 2011

    Here we present an ultimate useful round-up about Javascript Tutorials. All the tutorials are fully helping for beginners and professionals. Actually javascript is a language which makes your page attractive and your interaction becomes stronger with the client. JavaScript / JQuery is more helpful for web developing and web page designing. It is extremely helpful to bring in money to you. Script and JQuery also play a vital role in simplifies HTML documents and JQuery is the best technology which make available to you about the latest information. On the other hand javascript is such a language which makes your page more eye-catching. Javascript language provides you a foremost library to make your design creative and you get positive result with its help. We have many techniques for best user experience (UX). We also have large library like, jQuery, Prototype, mootools etc. Javascript is one of the most useful and language for your design as well as developing, it is the cause of its popularity in the world.

  • Things a Web Designer Should Know About Website UsabilityMay 31, 2011

    We all know that change is the only thing which is constant. Even if there are certain rules and regulations for designers, they too have changed with the passage of time. However, when it comes to usability principles, a few principles can be modified but cannot be changed. The reason behind these principles staying the same is because they have been adopted by human nature and they need to be kept in the same way for proper usage. If you want to change them, basics will always stay the same. As with any project from designing layouts for calendar printing to designing an online store, you should follow a protocol to make sure all important elements are included.

  • Top-10-web-design-toolsMay 30, 2011

    Web design is undoubtedly the most crucial aspect of a website. It plays an important role in traffic generation and search engine ranking results. A designer has to give his best to come up with an attractive and effective custom web design.

  • 8 Practical Tips for Newbie Graphic Designers!May 27, 2011

    Here are 8 Practical Tips for Newbie Graphic Designers which can help you succeed in Graphic Design World.

  • Web Design Inspiration, Illustration Based Web DesignsMay 26, 2011

    Web designing has gone miles ahead from where it started initially. The growth and development in web designing has surely contributed towards the growth and development of internet as a whole. Web designing specialists are always looking to helpful tools and techniques to make web designing even more productive as well as attractive.



Find all your favorite tv shows on Comcast Cable, Charter Cable, Cox Cable, Time Warner Cable, and other satellite and television providers.
Get great deals on home security systems with ADT Home Security.