Adobe Illustrator Web Design Examples

Two Toasters

http://twotoasters.com
Two Toasters is a company that designs and develops apps. I love their web site! It's built with simple elements. They used gradients, transparency effects, lines, dashed lines, and arrows. The part of the site that draws you in is a slideshow of examples of Two Toasters' work. The layout is constant in each slide, but each slide is unique because the colors and images change. This web design is clean cut and simple, which is why it works.

Dean Oakley

http://deanoakley.com
Dean Oakley is a web designer and developer. I love his unique web site! The main focus of the page is a graphic created in Adobe Illustrator that really catches your eye. The graphic runs the horizontal length of the page. It is a stingy earth setting with cactus and other plants, as well as several birds. Oakley uses a green-tinted/muted color palate. The most interesting thing about his graphic is that when you make the internet window smaller, the graphic condenses and the website changes from a horizontal-dominant site to a vertical-dominate site! These little unique and simple element really make you interested in his work, and make the site very accessible.

Using Adobe Illustrator for Web Design

Begin in Adobe Illustrator by working in RGB mode. Create a new layer and lock an image of a blank web page created in Adobe Photoshop. Adjust the settings so that you are working in units of pixels, and adjust the keyboard increment to .5 pixels. By working with these settings, it will allow you to create a sharper looking image or web design layout!

The design process if faster due to the fact that you are able to maneuver between layers just by clicking on the different objects. Any reoccurring elements can easily be saved into the symbols panel.

                                             

Using Adobe Illustrator for web design is ideal because of the ability to change the layout without a lot of effort. It also comes in handy for simpler graphics.

Create elements to use throughout your project. Simply by saving them as a symbol, you will not have the hassle of recreating them every time.

Add a variety of visual effects such as textures, 3D effects, glows, rounded corners, etc. to spice up your page. By using this program, you can be sure that your graphics will turn out vectored and clear. Adobe Illustrator is simple, effective, and time efficient.