The first week I asked my three web design classes to plan their personal portfolio website by creating a wireframe and a sitemap. Their personal plan had to state what colors, typography, graphics, patterns, textures, and any possible miscellaneous items, which can be anything that one might consider adding into their portfolio.
What is a wireframe? video by Joshua Showalter explains that a wireframe is the visual layout of a webpage(s) to be used in a website.
What is a sitemap? is defined as, “a list of pages of a web site within a domain. There are three primary kinds of site map: Site maps used during the planning of a Web site by its designers. Human-visible listings, typically hierarchical, of the pages on a site. Structured listings intended for web crawlers such as search engines (Source: https://en.wikipedia.org/wiki/Site_map).
By predefining the structure of their website, it will give each student a plan to follow, as they build the webpages of their portfolio site.