Topics
- Defining the template site’s purpose: what would a user of your template choose it for?
- Defining the research and resources:
- CSS Libraries – you must incorporate a CSS library into your template, these can be full blown component based libraries like Bootstrap and/or Bulma, utility libraries like Tailwind, or micro libraries for specific supports like sass flexbox grid.
- Defining the site’s layout:
- Drawing with large primitive shapes, suggest a layout and/or box model an existing piece of design;
- Name the elements page pieces that you will be creating a default format – Headings, body text, lists, forms, menu, tables, images, buttons, grid system, social icons, etc…
- Name a default page and/or post for the template – describe what parts of your elements page will be included;
- Defining the model and architecture:
- Draw a box model over your primitive shapes layout;
- Consider HTML skeleton to support this layout;
- Defining Typography and palette:
- name a heading and body Google font pairing, name a primary color and grays;
Problem Set
You have already created a simple prototype of a html template, creating the elements page and the default page. Now it’s time to create a more complete template built from your starter, or from scratch.
It will need to have a clear homepage design which considers it’s proscribed purpose: a small business, personal portfolio, newsletter, or something else. This should dictate some of the elements you chose to include.
Work through the topics list and make your first decisions, most importantly researching designs which will influence your template.
For the blog
Summarize your choices from above and include artifacts from the process: images, screenshots, drawings, typography choices, colors, etc…
