Looking for some web design help

Evan
Evan
Admin at AquariumKids.comCalifornia, USAPosts: 3 edited August 2016 in Web Design
Hi all! I just registered on this forum in hopes of getting some web design advice for my website, AquariumKids.com. Any suggestions as to what I should change?

Thanks in advance,
Evan

PS: I'm not sure whether or not this belongs under "Web Design" or under "Help me." Feel free to move this thread if necessary.

Comments

  • calder12
    calder12
    Senior Member Posts: 13,421
    Immediate impression, it's not very kid like. It's rather bland. If you want to attract kids, you have to make it something that kids will be interested in reading and in my 48 year old opinion, it just isn't that.

    Typography is all over the place, different fonts on different pages. No hover effects on links and links aren't obvious. Lose the box surrounding the sidebar, the sidebar elements stand alone fine.

    Look for some more illustrations like the Goldfish one, find some fun fonts (but legible) and brighter colours.
  • Evan
    Evan
    Admin at AquariumKids.com California, USAPosts: 3 edited August 2016
    @Calder12: Hello and thank you so much for helping out!
    calder12 wrote: »
    Immediate impression, it's not very kid like. It's rather bland. If you want to attract kids, you have to make it something that kids will be interested in reading and in my 48 year old opinion, it just isn't that.

    I'm sorry, I should have been clear about this up front. My website is targeted primarily at the parents of kids with fish and at teens with fish, not younger kids. Yes, I do have some content for younger kids (funny music videos, etc), but the website was originally created for an older audience. Google analytics confirms that my main user demographic is people over the age of 18.

    That said, I do understand your point about the website being rather bland and I do need to spruce it up a bit.
    calder12 wrote: »
    Typography is all over the place, different fonts on different pages. No hover effects on links and links aren't obvious. Lose the box surrounding the sidebar, the sidebar elements stand alone fine.

    Right now, I'm only using the fonts "Lora", "Raleway", and "Lato." I believe the commenting system by Disqus is using something else, though. Do you mind sharing a screenshot of some of the fonts you are seeing? I thought I'd fixed it awhile ago, but apparently, they weren't loading for quite a few people for some reason and I'm afraid that this glitch may have reappeared.

    What sort of hover effects would you recommend on the links? Right now, I have the cursor type change while hovering over links. Links are underlined with the exception of header links (see main page).

    I just dropped the box around the sidebar – I agree, that was rather ugly.
    calder12 wrote: »
    Look for some more illustrations like the Goldfish one, find some fun fonts (but legible) and brighter colours.

    The goldfish was drawn by ComiQuarium and I'm absolutely in love with their artwork. They let me use it in my videos. Thank you so much for your feedback – I really appreciate it! - Evan
  • calder12
    calder12
    Senior Member Posts: 13,421
    As to the fonts, your import rule in your CSS definitely isn't working.and even if it were I'd avoid using 4 fonts. Find 2 you really like and use those. I'm not great at picking fonts, but there are a ton of resources on the web for matching them up.

    Lose the @import in the css sheet and just put the following in your head (above your CSS sheet links)
    <link href="https://fonts.googleapis.com/css?family=Lato|Lora|Montserrat|Raleway" rel="stylesheet">
    

    That being said all those fonts are pretty similar, you might want to choose a slab or serif font for the headings, use one of the others for the body. Best I can see at the moment none of those are displaying for me. See images here http://imgur.com/a/nzyH7

    Personally I'd use a background image rather than a solid colour for the header, it might be a bit overdone these days but it looks nicer in my opinion (see header image for an example on that post above)

    Hover effects - the cursor is standard for browsers, it gives very little visual indication and no visual indication until you hover the link. The underline helps but it's not enough (again my opinion). A different colour for the links that changes on hover. A visual effect for images that are linked, an overlay or change of opacity on hover. The links in your footer have nothing happening other than the cursor at all.

    Things like the 3 care sheets at the top can be more visually interesting just with some minor changes. See the after-fish image in the post

    Care Sheets - Lose the paragraph indenting, it looks odd on the web.
    - Break them up with some images.
    - Get rid of the evan [at] silliness. Get rid of spam on your end with filters, don't make it hard for your users to contact you and make the emails and phone numbers links to make it easier for mobile users to use that information.

    Overall - your line lengths are a little much for easy reading. You might want to consider using a larger font or putting the sidebar on all the pages. I'm also not a fan of the comment section, does it get used at all? If not lose it, even if you do keep it lose the big social media stuff, most of the time it's on the screen at the same time as the footer ones. Speaking of which, get those in your header too. Social media is important, burying it in the footer doesn't give it the exposure it deserves. You also may want to consider getting some coloured icons to again brighten things up.
  • calder12
    calder12
    Senior Member Posts: 13,421
    PS. You asked for help, this isn't a slam on the site. Overall your site works and is coded decently. There is nothing obviously broken, it just isn't terribly interesting as it sits. Fish are an absolutely awesome subject that give you tons of options visually. Take advantage of that. Heck talk to those people that let you use their drawings and see if they'd create you some social media icons!
  • Sakshi1
    Sakshi1
    californiaPosts: 2
    Hi..
    In web designing all issues are cleared by sdi team, i have came to kno about the site get connected with them via mail team@sdi.la
    https://softwaredevelopersindia.com/blog/custom-website-development-vs-platforms-for-smbs-the-verdict/

    Hope this will be helpful
  • Evan
    Evan
    Admin at AquariumKids.com California, USAPosts: 3
    calder12 wrote: »
    As to the fonts, your import rule in your CSS definitely isn't working.and even if it were I'd avoid using 4 fonts. Find 2 you really like and use those. I'm not great at picking fonts, but there are a ton of resources on the web for matching them up.

    Lose the @import in the css sheet and just put the following in your head (above your CSS sheet links)
    <link href="https://fonts.googleapis.com/css?family=Lato|Lora|Montserrat|Raleway" rel="stylesheet">
    

    That being said all those fonts are pretty similar, you might want to choose a slab or serif font for the headings, use one of the others for the body. Best I can see at the moment none of those are displaying for me. See images here http://imgur.com/a/nzyH7

    I've changed up the fonts so I am now using Lato as a content font, Roboto Slab for headings, and Montserrat as the header, footer, and menu. I removed the @import and replaced it with the stylesheet reference. Can you check to see if it's loading now?

    calder12 wrote: »
    Personally I'd use a background image rather than a solid colour for the header, it might be a bit overdone these days but it looks nicer in my opinion (see header image for an example on that post above)

    How am I supposed to scale the background image depending on the size of the browser window? I've tried to do it before and it crops weirdly.
    calder12 wrote: »
    Hover effects - the cursor is standard for browsers, it gives very little visual indication and no visual indication until you hover the link. The underline helps but it's not enough (again my opinion). A different colour for the links that changes on hover. A visual effect for images that are linked, an overlay or change of opacity on hover. The links in your footer have nothing happening other than the cursor at all.)

    I've added underline on hover to the article/video links on the front page. Those should already be obviously clickable, though. On pages such as AquariumKids.com/images and AquariumKids.com/recalls, the links are laid out pretty well. As for inline links such as the ones in the goldfish care sheet, I'm not sure what color to make them. What color links would you recommend for a background of #EEFFFF? I'm working on the image effects right now.
    calder12 wrote: »
    Things like the 3 care sheets at the top can be more visually interesting just with some minor changes. See the after-fish image in the post)

    Done!
    calder12 wrote: »
    Care Sheets - Lose the paragraph indenting, it looks odd on the web.
    - Break them up with some images.
    - Get rid of the evan [at] silliness. Get rid of spam on your end with filters, don't make it hard for your users to contact you and make the emails and phone numbers links to make it easier for mobile users to use that information.

    I dropped the paragraph indenting and am in the process of putting images in the care sheets, What do you think of the one on the goldfish care sheet?

    I am considering removing my email address altogether and just linking to my contact form.
    calder12 wrote: »
    Overall - your line lengths are a little much for easy reading. You might want to consider using a larger font or putting the sidebar on all the pages. I'm also not a fan of the comment section, does it get used at all? If not lose it, even if you do keep it lose the big social media stuff, most of the time it's on the screen at the same time as the footer ones. Speaking of which, get those in your header too. Social media is important, burying it in the footer doesn't give it the exposure it deserves. You also may want to consider getting some coloured icons to again brighten things up.

    How are the line heights now that I've switched over to Lato? The comment section does get used, but I recently cleared out the comments on most of the pages for a fresh start. Should I put the social media icons up in the header, or should I have a "connect" link there instead?
    calder12 wrote: »
    PS. You asked for help, this isn't a slam on the site. Overall your site works and is coded decently. There is nothing obviously broken, it just isn't terribly interesting as it sits. Fish are an absolutely awesome subject that give you tons of options visually. Take advantage of that. Heck talk to those people that let you use their drawings and see if they'd create you some social media icons!

    No offense taken at all – thank you so much for your help! It's great to get these suggestions from you and they're really helping me out with my website. I really appreciate it :)
  • LeakySandwich
    LeakySandwich
    edited August 2016
    Lato, Roboto and Monserrat - just pick one and use it for everything in different weights. They are all similar enough to give a feeling that there is incoherence, but not different enough to work together.

    It is usual to select one font for the entire website, or two complimentary fonts, and use them in different weights and sizes to create hierarchy. Have a look here, there is some great information:

    https://www.typewolf.com/guides

    For the top image I would consider going full screen with a title over, take a look here:

    https://css-tricks.com/perfect-full-page-background-image/

    There is lots of interesting information on your site, and with a little bit of work it could be made pretty great.
  • calder12
    calder12
    Senior Member Posts: 13,421
    Your fonts are loading fine now :)

    For the div with the class big-image add the following code, you're going to want a relatively large and detailed image, but one that the text remains legible over top of (there are tricks for making the text more legible too)
    background-image: url('path/to/your/image.jpg');
    background-size: cover;
    background-position: center;
    

    You can fiddle with the background position depending on the image you choose.

    For the link colour that blue in your header would work fine and hover to the darker blue in the main header, personally I'd also make the font weight 400 rather than 300, you seem to have a lot of rules trying to force it to a lighter weight. This one is a tough call since Chrome and every other browser render them differently, it will look bolder in Firefox, but 300 can look broken in Chrome in some fonts (I like lighter weight fonts too)

    The Goldfish care sheet is starting to come together. As you scroll you can see what I meant about them being a rather uninteresting wall of text. The images break it up nicely, keep that up! Line lengths are the issue, not height (was that a typo?) See here: https://prowebtype.com/setting-type/#measure (from a link in the excellent resource LeakySandwich posted)

    Use consistent typography throughout. On the front page you have headings in Lato, on the other pages they're in Roboto Slab. I'd also consider bumping your base font size to 20 (if you do this going to 400 for a weight isn't necessary) it's a much nicer to read size in my opinion.

    Absolutely get those social media icons in the header somewhere. Social interaction would be key for a site like yours, and make sure that you're actually interacting!

    Contact forms are fine, and lots of people rely on them exclusively. Personally I'd rather have the option of just an email, but that's just a personal preference.

    Small note - scrolling through your style sheet I am seeing a lot of !importants and a lot of individual styles that are overriding in weird ways. You want to avoid doing that, I'd suggest doing some reading on CSS specificity and cleaning that up when you have time. It's not critical to the look of the site, it's just going to make your job harder and harder as you add to the site.
Sign In or Register to comment.
© Copyright 2003 - 2016 - DT by Kooc Media / Kooc Market
Web Hosting by Inmotion