After you have defined the goals and decided on the information architecture of a website, there are important stages in the design process you should complete before writing a single line of HTML or CSS. If you begin designing visuals or building pages before you are prepared, you may end up discarding your original work. By using wireframes, mockups, and prototypes. You can quickly create to explore diff errant design options and functionality for the site.
Making changes before writing code and creating graphics allows you to make changes more quickly and is less costly and more efficient. Whether or not you use all three models generally depends on the size of the project. Larger projects that incorporate complicated elements, such as connection to a database, or use multiple features, will benefit t from using all three models. Wireframes are typically created in black and white or shades of gray, using placeholders for images.
Wireframes avoid the visual design of the site and are more concerned with the organization of the content and features. You can create a wireframe in a program like Adobe Illustrator, Adobe Fireworks, Microsoft Visio, or Omni graft e, or even by using a sketch on paper or a whiteboard. A wireframe does not need to be interactive, and is a fast way to start a conversation between designers, developers, clients, and other members who are involved in a project.
Mockups are sometimes the result of wireframes, although it is possible to skip the wirer among step for less-complex sites. You can create them in an image editor such as Photoshop.
You create mockups to begin exploring the visual elements of a site, such as the user interface elements such as buttons and navigation bars, typography, layout, and imagery like photographs and illustrations. Some designers prefer to create two or three different.