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:
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
- 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.
- 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:
- Most important content goes near the top. Supplemental (less important) content goes near the bottom.
- Content answers the top questions a visitor might have (based on your already defined goals).
- Unnecessary information is removed
- Pages have clear, meaningful headings and sections are broken up by additional headings
- Long paragraphs are avoided. Instead, content is broken up by bullet points and links to more information
- Content maintains a consistent voice in tone that matches the brand. Images and files are content too. You can place the images and files you'll need to display on the website right along with the content in the same folder.
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:
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:
- Name of the template or type of content being sketched. For example, a product page.
- Annotations to describe different content elements (patterns) being displayed on the page.
- 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:
How to Turn In the Content/Sitemap
You'll be submitting the content and sketches through your project index, just like the last assignment.
- Create a publicly shareable Google Drive link that points to your content
- On your root index.html file, which is the Project Hub, add an H2 with Date: Sitemap.
- Upload a .PDF or image file of your sitemap.
- Also on your root index.html file, which is the Project Hub, add an H2 with Date: Content.
- 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.
- Create a new folder (subdirectory) within your site called "sketches".
- 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.
- On your root index.html file, which is the Project Timeline, H2 with Date: Sketches.
- Add a link to your sketch images under the heading. The links should point to rsketches/mysketch.jpg, for example.
- 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:
- 4 - 5: Your content is structured into sections/folders according to your architecture. The content has been edited according to the standards above, with extraneous information removed, bullets, and headings. You identified what was missing. Your annotated sketches depict at least 3 main templates at a large and small screen size. Everything was submitted according to directions.
- 2 - 3: You organized the content into sections, but the sections don't always match your website goals. The content has been edited, but its structure could be improved. The content was submitted according to directions. You completed the 3 sketches, but they lack detail or are not completely appropriate for the type of content on the website. You may have approached from a large screen perspective.
- 0 - 1: Content has not been organized into a logical architecture. The content was very lightly or not at all edited according to web best practices and does not show thoughtfulness. The content does not reflect your website's goals. Your assignment wasn't submitted according to directions. You're missing 1 or more sketches, and the sketches are not detailed. They may not have been submitted correctly.