Content and Sketching

March 14, 2019
March 19, 2019

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

You'll be submitting the content and sketches through your project index, just like the last assignment.

  1. Create a publicly shareable Google Drive link that points to your content
  2. On your root index.html file, which is the Project Hub, add an H2 with Date: Sitemap.
  3. Upload a .PDF or image file of your sitemap.
  4. Also on your root index.html file, which is the Project Hub, add an H2 with Date: Content.
  5. Add a link to your Google folder under the heading.

Did you remember to make your Google Folder public?

How to Turn in the Sketches

You'll be submitting the sitemap and sketches as image or PDF files to your project index, just like the last assignment.

  1. Create a new folder (subdirectory) within your site called "sketches".
  2. Take photos/scans of your various sketches. Get those files onto the computer via email or other means. Upload those through FTP into the "sketches" directory.
  3. On your root index.html file, which is the Project Timeline, H2 with Date: Sketches.
  4. Add a link to your sketch images under the heading. The links should point to rsketches/mysketch.jpg, for example.
  5. After all the content and sketch files have been uploaded and linked, submit both the timeline hyperlink and the link to the Google folder via Blackboard Learn.


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

Return to Assignments