Content and Sketching

March 11, 2020
March 30, 2020

Content drives your website's design and your design, in turn, drives your content. While we can't expect to have all of the content formatted and written before the website is designed, we need to have a starting point.

Additionally, one way to start visualizing your content's structure is by sketching on paper. Sketches are meant to be rough and imperfect. They should allow you visualize how your content might fit together and be prioritized for your templates.

This is a team project. Your content and sketches should be posted by your team by the due date.

Create your Sitemap

Look at the content provided, and using the information from your competitive analysis put together a simple site map that shows the hierarchy and organization of your pages. Create this as a simple flow-chart that clearly shows the overall site architecture. You can create a digital sitemap or a sketched sitemap. Either is acceptable.

An example is below:

Site Map Example

Content Exercise

Let's take some of the content your client has provided and begin organizing it and editing it to better fit the mobile-first methodology.

You can find your client's provided content on your group project page. It might be provided content as Word or image files.

Edit the Content

  1. What content will go on the home page of your website? Remember, the home page's primary goal is typically to drive traffic to other content on your site and allow the user to quickly understand where they are and what they can do.
  2. Take the existing content your client has provided and separate it into sections/pages, according to your sitemap. Organize the content according to these best practices:

Organize the Content

While there are many ways to organize and edit your content, my favorite way is by creating a shared Google Drive folder.

Inside that folder, you can place your content in individual subfolders that match your site's architecture. (So, a folder for each page with a content file, and associated assets: images, artwork or other media, etc.)

Why not add the content directly into the website? At this stage, Google Docs is a more malleable tool. Once the content is put into the website, you may be less likely to make large changes.

Your folder structure may look something like the example below:

Content Organization Example

Sketching Exercise

You and your partner should sketch out at least 3 "templates" from your client's website on paper based on the most important sections of your website. For example, a Home, Product and News template. Sketches should include the following:

  1. Name of the template or type of content being sketched. For example, a product page.
  2. Annotations to describe different content elements (patterns) being displayed on the page.
  3. Mobile-first thought processes. Your sketches should assume a smaller screen size and content should be prioritized accordingly. However, you should also include versions of the sketches that depict a larger screen format. So, 3 templates, but 6 sketches total to show a small and large screen variation.

You won't be graded on how "pretty" the sketches look - just on the amount of thinking that went into them, and how effectively they communicate the solution.

Below is a very simple example:

Simple Sketch Example

How to Turn In the Content/Sitemap and Sketches

  1. Create a publicly shareable Google Drive link that points to your organized content. Submit that Link in Blackboard under the Content and Sketching assignment.
  2. Save your sitemap as a pdf (or take a picture of a hand sketch) and upload that to Blackboard as well.
  3. Photograph or scan your sketches and upload them into a shareable Google Drive folder link (you can include them in the content folder, if it makes it easier for you). Submit that link along with your other items in Blackboard.


Use the following rubric to ensure you receive the highest possible grade for the assignment:

Return to Assignments