Redesign home layout

[jeannebrooks]

Use case: Users want to know what the conference is, sign up easily, want to find about page to know more about it. Then they want to know about key announcements. They want to know who's coming to the conference -- speakers and attendees. Quick access to the program.

Looking for the site to be less text, more visual.

Home page should showcase access to Program Volunteer Register Sponsor Hotel News for ONA13 (also feed of ONA13 announcements needs a place)

Must keep key items like location, dates, as well as information currently listed in the footer. Additional items that might need to be added to the footer: New committee members (as they are added) copyright, ONA logo. Give credit to Wordpress and the theme used.

List sponsors with logos.

Consistency with the branding for the conference ie: conference logo.

If grid format is used: consistency design. (some have borders, some don't)

Web manager:

Want to be able to say, upload a graphic or photo and push it to the front and denote how much space it takes up.

Don't want the content to feel siloed. And don't want every page to be the same type of scroll.

[danielbachhuber]

@jeannebrooks for most of these, it would be great if you could fill in the description field with more details. Or, if you don't have them yet, mention that details are forthcoming.

[jeremiahnpatterson]

[anekola]

@jeremiahnpatterson Take a look at the staging server (http://ona13.danielbachhuber.com/). I think it still needs some tweaks, though. It's already responsive, so resize your window.

The six grey boxes are widgets; so you can take a look at them in the admin. I added a field for an icon for each of them, which I haven't created yet. They'd all be a 20x20 grey icon, similar to the text color.

[jeremiahnpatterson]

Great Adam! This is shaping up nicely. Responsive works wonderfully. Smart move on the icon.

What's the best way to list design/style tweaks, here?

[anekola]

Yeah, here is great.

[jeremiahnpatterson]

Great, I'll work on putting together a (short) list.

[jeremiahnpatterson]

Hey Adam, here are some changes:

-New intro text (see below) -Let's make the intro text font [ "Open Sans", Helvetica, Arial, sans-serif; ] so it matches the body font of the site -Play with the intro text to make it a bit more airy, maybe decrease the size and increase line spacing? It takes up a big chunk right now -Love the Recent News header (and folded corner!) -Let's make the widget headings just a shade or two darker, somewhere between where they are now and the black of the section headings (Participate/Sponsor) -Are we able to play with the drop shadows below and above the menu bar? I think I like the depth the current live menu has -If we can, let's make the search button match our other buttons (white text on purple button) -Last thing, I think the Register button is a bit wide. Love the boldness of it, but let's try cutting off 1/3 or so.

Overall, this new front page is really coming together well! Thanks for all your continued help on this.

[jeremiahnpatterson]

Here's that updated (ever so slightly shorter) intro text, from Jane:

The Online News Association 2013 Conference & Awards Banquet is the premier gathering of highly engaged digital journalists shaping the future of media. Learn about new tools and technologies, network with peers from around the world and celebrate excellence at the Online Journalism Awards.

[anekola]

Thanks Jeremiah, here's a few responses:

• Good idea with the search button; I can do that.
• I agree on the widget heading darkness.
• Open Sans is basically the only font you're using on the site; I strongly suggest you use a serif font for areas like this on the home page and headlines on posts. It'll add a little more character to the site.
• We can certainly change the drop shadow on the nav; I changed it because I feel that large drop shadow are counter to clean design, and they tend to draw attention to the elements they are on.

Below is an image with four changes: 1) darker widget headings, 2) Open Sans intro text (with new text), 3) more narrow registration button, and 4) drop shadow on nav.

[jeannebrooks]

Hey all, great work. Have we tried a different font from Open Sans? The intro text at this size is looking like Comic Sans and I don't like it at all. It's not so bad at a smaller size but I'd really love to see another font option.

[anekola]

Very good point Jeanne; body fonts don't generally scale well. Here are four serif fonts from Google that have a light weight, so they don't become overpowering at large sizes:

In order they are: Josefin Slab, Merriweather, Lora, Roboto Slab

[anekola]

The site is also already loading Source Sans Pro:

[jeannebrooks]

Thanks Adam. I really like all of these options and am with Jane who feels the same way. We both were really drawn to the Source Sans Pro, although I feel open to any of them if you had a preference.

One thing we also both noted was that the size is large on the homepage and I don't think it needs to be so prominent. A different font might do the trick but if not, if we could scale it down just a bit, that would be great.

[jeremiahnpatterson]

Hey all, a little late to this party. I also like the Source Sans Pro. And Adam, good point on the drop shadow. I'm good with whatever you all decide here. I think it's moving forward nicely.

[anekola]

Pushed a few updates:

• Intro text is Source Sans Pro
• Link to sponsors page in place of logos
• Added icons to homepage widgets (They hadn't been there yet, so please let me know what you think)

[anekola]

Closing this issue. We'll open another one next week when we start talking about the homepage layout for during and after the conference.