← Back to Upcase

Sketches: BCYC Website

(Shane Emmons) #1

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

(Shane Emmons) #2

Here’s another page of sketches I did tonight: http://i.imgur.com/rcz538g.jpg

(Kyle Fiedler) #3

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

(Shane Emmons) #4

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

(Shane Emmons) #5

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

(Kyle Fiedler) #6

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

(Shane Emmons) #7

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

(Shane Emmons) #8

@kylefiedler here’s my first stab at the html: http://bcyc.site44.com/

(Kyle Fiedler) #9

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

(Shane Emmons) #10

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

(Shane Emmons) #11

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


(Kyle Fiedler) #12

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

(Shane Emmons) #13

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

(Shane Emmons) #14

@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. http://bcyc.site44.com

(Kyle Fiedler) #15

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

(Shane Emmons) #16

@kylefiedler checkout http://bcyc.site44.com 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 bit.ly

(Kyle Fiedler) #17

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

(Shane Emmons) #18

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


(Kyle Fiedler) #19

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

(Shane Emmons) #20

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