Web Design Project #3: Hangouts


What:  Hangouts web page design

Date:  16 March 2014


Hang Cover

Home / Landing Page

HangAnd so how do you go from this page to the Post or About pages? It should be as easy as hitting those circles below the main pic. I initially had some scroll icons but it cluttered up the page.

Post PageHang Post

Yes, those are placeholder icons – you would click to read the post.

And the same problem occurs here, how would you scroll through the posts? I would possibly add a dynamic scroll that appears on hover over but these designs don’t show it.

Post Page single

Hang Post Full

Missing: A vertical or even dynamic scroll to read through the entire post.

About PageHang About

Click Twitter to redirect you to the Twitter page.

Chao for now.Hang End

Whew. That’s my 3rd for the month so I’ve reached my quota! And now it’s time to think about the implementation.

Listened to this while creating this:  Miles Davis (from Round Midnight, to Stella, Blue in Green etc.)  Absolutely majestic!

What did I do immediately before creating this: Checked out a few web designs on Web Design Ledger and caught some inspiration from TeamTreehouse (thanks to Matt Helme, Sarah Parmenter and Zac Gordon).

Credits:  Thanks to Compfight.com for the photo credit used in the post page:

Photo Credit: N08/11354706956/”>gentagrafie | hotstepperzdiggshit.com via Compfight cc

Everything else, my own.

Comment: Looks doable. That’s either Flexbox, or positioning using floats or using custom grid layout. Once again to be implemented within Codepen.io if it makes the cut.

About this project:  Initial blog located here and last designs located here and here. Basically this is a series of designs – 3x a month, beginning March and ending in May. If I have my maths right, that’s 9 designs between March and May with the 3 best designs to be coded here.

And I’ll be storing my collections here.

Which design has your vote?

See you in the next design!


8 thoughts on “Web Design Project #3: Hangouts

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s