1 / 12

Wireframe Assignment

Wireframe Assignment. What is a Sitemap. A site map is a visual representation of the pages in a site and how they connect to each other Most sites are hierarchal in nature. What is a Wireframe. A wireframe is the structure of a web site using html files.

jayden
Download Presentation

Wireframe Assignment

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Wireframe Assignment

  2. What is a Sitemap • A site map is a visual representation of the pages in a site and how they connect to each other • Most sites are hierarchal in nature

  3. What is a Wireframe • A wireframe is the structure of a web site using html files. • The pages will have links to connect the pages and descriptions on the pages. • The creation of the wireframe helps in tracking the process a user would go through to do a specific task.

  4. Mobile Site Assignment • You will need to create a staging site. • A staging site is a single page that the client would be directed to get information on his project. • It also helps other team members where to find links to assets and information.

  5. Mobile Site • Your staging site will have four main links • Roughs • Wireframe • Comps • Static Site

  6. Roughs • Roughs can be present in one of three ways. • A PDF file containing the scans of your roughs • A html file with a list of full size photos of your roughs • A html file with thumbnail images of your roughs that when clicked on displays the images in a lightbox

  7. Wireframe • When you click on this link it should open a new window to the wireframe for this mobile site. • It represents the hierarchal structure and links on the site.

  8. Comps • Comps can be present in one of three ways. • A PDF file containing the scans of your comps • A html file with a list of full size photos of your comps • A html file with thumbnail images of your comps that when clicked on displays the images in a lightbox • Develop at 960px x 1440px • This is close to the same ratio of wxh for a phone • This size helps in the export of images • There is no 100% width in PS or AI

  9. Static site • When you click on this link it should open a new window to the static site for this mobile project. • Copy the wireframe folder and rename it stat_site. • Slice and dice your comps to be integrated into the site.

  10. Static Site • Pages required • index.html • contact_us.html • location.html • bicycles.html • And sub pages to bicycles.html • Not Require pages • Any other pages such as clothing and accessories and their sub pages.

  11. Static Site • Contact info for email and phone must have links set properly • tel:1-555-555-5555 • mailto:youremail@me.com • The link for location should link to maps.googles.ca and bring up the location.

  12. Static Site • The width is set to 100% • Height is set in ems • You can use either ul or div • ul provide a uniform height to the box units displayed • div allow you to have box units of different heights • There will be some points when you have to use px for sizes.

More Related