Sponsor Landing Page: Design Comp

[benglass]

Wireframes: #3

[AndrewSepic]

Hey Fella's, Here's the results of my work so far. It was a refreshing design project. Taking away the nav menu and focusing on a one pager was nice. I had fun. Let me know what you think so far. I've created two header variations to house the logo. Not sure which is strongest at this point.
I can make tweaks and should be able to turn them around in a day.

[AndrewSepic]

@jhoguet @benglass Just realized I didn't mention you guys when I uploaded these earlier today. Not sure if you were notified or not.

[jhoguet]

I was notified but mentions are even better.

I love it, here are some thoughts for us to explore.

1. The white background with the logo on a blue background bar feels off... what if the white background and the blue bar became one (a white bar). And on scroll it is basically fixed at the top (still full width / centered)

2. To what degree is Queen City a thing? Do people empathize with it? Does it already have a sense of pride that we can take advantage of? I may be out of touch because to me it is more distracting that "Burlington".

   Fostering a vibrant tech community in Burlington by making meetups easier

3. How are we going to scale who we are? Can you show what it would look like with 3 more meetups?

4. The at a glance boxes (interaction design / @benglass ). Minor, but I am imagining the at a glance is default blue, but if you hover over the other boxes it shifts the blue to the hovered box.

5. The design by ThinkUp should be a link (either to a site or email). You should also add Made with ♥ by Ben. Which should also be a link.

6. copy editing (probably not worth touching til we nail down the design)

   1. (we have a lot of caps where maybe we shouldn't) eg. Look at caps in Sharing Knowledge levels up Local Tech Talent compared to the following bullet. I say we generally aim to capitalize first words and proper nouns (unique identity). I work with a lot of people that find this really distracting. If the intent is emphasis lets rely on another cue that will in effect translate to <strong> like bold, small-all caps, etc.

excellent work @AndrewSepic

[AndrewSepic]

Hey @jhoguet Thanks for your sharp feedback. It's a pleasure to work with you! Really. Here's a revised version of the web design.

In response..

1. Yeah, it did feel a bit funny, but without a Nav bar, the usual logo on a white header area seemed just too strange for me, so I tried a few more experimental things. Here's the traditional look, and I feel it works good enough.
2. I really can't speak to 'Queen City', I don't live in Burlington, but I have heard it referred to such and was wondering about the history of that. I think that could decided upon with some further feedback.
3. I had definitely thought a bit about how this would scale and while I've got the ideas for the CSS upstairs, you did make me realize it would also need to be responsive. I'll work up something in Codepen and see if I can get a working model, otherwise I'm happy to look at changing this.
4. I made the 'At a Glance' box slightly different based on the wireframe @benglass provided. My intention was to not have any hover effects (as nothing is really interactive) but simply use the color of that box to highlight the higher than average importance of that area.
5. Totally, I would assume Ben would add in his credit in development. Jon, you went up on my 'cool score' with the heart shape. I tried my best to make a heart shape, but until I get to use HTML (or a full keyboard with numeric keypad) I'll have to use the word 'love'.
6. Yes, this is always a grey area with me and as I work very rarely with others, my implementation is rather spotty in how I decide what gets capitalized (playing with emphasis). I can see a developer's mind could find this very distracting :-)

[benglass]

@AndrewSepic @jhoguet

This looks great! Clean and modern and very easy to digest. Here are some of my thoughts (at least one of which jon already mentioned)

• Is the treatment of Who We Are going to provide challenging if the number of groups expands? Andrew you said you'd look into this Im not sure how we'd achieve this in a responsive way via CSS but I'm not really a css guru.
• Content Note: "Makes Burlington More Attractive" perhaps be more specific "to translants" or something
• Agreed on Burlington vs. Queen City, new comp has a typo though it says "in the Burlington"
• This might just be my opinion but the main tagline Fostering a Vibrant... the white text on the photo I find slightly difficult to read even with the drop shadow.. maybe hardening the drop shadow? Seems better in the new comp with the darker image
• Again, completely opinion-based but I would perhaps harden the drop shadow behind the > bullets. I like the clean vector lines throughout and this is the one area that I feel like doesnt fit with that.

[jhoguet]

Loving this!

Is it worth getting together one night this week to get this the last mile. It seems like we could have hours of back and forth, or in one hour together this could be ready for handoff to Ben.

I'd be up for meeting somewhere, to include food, or we could do a hangout. We could meet at my house if you want an excuse to chill at the beach for a sunset.

You guys let me know what works best for you.

[benglass]

Im willing but my thurs/fri nights are booked this week.

[AndrewSepic]

I could do Wednesday.

[AndrewSepic]

@benglass Thanks for your feedback too. My replies follow

Is the treatment of Who We Are going to provide challenging if the number of groups expands? Andrew you said you'd look into this Im not sure how we'd achieve this in a responsive way via CSS but I'm not really a css guru.

I'm not a guru either, but I was aware that it could be done and I didn't want pull the 'designer' move and stick you with a tough implementation job. I've spent a bit of time on the SASS for this and here's my working models. I haven't done cross browser testing (made using the latest Chrome)

1. Single row model Could accept max of 5 meetups
2. Double row model (6 meetups and more)

This might just be my opinion but the main tagline Fostering a Vibrant... the white text on the photo I find slightly difficult to read even with the drop shadow.. maybe hardening the drop shadow? Seems better in the new comp with the darker image

I can see what you mean. I think it's good enough contrast between the background/title (that's subjective of course), but hardening up the drop shadows could increase it's visibility. This is easiest using CSS as Photoshop doesn't allow for hard shadows.

Again, completely opinion-based but I would perhaps harden the drop shadow behind the > bullets. I like the clean vector lines throughout and this is the one area that I feel like doesnt fit with that.

I agree with you here. And again think this can be attained easiest with CSS.