Scribd
Upload
39 views

CIS 4041: Unit 8 Assignment: Wireframe Directions

The document provides instructions for an assignment to create wireframes for the home page and an internal page of a website using Cacoo. Students are asked to export the wireframes as images and embed them in a web page. The web page must include headings, images of the wireframes, and a 2-3 paragraph explanation of the design choices. It also outlines CSS requirements for the page such as using an internal style sheet, font properties for headings and paragraphs, a background image, centered 960px content width, one CSS3 effect, and valid CSS syntax. Students submit by providing the URL for their homepage containing a link to the assignment page.

Uploaded by

cool10148
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
39 views

CIS 4041: Unit 8 Assignment: Wireframe Directions

The document provides instructions for an assignment to create wireframes for the home page and an internal page of a website using Cacoo. Students are asked to export the wireframes as images and embed them in a web page. The web page must include headings, images of the wireframes, and a 2-3 paragraph explanation of the design choices. It also outlines CSS requirements for the page such as using an internal style sheet, font properties for headings and paragraphs, a background image, centered 960px content width, one CSS3 effect, and valid CSS syntax. Students submit by providing the URL for their homepage containing a link to the assignment page.

Uploaded by

cool10148
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

CIS 4041: Unit 8 Assignment

Create two wireframes for the Home Grown Lawn web site: one
for the home page and one for an internal page. Draw on
information gathered in developing your site map, personas and
competitive reviews – as well as information from the initial client
interview. If you have questions for the client, post them in the
Discussion Board in Blackboard.

Wireframe Directions
Use Cacoo to create low fidelity wireframes for the home page and an internal page. When
you’re finished, export the diagrams as PNG image files that you can embed into your web
page. (It should be the first option under the Export link, found in the upper right corner.)

The wireframes should demonstrate your understanding of interface and information design
conventions. Include the general elements you see on most pages: logos, title, contact
information, headings, content areas, sidebars, footer, etc. If you think they are needed, you
can include search boxes, graphics, and widgets (such as slideshows, calendars, etc.). Your
wireframe should NOT include specific design details such as specific font styles, colors, specific
pictures, etc. (You should, however, use the size of the font to indicate relative importance of
headings and text.) Those are decisions that will be made later in the process; the focus in the
wireframe is on the organization of the content on the page.

Some suggestions:
 Create a list of all the content that should be on every page
 Create a list for content specific to the home page and another list for content specific
to one of the internal pages
 Review competitor web pages for what you liked and think about how you can
incorporate that into your site
 Review the design conventions about where that type of content usually appears
 Review your site map to generate your navigation
 Create your wireframe using the above information
Assignment Web Page: HTML Element Requirements
Create a web page for this assignment. On it you should include the following:
1. A heading for the web page
2. A subheading for each wireframe
3. An image of each wireframe (that you exported from Cacoo) – make sure you resize the
image so that it fits within the content width of 960 px (specified below in the CSS
requirements)
4. A detailed explanation (2-3 paragraphs) of the choices you made in creating the
wireframes. (Please review Ch. 3, p78-79 in Felke on writing for the web)
Answer the following in your explanation:
a. Your reasoning for placement of page elements – how do you follow (or break)
interface design conventions?
b. Your reasoning for any use of UI design patterns – use the resources posted in
the discussion board to help you with this.
c. Wayfinding cues used on the internal page – how will users know where they are
and where they can go?
d. Information design choices – how will users be able to differentiate information
on your page?

Assignment Web Page: Cascading Style Sheet Requirements


These are the minimum requirements but you are welcome to include other elements.
1. Use an internal (embedded) style sheet
2. Apply styling to the headings and paragraphs on the page using the CSS font property
3. A background image
4. Content width of 960px, centered on the page
For example, you could use a <div> element for all the content and then set its width
You could also use the HTML5 elements for page structure
5. One CSS3 effect
6. Valid CSS syntax – use http://jigsaw.w3.org/css-validator/

Submitting
Create a link to the assignment web page on your home page. To submit your assignment, put
you home page URL in the comments or submission section of the Blackboard assignment.
(The URL should look like this: http://students.css.edu/yourusername/.) Make sure you’ve
uploaded the web page using NetStorage to the R:/web/students/yourusername/ folder as well
in order to publish the web page.

Grading
Review the grading rubric in Blackboard for this assignment.

You might also like