omahacodeschool / bk-omawho

4 stars 1 forks source link

Overall static design #4

Closed kittee closed 10 years ago

kittee commented 10 years ago

User

Events

Login

Site Pages

Quiz

kaitlynhova commented 10 years ago

Hey! I'd like to help out with this -- What were your thoughts, Jay and Michael? : )

kaitlynhova commented 10 years ago

Hey! So this sort of a thing I was thinking of for the landing page. I really want something that takes all of the data that everyone is giving (for example, their profile photos) and having it "put a face to" Omaha's Creative community as soon as the visitors enter the site. What do you think of that kind of a thing? I was thinking that it would be a "random profile image" generator that would grab users images with by random ids.

landingpageidea

kittee commented 10 years ago

This is a cool design! Although one of my concerns is that it looks like with this design, it will take an extra click to go to another page to start looking people up, whereas the current Omawho, you can start clicking on people right away from the homepage. Maybe instead of "Omawho" and the tagline in the dead center of the page, we keep it at the top in the header, but the pictures taking up the page like this definitely helps emphasize that the focus is the faces of Omaha.

kittee commented 10 years ago

I'm just going to add what Michael and Jay have come up with so we can have these two mock-ups on the page together to compare more easily:

Omawho mock up

I like their header and navigation bar area, and I like how your (Kait's) draft adds more focus to the faces, and the overall feel is classier.

kaitlynhova commented 10 years ago

What if we maybe did a full page of random people for the front page like this? generaliconlayout

kittee commented 10 years ago

Yeah, this takes what I liked from both designs. :)

I'm not so sure about the name and tagline being vertically centered because it obscures their faces. I think it might look better bottom-aligned, and by default the images could be opacity 0.9, on hover fade to 1 and have the name/tagline appear.

Also if we're relying entirely on the hover effect to make the name/tagline appear, that will make the user's mobile experience more difficult. Maybe just for mobile, the name/tagline can already be there.

Just so you know, color schemes and fonts are still really up in the air, we probably won't finalize that until tomorrow. So this turquoise isn't necessarily what's staying forever.

kaitlynhova commented 10 years ago

Sweet -- I can make the hover effects work in sort of a compromise on mobile. Maybe making the images have the bottom aligned title? Maybe we can use the random image selector for something cool on the about page?

kittee commented 10 years ago

Yeah, we haven't given much thought to the layout of the About page. That's still up in the air, too, if you have ideas for it.

kaitlynhova commented 10 years ago

Just throwing this idea in the pot as well for the front page! One of the things that I thought the current Omahwho website could have done better was to make it look like it was more than just a bunch of user data. Just trying to figure out how to dress up all the data so that it seems more exclusive and noteworthy than it is right now (which looks like a bunch of creative people just signed up to be on this website). frontpageidea2

jayshaw commented 10 years ago

Hey guys! Here are a few possible logo treatments. Since we had a few layouts with slab serif and serif fonts already. I played with script and rounded serif with bright colors to give it a playful feel. omawho mockups


omawho mockups2


omawho mockups3

Lots to talk about tomorrow. Kate we hope your feeling better.

kittee commented 10 years ago

Jay, my favorite of your mock-ups is the first one. I really like that logo and the integration of the question mark, and I like how the navigation bar overlays on the banner with just a little bit of transparency. We are missing important things from Michael's mock-up though (the category filtering and search bar), so instead of the tagline on that bottom section of the banner, perhaps the tagline can go under the logo and put the category filtering and search bar there instead.

One other thing is that I think we should keep the banner shorter than these drafts so the faces are still the main emphasis. Probably closer to the height Michael is using, so somewhere in the range of 150-200 px.

And yeah, there is a lot to talk about tomorrow (or rather, later today because I'm up past midnight for some reason). You guys have a lot of great ideas! And I think there are good things from all of these that can be pulled into one cohesive design.

kittee commented 10 years ago

Here's my skyline illustration that I would really like to use for the banner if you guys like it, too. I tried to keep the colors muted so it wouldn't be difficult to overlay the logo on it, but we can also use Jay's subtle drop shadow to make it legible.

Omaha skyline

htmlmt commented 10 years ago

Really great work, everyone! I love the skyline, the logo and Kait's designs.

Here's what I have so far for a homepage design (minus footer content) that begins to bring everything together:

omawho homepage

kittee commented 10 years ago

Larger buildings image: Omaha skyline large

htmlmt commented 10 years ago

The Big List of All Mockups

Desktop

Homepage

omawhohomepage

Homepage with Categories

omawhohomepagecategories

Login Page

omawhosession

Sign Up Page

omawhousernew

Profile Page

omawhoprofilepage

Events Page

omawhoevents

Name Game

omawhonamegame

Name Game Results

omawhonamegameresult

About Page

omawhoabout

Mobile

Homepage

omawhomobilehomepage

Profile Page

no mockup

Events Page

no mockup

Name Game

no mockup

Name Game Results

no mockup

About Page

no mockup