-
HOW TO DESIGN A RESPONSIVE WEB DESIGN PAGE WITH ADOBE ILLUSTRATOR
RESPONSIVE DESIGN
Illustrator and Photoshop are graphic software that we can be used to design websites for Responsive Design.
Photoshop can be used to retouch images and pictures and is effective when comes time to add pixel-based effects such as lights and shadows to elements such as background images, buttons, etc. Images created in Photoshop can be imported in Illustrator.
Illustrator proves extremely practical when designing responsive website as it offers the flexibility of working with vector images – images that can be manipulated without affecting their resolution – and allows us to visualize the complete site (all elements, all different views) into one screen, and makes isolating each element a breeze by using “art boards” to save each object individually.
OVERVIEW – DESIGNING FOR WEB
Nowadays, with the various technologies and devices by which we surf the web, graphic designers must create website layouts that adapt and/or change based on the size of the potential devices used to view the site.
In the era of responsive design, it will prove helpful to graphic designers designing for web to learn and explore HTML and CSS to better understand the potential and limits of these languages/technologies. Possessing such knowledge will help us make more educated decisions when creating the design of a web site and potentially make it easier on us (or the front-end web developer) when comes time to put the site together.
Designing a web site using the same box model as used in HTML/CSS is incredibly helpful to visualize and to implement responsiveness to a web design.
SIMPLE DESIGNS
The clean simple designs flooding the internet is not a trend for aesthetic reasons only; clean simple designs are also much easier to implement into responsive website.
This is an example of a simple design where each element, each box’s position and size adapt to fit the different devices.
CREATE THE WIRE FRAME
When designing for responsive web, start by creating the wire frame (the skeleton) of your design.
In Illustrator create three artboards: one for phone (width:480px aprox), one for tablet (width:768px aprox), one for desktop (1200px and up). Draw, place and distribute the boxes inside each artboard.
Then, you are ready to create a draft.
CREATE THE DRAFT
Create the draft by inserting some of the elements (images and/or text) to be included in the website. This is to help you visualize how the different views will look like. Make the adjustment to the existing wire frames by adding or removing boxes until you are satisfied.
FINISH THE DESIGN
Once you have the draft ready and have a good idea where each element are to be placed, then comes the time to design. Choose the colors, gather the images and text and incorporate them to the design.
Using the box model (divs) helps creating clean simple designs that are easier to export to a software such as Dreamweaver and to implement for web. With the structure ready, within a few hours working in Dreamweaver you could have a site (or at least a few pages of the site) ready to be uploaded to the web.
- You must be logged in to reply to this topic.
