Information Architecture, Spring 2023

Reminder: Since we decided to spend more time on the practical HTML skill building in Week 8, the only part of this week’s assignment that is due is an image of your proposed sitemap and the topic for the website you plan to build based on that sitemap. Use img.bb to share your image in a comment made to this homework post before we meet on Monday, Mar. 27. Then, we will continue the HTML practice so that you can begin work on your website.

Following this week’s hands-on exercise with setting up GitHub Pages and building a couple of rudimentary HTML pages, you will have a chance to build your own HTML-based website on GitHub Pages.

While you’ve had some experience with drawing sitemaps of other websites, this assignment will help you see how websites are designed and implemented by beginning with a sitemap and then building that sitemap out on GitHub Pages.

Begin by designing your sitemap for a website about something that interests you–a hobby, your studies, your work, etc. It should have a homepage and at least 4 sub-pages. One of the sub-pages should include an image of your sitemap (it can be on your “About” page or a dedicated sitemap page). The sitemap below is just an example with different file names given for the subpages–your sitemap should reflect your pages and filenames.

                        Home/index.html 
                            |
------------------------------------------------------
|              |                  |                  |
Page 1        Page 2               Page 3           Page 4
page1.html   page2.html         page3.html       page4.html 
kenner.html  hasbro.html        lego.html        about.html 

After you’re satisfied with your sitemap, take a photo/scan it for use in your site.

Then, begin building your pages and adding content into them. Your website should combine images and writing. All of the images should be your own, and all of the writing should be your own, too. Use my model website as a guide–we’re more interested in the IA aspects of your site than how much content you put into it.

On each page, remember to include breadcrumbs and a menu that links all of the pages together.

Refer back to the Week 7: Lecture post for important links to support your work on GitHub Pages.

For help with HTML, see here, here, and here.

