Difference between revisions of "Website 2014 Redesign"

From Hive13 Wiki
Jump to navigation Jump to search
(r8.1)
Line 5: Line 5:
 
|EndDate=?
 
|EndDate=?
 
}}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]].
 
}}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:
 +
* Display: [https://www.google.com/fonts/specimen/Exo+2 Exo 2]
 +
* Body Copy: [https://www.google.com/fonts/specimen/Open+Sans Open Sans]
 +
 +
These fonts are available on Google Fonts for free-as-in-beer use.
  
 
== Progress ==
 
== Progress ==

Revision as of 19:33, 17 September 2014


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