Sketches: BCYC Website

@semmons99 Good improvements and nice type choices. They are really working well. My suggestions:
Homepage

  • The logo is sitting too far up in the right corner for me on my large screen.
  • Instead of gray buttons over the photo try using a rgba value of white for the background color so that some of the blue (or what ever color) of the background gets picked up. Gray tends to be lifeless.
  • Make sure you use the real bold weight of the font. Right now the browser is faking it and it is slightly butchering the font because of it.

Content page

  • More contrast in the navigation. Maybe make the links on the right a little smaller. Maybe make the logo bold. maybe both or something else.
  • More contrast between the titles and the body copy. I think something subtle will work here. Bold the header. Tone down the body copy to a darker gray.
  • Just a little more line-hight in the body copy.
  • I think those links at the bottom need some thought put in to them. The rest of the site is really classy and they seem out of place. Do they really need to be button size?

Howdy @kylefiedler,

I’ve updated both pages. I’m starting to feel more and more that I should ditch the homepage design and use the internal_page design throughout the entire site. Perhaps even turning the future “About” page into the home page with the similar ping-pong effect throughout.

Bearing that in mind, what do you think of these changes? Should I move onto color? I had to change fonts because there wasn’t a bold version of my prefered Serif. I plan on continuing to explore fonts and really find some that speak to me.

@semmons99 I agree that there is a discontinuity between your homepage and the about page. I don’t necessarily think that ditching your homepage design is the right choice. This is a good time to go back to your design brief and see if it might spark something.

Move on to color and start to think how that continuity will work. The only small thing that I noticed is that the navigation should be aligned to the baseline of the logo.

Yeah, that’s due to my terrible CSS skills. I plan on redoing the site with fresh CSS (no zurb) once the course is over so I can really start to better grasp CSS. SASS + Bourbon.

Hi @kylefiedler. Here’s my first stab at color for the site. Bay City Yacht Club

@semmons99 I think blue was the obvious choice. Did you try grabbing a color right from the photos that you have? I’m not a fan of the striping feels like you are trying to put more color in than necessary.

  • It creates less relationship between the individual events.
  • It makes the text in the blue hard to read.
  • It add more emphasis to the event in the white, since the blue fades to the back.

Have you thought of ways that you are going to tie the homepage in with this subpage design?

Hi @kylefiedler. I was feeling a similar pain. The white striped event just looked so much better. What do you think now? I’ve taken the blue from the burgee on the existing site http://www.baycityyachtclub.com.

I still haven’t figured out a good way to tie the homepage to the internal pages yet.

http://bcyc.site44.com

@semmons99 I think it looks a lot better this way. Not sold on having the footer be blue too though. Its distracting. Especially since you don’t have anything in it really. The blue headers now look like links though.

What do you think of doing something similar to your header that you did for the images? Slight 1px border a few pixels away. Might be good to try. The baseline in the navigation is still killing me :smile:

@kylefiedler I removed the footer stripping and centered the “View Past Events” link. My thoughts here are to possibly create a infinite scrolling list of events once this link is clicked.

I think I have the baseline fixed on the header too.

The blue headers were meant to be links that follow the same path as their corresponding “Further Information” links. I’ve gone ahead and wrapped them in href’s now.

I tried a couple different border options for the titles using text-shadow, but nothing really looked good. The typeface got too muddy and became less readable.

Thanks so much for helping me with this. I just might have to take the course again (maybe in person) to really grasp all of this information.

@semmons99 That looks a lot cleaner. One more suggestion, try using the sans serif body font for the main navigation (except for the logo). I think you could get nice contrast between them and the logo that way.

Thanks for taking the course! It was great helping you along with this.

@kylefiedler very nice. Thank you!