CityCyclingEdinburgh Forum » Debate!

New test citycycling site up for constructive criticism

(14 posts)
  • Started 12 years ago by Wilmington's Cow
  • Latest reply from chdot

No tags yet.


  1. Wilmington's Cow
    Member

    I've got four of the new homepages up for review and comment. Let's call it design by crowdsourcing. It started as a specific design idea, then came the suggestion of a bike frame background, then suggestions for the pictures I was using, then for the text.... Evolving all the time (and shows I'm perfectly happy to admit I got it wrong along the way!).

    The aims of the new site are to make it visually appealing, obviously, taking a step away from the overly serious - there are plenty of 'urban cool' sites and I can't compete with that. Besides I want it to look welcoming. But also looking at greater accessibility - planning on having text links strategically placed to make 'scrolling' the content easier - while keeping it less cluttered - clean, vibrant and clear.

    The mag pages themselves will be a box on the same background - the background is fixed so shouldn't scroll (looks better on some browsers than others - Safari at home looks great; on the iPad the background still scrolls for some reason; on IE6 it looks fine, but all image links get a box around them).

    Anyway, 'ave a gander and let me know what you think (if you're so minded... :) )

    Posted 12 years ago #

  2. gembo
    Member

    Very quick to click to where you want to go, feels intuitive to navigate. Like.

    Posted 12 years ago #

  3. Baldcyclist
    Member

    Try this to solve your IE problem:

    STOP USING IE!! ;)

    or in the css:

    a img { border-style:none; }

    Posted 12 years ago #

  4. Wilmington's Cow
    Member

    See, I'd actually set the border to '0' and it doesn't show on Safari - I'll pop thet into the code and see if it works.

    And trust me, wouldn't be using IE by choice! :P

    Posted 12 years ago #

  5. Zenfrozt
    Member

    Looks really good, works fine in Chrome though it does scroll. :)
    It does feel friendly and feels more intuitive than the old one.
    My main comment would be that given that it's .citycycling would it make sense to add the . to the crossbar on the bike frame as well?

    Posted 12 years ago #

  6. Baldcyclist
    Member

    Only other comment, where there is content (http://citycycling.co.uk/NewSiteTest/otherstuff.html for example), it would be good if the content didn't scroll right to top of page, and disappeared under the citycycling top tube instead.

    Can't think of exact code off the top of my head (I can look up in you're not sure), but if you create a specific <div> for the main content area, and position that relatively in the css, that should do the trick.

    Otherwise likey.

    Posted 12 years ago #

  7. Nelly
    Member

    Tested on my android phone, site flowed well, clickys worked etc.

    Minor comment, the text colour gets lost on background, presume the text colour / size etc will change on final version?

    Posted 12 years ago #

  8. Tom
    Member

    Looks good. I like the bike frame. You could avoid the content scrolling over the top tube by turning the bike frame background until the top tube is horizontal and putting the main content into a division with a top margin sufficient to drop the content below the image. However your content is centred using a table so there might be an easier way for you (I don't use tables for layout so I can't really help there but you can probably put the table into a div and apply styles to it).

    Posted 12 years ago #

  9. fimm
    Member

    If you look at it in a small window at the bottom of your screen, (because you're at work...) then the bike top tube takes up all the space and you need the text to scroll over that.

    Posted 12 years ago #

  10. lionfish
    Member

    I like the idea. But I'd agree with the others about the colours (black text over the down tube difficult to read).

    Maybe move the tube left? I don't know ... :/

    I wonder what a real bike photo would look like... hmm

    Posted 12 years ago #

  11. kaputnik
    Moderator

    Very minor points, but you did ask someone who likes a bit of design!

    There's a double highlight on the tube sections - you only need one (intuitively the top one as that's where light would naturally be shining from). Currently it suggests to the eye not a tube but something with an "M" profile. You could replace lower one with a lowlight, however not strictly necessary as it's on black. I'd also move the highlight up slightly to avoid too much black area above it. Again to the eye it makes a tube begin to cease looking like a tube. Stay could do with a highlight too just so that it fits with the other tubes. Seat pin could be marginally narrower than seat tube.

    I think only other suggestion would be to lose the canvas texture on the background. In the nicest possible way it makes it look a smidge too much like something from a website created c. 1998 in MS Frontpage Express!

    You might want to make the blue a bit less saturated, which will make the orange stand out even more (it is "your" colour after all!) Actually strictly speaking I don't even think the blue is necessary. It would bring some homogeneity to the page if it matched whatever colour the chainring in the centre is.

    To avoid areas of flat colour looking, well, flat, I could send you some ever-so-subtle granular textures you could put as a watermark on top of them.

    Apart from that it's still the same top-quality CC content, so no need to critique further!

    Posted 12 years ago #

  12. Wilmington's Cow
    Member

    Cheers folks, all good.

    Real bike:
    Have considered that, need a blank/white canvas to shoot against, but got a set up in the garage that would work.

    Blue/canvas texture:
    Yeah, edging towards black n' orange as the corporate colours, and might make it look a bit more balanced. You're the second person to mention the 'old' look of a canvas texture. I think I still want a lack of flatness, and maybe some sort of 'worn' texturing would work (if you've got a watermark for that I'd be happy to have it!).

    Black text on black top tube:
    Going back to html/css school and working out how to have the text disappear 'under' the top tube - this doesn't address the 'reading on a window at the bottom of the screen' issue, which I'll have to have a think about. Sorry fimm, that might be something I think I'm going to have to live with...

    M tube:
    I know, annoying isn't it? Playing around with Photoshop gradients to get that look, and it simply didn't work on the seatstay at all. Was making sure the background + site design worked before working out how to fix that (real bike shot, above, might mean it's not an issue, but still will be if I'm sticking with a 'digital' bike).

    Move the top tube left:
    Delicate balance, want enough of it visible to know exactly what it is, but not so much that it 'dominates' the page. It's really just a framing element.

    Nelly:
    Do you mean the text on the chainring in the screen centre, or text in general? The general text is black on a white background so shouldn't have readbility issues, unless it's doing something funny viewed on Android...

    '.'citycycling:
    D'oh! Can';t believe I forgot the stylistic dot!

    Posted 12 years ago #

  13. wingpig
    Member

    "M tube:"

    You could always pretend you have two different light sources to help define the purported shape of something non-ideally-angled to catch the alleged position of a single light source. Although sticking with lines to show reflection on alleged cylinders you can still thicken/brighten the reflection-line to help indicate cylinder-direction of purported cylinders which are roughly parallel with the pretend beams of light from a single source.

    - - - ----------~~~~------ -

    Gradients produced by gradient tools are sometimes a bit lifeless, unrounded and sometimes dithery - creating nice smooth gradients by heavily-blurring a spot then taking a single-pixel-thick slice of the resultant smoothly-varying tones sometimes work a bit better at pretending to be 3D.

    Posted 12 years ago #

  14. chdot
    Admin

    CCE for all you need to know about Photoshop!!

    Posted 12 years ago #

RSS feed for this topic

Reply

You must log in to post.


Video embedded using Easy Video Embed plugin