To submit your homework, copy-and-paste a link to your website (e.g., https://dynamicsubspace.github.io) into a comment made to this post before our next class.

Next week, we will do some work in class related to your websites and build on these concepts in terms of organizing more complicated sets of information.

This homework assignment ties together the previous two homework projects–creating contemporary and historical sitemaps for a website of your choosing. In the previous assignments, you illustrated and discussed the sitemaps based on your observations. In this assignment, you will compare and contrast the sitemaps of the historical and contemporary versions of the website you selected. As you compare and contrast the two different sitemaps, you will want to discuss the changes that have been made across the decades in terms of the sites’ information architecture. Considering our readings in the course so far, talk about what has changed and why those changes might have been made. Important elements to consider in this discuss include web growth (i.e., more information to implement IA for), changing user expectations and experience, new IA theory being utilized, new learning theories being applied, etc. Provide your own evaluation of the sitemap change from before to now based on what you’ve learned so far this semester in Information Architecture. Refer back to our readings and your notes for ideas to include. The assignment can be completed using your own words entirely, but if you decide to paraphrase or quote from our readings, you will need to cite those references appropriately in a section titled References at the end of your memo.

Your memo should include the memo block at the top followed by your discussion–including an introductory paragraph explaining the purpose of the memo and a road map of what follows, however many paragraphs you decide to utilize for your discussion, and a References section if needed. It should be at least 500 words but no more than 1,000 words. Depending on your discussion, each memo will look different in terms of its organization, so I am not prescribing how it should be organized beyond the instructions above. Publish your memo as a comment to this post (see below for a barebones example).

TO: Prof. Ellis
FROM:
DATE:
SUBJECT: Analysis of [year] and [year] Sitemaps for [domain.com]

Introductory paragraph explaining the memo's purpose with links back to your two previous homework assignments (see details below for creating your hyperlinks). Include roadmap for your discussion that follows.

One or more paragraphs discussing the two different sitemaps for your selected domain. Describe and show what you are talking about in regards to the two sitemaps. Use numbers (more links, fewer links, etc.). Discuss how the sitemaps organize the site's information. 

Keep in mind that chunking information might make your memo more readable and engaging. Use topic sentences and provide transitions to your writing.

You will want to include links in your introduction to your previous two homework assignments/comments. To do this, find your previous comments, right click on the date/time at the top of your comment and choose to copy link, return to your comment to this homework assignment, highlight the word “here” referring to one of your previous homework comments, click the hyperlink icon, paste your link into the hyperlink box, and click Save. See the images below for further guidance.

This week’s homework builds on last week’s homework and sets you up for success on next week’s homework, so it’s important to follow these directions carefully to keep everything linked together.

Last week, you wrote a memo that included a sitemap illustration and discussion of the sitemap for a contemporary website that also has a pre-2005, historical version saved in the Internet Wayback Machine.

This week, you will write a similar memo for the earliest version of your selected website that you can view on the Internet Wayback Machine. Your memo should include an introduction that clearly states the date of the archived version of the website and how you are able to view it. Like last week’s memo, it should include an illustration of the website’s sitemap and a discussion of the site’s organization structure. Your memo should only focus on what you observe about the historical version of the website. Avoid comparing it to the contemporary version (we’ll do that in next week’s homework).

As a reminder, create the historical sitemap on a clean sheet of white copy paper on which you draw a sitemap (see this Wikipedia entry and this Adobe XD Ideas entry for support) based on what you see on your selected website’s homepage on the earliest, archived version in the Internet Wayback Machine. Remember to focus on the links on the homepage that lead to other pages on the same site. You do not have to document links leading to unaffiliated external sites (e.g., social media sites). Take a clean photo of your drawn site map (crop out anything that isn’t the paper and avoid casting a shadow over your illustration). Upload your image to imgbb.com as you did in last week’s homework to generate an embeddable URL to your photo. Alternatively, you may use software to draw your selected website’s site map, but this is not required. What you may not do is rely on a website that autogenerates the sitemap for you.

Third, write a memo as shown below in which you state the website that you selected, it archive date and how you are accessing it, embed your site map, and describe how the website is organized in your own words. Your memo should be between 250-500 words depending on how much explanation you need to describe the site’s site map based on its homepage.

TO: Prof. Ellis 
FROM: 
DATE: 
SUBJECT: Historical Site Map for [YOURDOMAIN.COM] 

INTRODUCTION 
One or two sentence introduction to your memo, its purpose, what it contains, etc. Remember to include the date for the archived version of the website and how you are accessing it.

HISTORICAL SITE MAP FOR [YOURDOMAIN.COM] 
Embed your photo of your site map illustration here. Go to imgbb.com, click "Start Uploading," select your photo, set a time for it to be deleted (leave it up for at least 2 weeks), and copy the URL generated at the bottom of the "Upload Complete" screen (it will look like https://ibb.com/letters). Return to the comment box on OpenLab, click the icon that looks like a photo, paste the URL to your image, click Save. After you click "Publish Comment," your image should appear where you inserted it (which should be here after your introduction. 

HISTORICAL SITE MAP DISCUSSION 
Write 250-500 words describing the website's site map that you illustrated above. Some relevant details to include might be where certain links are located on the page, which are emphasized and others de-emphasized, and your own observations about what the site map and its links tell you about the company/organization whose website you selected.

Fourth, stay tuned for the next stage of this homework, which we will begin in Week 6. In Week 6, you will compare the site maps for the contemporary website and its older archived version.

This week’s homework is going to connect to the next two weeks, so it’s important to follow these directions carefully.

First, think of a website of a large organization, company, government entity, nonprofit, etc. that has been around for at least the last three decades. Go to its website and copy the URL (uniform resource locator). Then, visit the Internet Wayback Machine, paste the URL, and hit enter. Verify that you can view a version of that website older than 2005–you will want to use the oldest version for our homework assignment next week. If the website that you selected is available today and there is an archived version older than 2005 then you are ready to proceed. If you were not able to find an archived version older than 2005, you will need to select another website until you find one with an archived version older than 2005.

Second, using a clean sheet of white copy paper, draw a site map (see this Wikipedia entry and this Adobe XD Ideas entry for support) based on what you see on your selected website’s homepage as of today (don’t worry about the archived version in the Internet Wayback Machine until I talk about our homework next week). Remember to focus on the links on the homepage that lead to other pages on the same site. You do not have to document links leading to unaffiliated external sites (e.g., social media sites). Take a clean photo of your drawn site map (crop out anything that isn’t the paper and avoid casting a shadow over your illustration). Upload your image to imgbb.com as you did in last week’s homework to generate an embeddable URL to your photo. Alternatively, you may use software to draw your selected website’s site map, but this is not required. What you may not do is rely on a website that autogenerates the site map for you.

Third, write a memo as shown below in which you state the website that you selected, embed your site map, and describe how the website is organized in your own words. Your memo should be between 250-500 words depending on how much explanation you need to describe the site’s site map based on its homepage.

TO: Prof. Ellis 
FROM: 
DATE: 
SUBJECT: Site Map for [YOURDOMAIN.COM] 

INTRODUCTION 
One or two sentence introduction to your memo, its purpose, what it contains, etc. 

SITE MAP FOR [YOURDOMAIN.COM] 
Embed your photo of your site map illustration here. Go to imgbb.com, click "Start Uploading," select your photo, set a time for it to be deleted (leave it up for at least 2 weeks), and copy the URL generated at the bottom of the "Upload Complete" screen (it will look like https://ibb.com/letters). Return to the comment box on OpenLab, click the icon that looks like a photo, paste the URL to your image, click Save. After you click "Publish Comment," your image should appear where you inserted it (which should be here after your introduction. 

SITE MAP DISCUSSION 
Write 250-500 words describing the website's site map that you illustrated above. Some relevant details to include might be where certain links are located on the page, which are emphasized and others de-emphasized, and your own observations about what the site map and its links tell you about the company/organization whose website you selected.

Fourth, stay tuned for the next stage of this homework, which we will begin in Week 5. As you might have guessed, you will create a site map for an older version of the site. Then, in Week 6, you will compare the site maps for the contemporary website and its older archived version.