search

burlingtoncode / burlingtoncode.org

the website for burlington code
MIT License
1 stars 1 forks source link

Sponsor Landing Page: Design Comp #4

Open benglass opened 8 years ago

benglass commented 8 years ago

Wireframes: #3

AndrewSepic commented 8 years ago

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.

burlington-code-webdesign1 burlington-code-webdesign2

AndrewSepic commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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 :-)

burlington-code-webdesign2-rev1

benglass commented 8 years ago

@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)

jhoguet commented 8 years ago

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 commented 8 years ago

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

AndrewSepic commented 8 years ago

I could do Wednesday.

AndrewSepic commented 8 years ago

@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.

jhoguet commented 8 years ago

Tonight at 6 works for me. Does it still work for both of you?

Do you want to meet at Dealer.com?

My place in colchester ?

Somewhere else?

AndrewSepic commented 8 years ago

I'm still good. I'm flexible as to where we meet as well. I'll likely be downtown this afternoon for a cafe work shift, so Dealer is fine but Colchester is beautiful... so let's see what works best for Ben.

benglass commented 8 years ago

I have my dog with me today so it would have to be somewhere dog friendly.

We can meet here at VDW just down the street from dealer (7 kilburn street, citizen cider building) if that works for you guys.

On Wed, May 25, 2016 at 9:46 AM, Andrew notifications@github.com wrote:

I'm still good. I'm flexible as to where we meet as well. I'll likely be downtown this afternoon for a cafe work shift, so Dealer is fine but Colchester is beautiful... so let's see what works best for Ben.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/burlingtoncode/burlingtoncode.org/issues/4#issuecomment-221580724

jhoguet commented 8 years ago

Works for me - see you guys at 6 at VDW

On Wed, May 25, 2016 at 11:07 AM Ben Glassman notifications@github.com wrote:

I have my dog with me today so it would have to be somewhere dog friendly.

We can meet here at VDW just down the street from dealer (7 kilburn street, citizen cider building) if that works for you guys.

On Wed, May 25, 2016 at 9:46 AM, Andrew notifications@github.com wrote:

I'm still good. I'm flexible as to where we meet as well. I'll likely be downtown this afternoon for a cafe work shift, so Dealer is fine but Colchester is beautiful... so let's see what works best for Ben.

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub < https://github.com/burlingtoncode/burlingtoncode.org/issues/4#issuecomment-221580724

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/burlingtoncode/burlingtoncode.org/issues/4#issuecomment-221605661

benglass commented 8 years ago

Meeting Notes 5/25

AndrewSepic commented 8 years ago

Fixed up & Schnazzy - http://codepen.io/AndrewSepic/pen/pbzzXG?editors=1100

If you are really careful, you might be able to find a 1px discrepancy at a very particular screen size. but other than that. I think it's #slick.

benglass commented 8 years ago

@AndrewSepic Awesome! Im not seeing any of the discrepancies I was seeing before, although in Chrome I am seeing a 1px gap below the blue vertical line leading from Who We Are to the horizontal line. See screenshot: https://i.imgur.com/OHhCSdu.png

It looks like changing the top: 38px to top: 39px on line 23 of the css fixes it on my screen but i think the issue is probably relying on exact pixel values for a height that is related to typography? It looks like explicitly setting the line height to something like 1em for the h2 line height and 0.5em for the border and using 1.5em for the top fixes the issue perhaps in a way that would work without needing specific pixel values? Example: http://codepen.io/anon/pen/GqgbMr?editors=1100

Here is a screenshot of one of the 'style guide' pages we have done on a recent project. Generally these contain any basic typography styles plus any unique UI components to the project such as buttons, dialog boxes, etc. and serve as a living component library for the project. These are delivered as PSD files but one of the first things our devs do is to create an HTML page containing these elements and style them up. This screenshot is actually of a styled page not the PSD document https://i.imgur.com/Ku7k4pt.png

AndrewSepic commented 8 years ago

@benglass I don't see the 1px gap on my system (Yosemite & The latest Chrome), but I think you are likely right about px values vs rem/em. I've tried to keep them distinct, but I'll leave it to you to make any mods you feel is best practice as you implement it.

I've uploaded the the style guide to the 'Design Assets' folder as well as pngs for the sponsor logos. Let me know if anything else is missing. I believe you should be good to roll.

jhoguet commented 8 years ago

@benglass I added GA to the coming soon page, feel free to port that into your html when you're ready.

https://github.com/burlingtoncode/burlingtoncode.org/commit/281c25c6cb0dd03663b48c413cf054fbac266171

