Website 2014 Redesign

From Hive13 Wiki
Revision as of 20:46, 17 September 2014 by Joseph Sikorski (talk | contribs)
Jump to navigation Jump to search


Property "ProjectImage" (as page type) with input value "{{{ProjectImage}}}" contains invalid characters or is incomplete and therefore can cause unexpected results during a query or annotation process.

Hive13 Project
Website 2014 Redesign
Status: Active
Start Date: 2014-07-01
End Date: ?

The slow, arduous process of redesigning the Hive13 public facing website. The design is basically a reskin of Lvl1's site, but with less blue and more yellow. Later, we will go into the Website 2014 Implementation.

General Notes

The font families used here are the same as those used on the Brochure:

These fonts are available on Google Fonts for free-as-in-beer use.

Progress

Note: PDF previews of the older versions weren't created, but there isn't too much to see in them anyway. Design mostly focussed on a cohesive desktop-centric design.



r6

Changes

  • Added a basic mobile design that maps directly to the content layout in the desktop design.
    • Design was drawn sized for a 320x480 proportioned screen, which basically no new phones have, but...
    • Design was also drawn to show all the demo filler content.
  • Added initial idea for mobile flip-out menu, but I don't like it.

PDF Preview

Pages:
  1. Desktop/iPad (all content)
  2. Mobile (single screen)
  3. Mobile (all front page content)
  4. Mobile Flip-Out Menu



r7

Changes

  • Added idea someone suggested for having a multi-project carousel under the primary splash screen. (Could be implemented later. Which probably means never, but it's an idea...)
  • Made Mobile Flip-out Menu all yellow.

PDF Preview

Pages:
  1. Desktop/iPad (all content, no multi-project carousel)
  2. Desktop/iPad (all content, **with** multi-project carousel)
  3. Mobile (single screen)
  4. Mobile (all front page content)
  5. Mobile Flip-Out Menu



r8

Changes

  • Added new desktop comp with a matrix of recent projects.
    • Includes one project thumb which shows the project title, a short blurb pulled from the wiki page, and a link to said wiki page.
    • Intent: Shown on mouse-over (desktop) or on tap (mobile) (This is the default behavior of apple browsers concerning converting roll-over behavior for mobile.)
    • Have not considered what this might look like on phone, if it's shown at all. It probably won't be.

PDF Preview

Pages:
  1. Desktop/iPad (all content, big image only)
  2. Desktop/iPad (all content, project grid, no stroke on top-nav or content area)
  3. Desktop/iPad (all content, big image + project carousel)
  4. Mobile (single screen)
  5. Mobile (all front page content)
  6. Mobile Flip-Out Menu



r8.1

Changes

  • Removed strokes on header and top of content area from all comps
  • Added new desktop comp with a hexagonal matrix of recent projects.
    • Same notes as desktop comp with rectilinear matrix in r8.
  • Added new desktop comp with slogan instead of project blurb over splash image.

PDF Preview

Pages:
  1. Desktop/iPad (all content, big image only)
  2. Desktop/iPad (all content, big image with slogan instead of project blurb)
  3. Desktop/iPad (all content, project grid)
  4. Desktop/iPad (all content, hex project grid)
  5. Desktop/iPad (all content, big image + project carousel)
  6. Mobile (single screen)
  7. Mobile (all front page content)
  8. Mobile Flip-Out Menu



r9

Changes

  • Removed crowded front page designs, leaving only the one with the tag-line, for both the desktop and the phone designs.
  • Had pointed out that there's no Spy on Us link. That'll be added in r10 somewhere.

PDF Preview

Pages:
  1. Desktop/iPad (all content, big image with slogan)
  2. Mobile (all front page content)
  3. Mobile (single screen)
  4. Mobile Flip-Out Menu
  5. Ignore this page. (Started working on project gallery page which isn't listed in the menu hah hah hah hah hah.)