by Nick Haas</div>

What is a wireframe?

• Wireframes are simple layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for your website.
• They are often devoid of color, font choices, logos or any real design elements that take away from purely focusing on a site’s structure.
• We often say that they are much like a blueprint to a home, where you can easily see the structural placement of your plumbing, electrical and other structural elements without any interior design treatments.

Here is an example of what a wireframe looks like:

It will also be the style you will use to make your wireframes.

Simply overlooking this step in order to get to the look and feel is a huge mistake that would prove disastrous for any website or any contractor building a home. To reinforce the importance of this phase in a web process, I have outlined seven extremely important reasons on why you need to wireframe.

1. Wireframes display site architecture visually

A sitemap can be a bit abstract, especially ones that are very large. Taking the sitemap to wireframe starts the first real concrete visual process for a project. Wireframes turn the abstract nature of a flow chart into something real and tangible without distractions. This step ensures that all parties are on the same page.

2. Wireframes allow for clarification of website features

In many instances, clients may not understand what you mean when you say “hero image,” “google map integration,” “product filtering,” “light boxes” and hundreds of other types of features. Wireframing specific project features on a website, provides clear communication to a client how these features will function, where they will live on the specific page and how useful they might actually be.

Sometimes you may decide to take out a feature once it is wireframed due to the fact that it just doesn’t work with what your site’s goals are. Seeing the features without any creative influence really allows a client to focus on other equally important aspects of the project and clarifies any expectations about how features will be executed.

3. Wireframes push usability to the forefront

This is one of the most important points of the entire wireframing process. Creating wireframes pushes usability to the forefront in showcasing page layouts at their core.

It forces everyone to look objectively at a website’s ease of use, conversion paths, naming of links, navigation placement, and feature placement. Wireframes can point out flaws in your site architecture or how a specific feature may work. And this is a great thing.

4. Wireframes identify ease of updates

For clients who purchase a content managed website, this point is especially important. A wireframe will immediately identify how well your site will handle content growth.

For example, if you only have ten products offered right now, but in six months you may have 100, you will want your website to accommodate this growth without impact to the websitedesign, site architecture or usability. Wireframes will identify these important areas of content growth.

5. Wireframes help make the design process iterative

Instead of trying to combine the functionality/layout and creative/branding aspects of the website in one step, wireframes ensure that these elements are taken in one at a time. This allows clients (and other team members) to provide feedback earlier in the process.

Skipping wireframes delays this feedback and increases the costs of making changes because full design mock-ups must be reworked, not just simplified wireframes.

6. Wireframes save time on the entire project

Wireframing saves time in a multitude of ways.

• Your designs are more calculated.
• Your development team understands what they are building.
• Content creation becomes much clearer.
• You avoid hacks later on in the process.

Everyone from the web team, the agency and client are all on the same page about what the website is supposed to do and how it is supposed to function.

7. Experience shows it works

Building a website is a process. Wireframing is one of those parts of the web process that should not be skipped, just as you wouldn’t build a house without a blueprint, or live in it without decoration. Each step has an important place in a larger process.

Secret Assets: These may help you in building your wireframes.

https://s3.amazonaws.com/ndangelo-documents/wireframe_kit_Web.zip

Hello class,

This will be the final project for the semester. However, I will provide short lectures on code we have worked with over the semester. This should help provide further instruction on past techniques and assist the construction of your website.

This site should not look like the test site we built. The test site contains much of the code you will need to complete your assignment (but not all). If you use your test site as a foundation for your final, ensure it has a unique appearance. (Essentially, this can be done with a skillful use of CSS, content, and functionality.

You are required to sketch out all pages of your site before you begin coding. I will need to approve your concepts before any page is built.

Your website should consist of (at least) six pages. The topic of the site is your choice (with my approval.)

The following are the requirements for your project.

Final Project Deliverables

This will be the final project for the semester. However, I will provide short lectures on code we have worked with over the semester. This should help provide further instruction on past techniques and assist the construction of your website.

This site should not look like the test site we built. The test site contains much of the code you will need to complete your assignment (but not all). If you use your test site as a foundation for your final, ensure it has a unique appearance. (Essentially, this can be done with a skillful use of CSS, content, and functionality.

You are required to sketch out all pages of your site before you begin coding (Rough Wireframes). I will need to approve your concepts before any page is built.

Your website should consist of (at least) six pages. The topic of the site is your choice (with my approval.)

The following are the requirements for your project.

• Five or more web pages
• Top fixed/scrollable navigation. The nav items need to link to the appropriate pages.
• A logo. (It can be straightforward. Your initials or name in a nice, clean font would suffice. However, you can create something in the Adobe Creative Suite.
• Create a color scheme that will go well with your site. Many sites can help you. One is https://coolors.co/
• Each page needs a specific topic (The pages should correspond to your top nav)
• Include interesting photography. (People like big pictures)
• Your website must be mobile-compliant.
• Please keep it simple and clean. Whitespace can make a viewer feel comfortable.
• You may wish to put all your content in a wrapper. That will help you constrain and organize your layout.
• Use at least three media types on a page (audio, video: Soundcloud, Spotify or YouTube?)
• The amount of content per page should be appropriate to the page’s classification. A simple “about” page should include pictures, text, and perhaps some links to external sites.
• Links should have a rollover state, including navigation.
• One or more image rollover states (we did this in CSS). (use :hover with your CSS classes used with your image divs) see example here: Click Here
• One link (or more) should direct a viewer to another site page. (Internal Links)
• Div nesting (You will need to do this anyway to build your site.)
• You embed most media with iframes. Remember to add code to make them mobile-compatible.
• Advanced functionality. Do you require smooth scrolling?
• Do not feel constrained. You can do amazing things with this project!
• Perhaps use gradients somewhere? Maybe a background? Anything that will complement the design of your site. Perhaps an animated gradient?
• Video background? If you decide to do this, be subtle and use a simple video that doesn’t detract from your website design and usability. (We haven’t done this in class but we can easily implement it if you wish)
• NOTE: You will have a lot of time to work on this site. Do not rush. It should be completed in class ) - mostly. I will need to approve your site before you upload it.