jhoguet commented 8 years ago

I think we should hold off on stickers... we made a promise to the user groups that we wouldn't try and compete with their own branding. I think a time will come but I don't think now is the time.

jhoguet commented 8 years ago

re: embedded... I proved that we can embed the donor box form...you can see it here (https://burlingtoncode.org/)

There isn't an obvious hook to know when the donation is complete (from what I can tell) making the value of embedding less valuable from my point of view.

For now lets stay the course of navigating to donor box (not embedded) and we can always make it better through embedding later.

jhoguet commented 8 years ago

re: what donor box url to we navigate to, lets send them to https://donorbox.org/burlington-code-2016

I had intended to create a dedicated campaign for better tracking but right now I don't think that is worth it.

zevaverbach commented 8 years ago

@AndrewSepic I'm going to take a crack at html-ing up your most recent design in this thread, aiming for a first draft by the end of next week.

Two questions: Do you mind if I omit the drop shadow on the "Fostering a vibrant..." text?

2) The "who we are" graphic: It doesn't feel like there's any room to grow there. Would you mind if I did more of a 2x2 grid layout of the group names? I don't need a mockup, but of course it would be handy..

AndrewSepic commented 8 years ago

Hey @zevav Nice to see there's some movement on this project.

1) Yes, no problem about removing the drop shadow on the Hero message text.

2) The who we are graphic is actually a bit of dynamic HTML/SASS that has plenty of room to grow. I posted the markup for this to be implemented above in a code pen snippet on May 20th. Posting here again.. http://codepen.io/AndrewSepic/pen/pbzzXG?editors=1100 It's responsive and pretty darn accurate in all the browsers I have tested it in.

zevaverbach commented 8 years ago

@AndrewSepic cool, thanks. I tried the codepen, and uncommenting Burlington Meteor makes it look a lot like it's the child of Burlington Python. Sorry to push back, but is there another option? A borderless grid of circles, for example.

AndrewSepic commented 8 years ago

@zevav That's because you need to change the one variable listed at the top of the SASS file which sets column width. I didn't think this was too much hassle. This could be dynamically determined with JS, but I didn't take that step.

I can't visualize your 'borderless grid of circles' completely, but I'm guessing they would not have the tree diagram connecting lines?

zevaverbach commented 8 years ago

@AndrewSepic hm, i tried setting $col to 20%, but then this happens. (Chrome for Mac)

screen shot 2016-10-13 at 1 36 20 pm screen shot 2016-10-13 at 1 36 16 pm

That said, the design is growing on me. What's the plan for when we exceed 4-5 groups?

zevaverbach commented 8 years ago

@AndrewSepic oops, hadn't changed the Meteor div to .last, which fixes the first alignment problem, but "who we are" is still misaligned once there's five divs inside of .colwrap.

zevaverbach commented 8 years ago

@AndrewSepic i should really read all your code before writing anything, sorry: I see .secondrow now... trying it.

zevaverbach commented 8 years ago

@AndrewSepic ok, i got a little further with it. Am I doing this wrong? Still having trouble when I add groups. http://codepen.io/zevav/pen/ozyAAE

The connecting light blue line is thinner for the second row, and the "who we are" stem is misaligned.

zevaverbach commented 8 years ago

I guess my concern is that this "who we are" isn't easy to maintain, and it seems to only be partially responsive.

AndrewSepic commented 8 years ago

Hey @zevav I understand the confusion. There was a few tweaks needed for two levels and I had completed them in another pen and had a few versions kicking around as I refined things. I changed two lines in the CSS in the version you forked and you have this working version now http://codepen.io/AndrewSepic/pen/JRBvqa Second row has the same width lead-in lines and they all line up nicely on small screens. You can't control the lead-in lines of the items to match the stem of the 'Who We Are' title, they are completely independent.

All said and done, if you want simpler solution without the unique design aspect, then it's your call. If you throw together some markup I can do a bit of pretty CSS if you'd like.

zevaverbach commented 8 years ago

@AndrewSepic the logo SVG isn't displaying quite right: opening it in Chrome or Mac Preview, the words are skewed toward the left a bit and the closing curly brace is cut off. Can you confirm this, and possibly provide a revised SVG?

zevaverbach commented 8 years ago

@AndrewSepic never mind! false alarm, hadn't installed the font.

AndrewSepic commented 8 years ago

@zevav Awesome. Looking forward to seeing it come alive.

zevaverbach commented 8 years ago

update: I'm on vacation, and am aiming to have something by next Fri (11/4/16).

jhoguet commented 8 years ago

👍