Showcase & Discover Creative Work Sign Up For Free
Hiring Talent? Post a Job

Bēhance

Blogging: Personal Project

  • 517
  • 23
  • 0
  • Concept Blog
    my 72 hour personal project
  • For a personal challenge I gave my self 72 hours to rethink and produce a solution for how I would like to consume blogged content. Here is the fruits of my labor. 

    I decided to redesign a favorite blog of my called Sleevage.com. This is a blog that celebrates the art of vinyl cover art, something that is near and dear to me. As I began my process it was clear to me that the overall structure of this standard blog did little justice of showcasing its content, further was really an overall bad experience.

    One of the issues I find with current blogs today is that  the way content is presented is often functional but still misses the mark of presenting the content in a more visually rich manner. I simply miss the visual richness that I still find in print content. 


    The core objectives of this design:

    • Build a user interface that conforms to the landscape orientation of our monitors and have a UI that adjust in response to the increasing or decreasing of the browser.
    • Disclosure of sites content would be from left to right compared to the standard vertical flow of content, therefore alleviate the need to design for a fold. 
    • Produce a system that maps closer to the way people consume print content. 
    • Present the content in a rich editorial style while reinforcing the current Sleevage look and feel.
    • Reduce navigation to only what is essential within the context of the experience and disclose navigation feature when relevant to the context of the experience.
  • Landing Page

    1. Since this concept does not flow the content from top to bottom I placed the standard header at the bottom edge of the browser where it would be locked.
    2. Having a horizontal structure to the blog allows the view to see at minimum 4 posts at a time.
    3. Navigation items on top are streamlined to "view by", "archive' and search. The sparseness of the navigation is designed so to mitigate competing with the posts. 
    4. Pictographs that are locked up with the "view by" and "archive" buttons give user an abstract view of how there content is organized.
    5. etc etc....just take a look.

     
  • All images in the comps are 3D renders with Cinema 4D
  • All images in the comps are 3D renders with Cinema 4D
  • Post Detail Page

    1. On selection of one of the post its contents are disclosedoverlaying the interface in a lightbox effect. The usage of alightbox metaphor was to focus the user to the content. Usercan simply click the “X” close button located in the upper righthand corner to return to there prior state. 
    2. The thumbnails at the bottom of the content help give the usercontext to where they are at within the post. The user can movearound the post by selecting any of the spreads. On selectionof any thumbnail the content will slide left or right disclosingthe content. 
    3. Posts detail pages are displayed as editorial spreads. As
    4. the viewer reads from left to right the story of the post flowsfrom left to right with interesting photography of the spreadsreinforcing the points of the story while making it a visually richexperience. 
    5. In short, I wanted to present the cover art as if they where be-ing displayed in a musuem, hence the stark white back drop tofocus your attention onto the artwork 
    6. Locked on the lower left hand corner resides features such asentry point to view all comment about the post, post a com-ment and share. This grouping remains persistent so as theuser changes from spread to spread they always have accessto these options. 
  • images in comps are 3d renders done with  Cinema 4d
  • images in comps are 3d renders done with  Cinema 4d
  • images in comps are 3d renders done with  Cinema 4d
  • images in comps are 3d renders done with  Cinema 4d
  • Posting Feature
    On click of the post icon the layout folder under itself disclosing the post interface.
  • images in comps are 3d renders done with  Cinema 4d
  • Archive Page