design2 – Researching the template model

This is going to be a respite from developing new CSS/Sass skills for this week’s problem set. The past three weeks work was completed on the rudimentary features of an HTML/CSS template using Sass to organize and compile CSS. It included – reset, grid, a few tag defaults, color values, font values, and a couple components.

But this was created without considering the potential use cases of the template. Which to be honest from a design perspective, this is definitely putting the cart-before-the-horse.

I’d like you to consider what kind of template you’d like to work on – Who is it for? What features should it have? and What skills do you need to figure out to build them?. This will likely be the core project you develop for the remainder of the semester, so I felt you should spend a week researching and laying the groundwork for a good choice.

So for next week I’d like you to complete the following:

  • What kind of site are we going to abstract into a template? A particular business type? A portfolio? A media sharing site?
  • Survey examples of the kind of site you’re considering and link to at least three. Describe how you found them and why you selected them as emblematic.
    • summarize the primary features and pages;
    • include screenshots of the specific feature attributes
  • Survey curated website design by looking at sites that regularly review and present website design (consider looking at Jonas’ links to inspiration and blogs focused on design)
    • Find well executed examples of two features defined above
    • include screenshots of the specific feature
  • Draft the pages and components list you would likely need to build. How many layouts (pages) will there be? What major components will you build – buttons, hero, form, slider, gallery, etc.?
    • Pick a component that you’re not exactly sure how to approach building and sketch out thoughts why and what might need to be considered.

Leave a comment

Your email address will not be published. Required fields are marked *