1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How do I make my book list layout more visually appealing?

Discussion in 'HTML & Website Design' started by Quicktime, Apr 2, 2017.

  1. #1
    My website lists book, often ranking them 1-10 with a short exposition and mini review.

    However I'm having trouble getting the right color pallet and layout to make it look nice and visually appealing.

    Maybe I need to change the text, position the title differently, have smaller pictures, use a color pallet, maybe make everything smaller.

    I'm really unsure and open to suggestions.

    Here is a picture of my custom theme.
    http://imgur.com/a/YWJMv

    [​IMG]
     
    Quicktime, Apr 2, 2017 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Honestly, so long as what you have is in a legible font and dynamic (non-pixel) font sizes, what's there is fine -- it's BETTER than fine as the focus is on the content, not non some goofy artsy-fartsy bullshit that just sucks down bandwidth for nothing of value.

    If it's "visually appealing" enough for it to be noticed, it's distracting enough to get in the way of what's actually important on the page -- YOUR CONTENT.

    That said I'd consider perhaps slightly larger pictures of the front cover, moving the title down next to the cover image instead of over it... How does your layout concept handle when the screen is too small to have the text next to the image? What's your max-width? How do the fonts and layout handle user preferences? Do you have a retina/HDX plan in place? How's the graceful degradation plan for when CSS blocked/inapplicable?

    Pictures don't really tell us the whole story of what's going on there since a picture is NOT a web design -- no matter how many PSD jockeys have deluded themselves into thinking so...
     
    deathshadow, Apr 3, 2017 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #3
    I always find it easier to concentrate on a review (any text in general) when the image is on the right-hand side:

    aaoKmDC.gif
     
    qwikad.com, Apr 3, 2017 IP
    deathshadow likes this.
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Yeah, images on the right usually feels more natural. I'd write off on that. On the implementation side I'd aslo suggest making the heading and the image links to the buy-now as a redundancy. A LOT of people expect the header to also be a link, and it puts MEANINGFUL text into the buy link since "buy now" doesn't say WHAT's being bought.

    When possible, you should have at least one link saying what the link is for as plaintext, and not just a single lone "buy now" -- also helps with people on screen readers and braille readers -- and as the joke goes: Search Engines don't have eyeballs!
     
    deathshadow, Apr 3, 2017 IP