From the course: Illustrator for Web Design

Wireframe overview - Illustrator Tutorial

From the course: Illustrator for Web Design

Start my 1-month free trial

Wireframe overview

“

- [Presenter] Wireframes are an important part of the design process. A wireframe is simply a sketch. It's about placement and the arrangement of elements that are usually completed before any artwork is developed. A wireframe acts as the blueprint of a website project. The main purpose is to show the client how the website will be structured before designing it. It's simply a file that's focus is not on colors and pretty images, but it should denote structure. Wireframes help us to quickly iterate different possibilities when planning a site hierarchy, structure, and functionality. A wireframe is a low fidelity representation of a webpage that shows the basic elements of the page. They are not interactive and they don't show much detail, but they create a simple design that guides the project. It is beneficial to create wireframes for multiple sizes on your website. This will help you to prioritize the content and figure out which elements should come first on the page, and which should follow. When you're considering what to include in a wireframe think about general elements when you plan every webpage. Things like headers, footers, sidebars and content areas. Then think of additional elements. Navigation bars, widgets, buttons. Once you have an idea of the elements you can now start creating your wireframe. All elements in the wireframe are usually displayed and organized to consider the following. Content, what exactly will be displayed on this page. Structure, how will the elements on this page be put together. Hierarchy, how will these elements be displayed in positioning, labeling, and size. Functionality, how will these elements work together. And behavior, how do these elements interact with the user. There are certain things that you don't want to include in wireframes. Wireframes are not supposed to include any sort of design elements as this will distract the purpose of the wireframes. This is why they should be created without the use of color, graphs, or typography. No graphical elements. You also don't want to use Lorem ipsum text. You should use real text for clarity, and also so that you'll know the demount of space that you're going to need for the text. Finally, you don't want to include any sort of actual design. Wireframes shouldn't define the final look of a page. They should show how the site will work, not how the site will look. Wireframing is an important step in any screen design process. It primarily allows you to define the information hierarchy of your design. It makes it easier for you to plan the layout according to how you want your user to process the information.

Contents