Design skin for Bootstrap templates about csol-site HOT 8 CLOSED

Will let @iamjessklein comment on the visuals. One thing to note though (not sure if anyone made you aware of this already) is that the site is going to need IE8 support, so we're going to have to be careful about our use of background-size. This is currently being applied to the header and footer, and looks a bit funky when it's not available. So probably worth considering when it comes to the design process - no page wide lit-up gradients, for example :(

from csol-site.

Ok, thanks for the note. There's plenty of polyfills we can use for bg gradients and background-size. We might have to just make a repeatable background for the header/footer. If we use gradients I generally just have a flat color bg polyfill.

from csol-site.

@coryshaw this looks really crisp. Some general notes here:

• This treatment really improves the logo legibility.
• I changed the navigation items a little bit - so check here for reference: https://github.com/mozilla/CSOL-site/wiki/ia as it will change how you treat the ui around the navigation (particularly since there is a "My Dashboard" section that pulls together the "My Badges", "My Favorites"... notifications etc.)
• The thumbnails will not be hexagons - only the badges are going to be that shape. The actual thumbs probably be squares/rectangles/rounded squares
• The word filter should be removed. Also note in the wiki link above the actual filter options.
• Perhaps it is just this mockup, but the text feels a little light to me - it needs more contrast.
• Can you iterate a bit more on the "detail" and the "like" button styles? They feel a bit plain in comparison to all of the great playful texture that you have going on in the background.
• Are you going to be having a strong footer presence? I had experimented a little with this in the badge studio - might be worth iterating on : http://badgestudio.chicagosummeroflearning.org/

from csol-site.

thanks for the feedback @iamjessklein. We will process internally and get back to you. I think the footer treatment is definitely up for tweaking. Like what you have going there.

from csol-site.

Here's some updates @iamjessklein

Notes:

• Updated footer layout
• added icons to filter dropdown menus
• mockup for single page layout

Regarding the text / button styles comment, we feel like it looks a bit drab at the moment because there's no icons/thumbnails in there. If you check out the mockup with the icons, it really brings the whole thing to life.

Feedback welcome. Thanks!

from csol-site.

Hey @coryshaw - nice work
Feedback:

What works:

• the filter with icons
• the cards with the badge graphics and buttons
• having a fat footer

What could be improved:

• the copyright should be on a separate line from the secondary navigation (probably the last bit of text you might see on the page
• the footer itself feels a little bit cluttered and somehow de-emphasizes the secondary navigation, I might try playing around with a different background here - separating the footer into two parts, or just adding more spacing
• if the program has a 2 line title - how will that work/ effect the layout?
• the heart should have different states (on hover, on click etc)
• There feels like a lot of capitalization going on here, can we incorporating upper and lowercase in the navigation?
• The light green for the links feels a little bit light, can you try a darker color for higher contrast?

Great work overall, this is really coming together.

from csol-site.

Here's an updated mockup @iamjessklein

Revisions Shown Below:

• Main navigation links changed to title-case
• Footer: Copyright has been moved and other content spaced/positioned accordingly. I feel that this solves the clutter issue.
• How each program would look with a two line title (increased gray container height).

from csol-site.

@nickkrusick - 👍 all of these changes really work well for me. It's worth noting that the actual navigation is a little different from the one that you have pictured here ( check out the ia wiki).

One more additional edit: I think that the footer sub-navigation should also be adjusted to title-case.

from csol-site.