130 likes | 315 Vues
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.
E N D
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. • 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.
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.
Mobile Site • Your staging site will have four main links • Roughs • Wireframe • Comps • Static Site
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
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.
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
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.
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.
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.
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.