Project 3: Part 1 of Phase 1

Assignment: Interactive Strategy Portfolio Website (team project)

  • Do  a project estimate
  • Make 2 design solutions (homepage, desktop)
  • Build wireframes for other sizes
  • Build all 5 pages
  • Test on all devices
  • Create final invoice (be honest regardless if you go over or under estimate)

Phase 1 of Web Design

1. structure information with user-centered considerations (Site Map–provided for by instructor) *Research the competitors (Links) and content (write the html, link the pages correctly). I remembered to change each title for each page. The different page names are a part of  Search Engine Optimization good practices.

    • Home
      • Mobile is evolving and you need to get on board if your business is going to be competitive
      • What we do
      • Why we do it
      • Why hire us
    • About us
      • Mission
      • Creative Director
      • Technology Director
      • Business Development
    • Services
      • Overview
      • Mobile app design and devlopment
      • Mobile marketing strategy
      • Developing brands for the mobile user experience
      • Responsive web design
      • Strategy and consulting
    • Projects
      • Client testimonials
      • Porfolio section. 6 pieces and a brief description of each project
    • Contact us
      • map
      • directions


Brand Experience Design Agency – Hornall Anderson.



2. communicate style and function Branding: This is a team effort and I have the primary role as coder/content manager. We will have a meeting soon about the brand and wireframes from there. The brand is currently “to be determined.” As part of the brand language/interface, our savvy client has requested no skeuomorphs. (Say Farewell: Apple’s Skeumorphism Hall of Shame [PICS])

3. understand mobile strategy and other media requirements Client wants 3 layouts– mobile, tablet (landscape), and desktop and 2 design concepts (photoshop documents of two distinct solutions for the website’s homepage on a desktop) as well as saving weekly iterations along the way. Responsive logo, Responsive jQuery slideshow and/or Video, Embedded fonts from,  needs to work on IE8, all modern browsers, phones and tablets.


chrome time tracker

Chrome Web Store – Chrome Time Track

I used chrome time track for this set of tasks. Setting up framework was easy, a matter of copying files from a zip from github:Toast | A simple CSS framework. I haven’t styled anything, yet. Semantic mark-up and content, I didn’t create many divs, yet. That will come later with photos and after we have established placement (through Photoshop comps and wireframes for responsive layouts). I did cannibalize a few sites for content as well as writing some of my own copy. Html validation crucial. Stuff like <h3>headline<h3> (note, that’s not an endtag) copied and pasted a few times can lead to many errors, luckily solved with a little find+replace.


Katsite. I created the index of the project’s components on my project site.

TBD Brand. This is a working un-styled prototype of Project 3.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s