Create a site map of a website you are familiar with. It need not be an overly large or complex website (in fact, it would be to your detriment to choose a very large site!). It can be the website of a local business or one in your hometown, or even the website of a friend or one of your own. Something 7 to 10 pages in size is sufficient. All links must be accounted for and mapped. Using Microsoft Word for this is preferred, but you may use any similar software you choose as long as you achieve map with a similar look to those created in Coding Video 2.
TEC 5343 Multimedia Web Technology
Lab Project 1 Instructions – Due @ 6:00p Friday
Step Instructions Complete?
(1) Create a site map of a website you are familiar with. It need not be an overly large or
complex website (in fact, it would be to your detriment to choose a very large site!). It
can be the website of a local business or one in your hometown, or even the website of
a friend or one of your own. Something 7 to 10 pages in size is sufficient. All links must
be accounted for and mapped. Using Microsoft Word for this is preferred, but you may
use any similar software you choose as long as you achieve map with a similar look to
those created in Coding Video 2.
☐
Step Instructions Complete?
(2) Utilize one of the wireframing options we discussed in class to wireframe the home
page of a website you choose, AND one other page on the site (or it can be a page you
feel the site is currently lacking). You may use the same site you mapped in Step (1) if
you wish.
Wireframing Options:
https://gomockingbird.com/home
https://moqups.com
https://wireframe.cc
https://balsamiq.com
Conventional pen and paper*
* – If you choose this option, I require that the wireframing look relatively professional,
and that you provide high-quality scans of your work.
(a) Include all hyperlinks to other pages.
(b) Represent all images and videos on the pages with placeholders.
(c) Place text headings and text blocks where appropriate.
Many of the above-mentioned wireframing options will not allow you to save your work
as a document without paying a subscription fee or making an account. You can avoid
this by taking screen shots of your work. To create files of your work for submission to
the D2L Dropbox in Step (4), refer to Coding Video 2 for instruction on taking screen
shots.
☐
Step Instructions Complete?
(3) In an accompanying Microsoft Word document, answer the following questions after
completing your wireframes:
(a) How will an end user generally interact with the website design you wireframed?
Describe the main navigation options for the site.
(b) What content on the page was prioritized highest? Explain why you think this
information was placed as the most prominent.
(c) Describe the features of the layout you believe are good about the site design.
☐
https://gomockingbird.com/home
https://moqups.com/
https://wireframe.cc/
https://balsamiq.com/
(d) Describe any components or features of the layout or design that you think could be
improved.
Step Instructions Complete?
(4) Submit all of the files you have created for this project to the “Lab 2 Project” Dropbox in
D2L no later than 6:00p.
☐
Remember that the Coding Watercooler is a resource available to you if you
become lost or stuck. Also remember to help out your classmates there if you
can!