Sketches: BCYC Website

Hey @kylefiedler, here’s my stab at rough sketches for this week. I’m not entirely sure I like any of them enough yet to take them to the next sketching step. Are there any that you like? Do you have some suggestions for places I could go to see lots of different site ideas to draw inspiration from?


PS - It’s telling me “Sorry, new users can’t put images in posts.”, along with “Sorry, new users can only put 2 links in a post.” So I’ve just linked to an imgur album.

Original Design Brief below…
Design Brief

Here’s another page of sketches I did tonight:

@semmons99 These are great! Is there a direction that you are liking more than the others?

@kylefiedler These are my favorites. With the second being my leading contender.

@kylefiedler didn’t hear back, so I went ahead and sketched my two favorites a little bigger. Should I do an HTML version now?

@semmons99 Yea start building it. Since your design relies so heavily on a photo I would start looking for one that fits your needs first.

@kylefiedler is there any value in trying to do some design sketches on the non-frontpages at this point?

@kylefiedler here’s my first stab at the html:

@semmons99 Thats a good start. The only thing that seems out of place is the members dropdown. I know it is flush right with the button but visually it doesn’t seem like it is. At least it doesn’t seem like it is to me.

I assume that you haven’t gotten to the type video just yet but for the headline I think you could tighten the line-height and letter-spacing (-1 or 2px should do it).

I think since this page is so simple it might make sense for you to start sketching an inside page and building that right behind this.

@kylefiedler I wasn’t thrilled with the members dropdown either. I’ll experiment with moving it around and try my hand at an inside page before I start hitting the typography.

@kylefiedler here’s my favorite sketch for an internal page. I’d like to try and keep the ping-pong theme throughout.


@semmons99 Looks good to me. I’m assuming from your first set that you did a bunch more sketchs? One thing to make sure you want to try to keep consistant is your grid. So your homepage should be sitting on a 3 column grid too (thats what this sketch looks like).

@kylefiedler good point. My homepage was sitting on a 4 column grid. I’ll work on updating it as I like the 3 column grid for internal pages better.

@kylefiedler I couldn’t come up with a frontpage layout I liked that used four columns, so instead I went back to the sketch pad and came up with an internal page layout that uses four columns. What do you think?

I also updated the frontpage HTML and moved the members link around. I’m still not really happy with it, but it seems to be the best solution at the moment.

@semmons99 I say start building it. It seems like you have a good idea how you want to lay your information out you just need to fit it into your grid. Try and use as real copy as possible even if its a really really rough draft. You might get a better idea how things will flow in the browser.

@kylefiedler checkout You can click the “Activities” button to see my internal page. I’d love to hear your thoughts before I tackle typography.

On a side note, the forum always barks at me when trying to upload pictures, or post links to sites like imgur or

@semmons99 I think that this is a good start. The navigation are can use the most a mount of work. its bumping right up into the top of the browser give it some breathing room. Since most of your content is aligned left and right the center alignment for the navigation and title feel off. One or both of them need to fit into the grid. One last thing is the further info button for the top item is too close to the bottom image. They look like they are related.

@kylefiedler I’ve worked hard to try and make the internal page more pleasing, please take a look. I also started working on the typography, though I’m not sold on Verdana yet.

@semmons99 Layout is much better. I think you can focus now on the type. One thing I will say about it now is that I would avoid using justified paragraph styles. The short version for the reason why is because it add more space to each space making the reading experience inconsistent.

@kylefiedler I’ve made some tweaks to the type. What do you think?