Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Personal Rebrand - New Website

Discussion in 'Website Design Critique:' started by Owenjones, Aug 24, 2009.

  1. Owenjones

    Owenjones Member

    Hi all, been away from DF for a while, absolutely hectic in my world at the moment!!

    I've been working hard on my new website, would be interested to hear your thoughts. I'm very pleased with the result and have also produced new business cards to continue the professional new look.

    New website here
     
  2. tbwcf

    tbwcf Active Member

    Hi Owen,

    I think you've gone too wide with the site, most ppl are going to get scroll bars appearing with that, even ppl with bigger screens (including myself) don't tend to browse "full screen". The code looks a bit heavy on the div front, looks like you've used extra divs where you should have unordered lists / list items ( <ul> <li> </li> <li> </li> <li> </li> </ul> )

    I think rollovers on the links would help, particuarily on the images either a border on hover or change in opacity?

    Other than that the design/layout is nice enough and you've got some nice work on there!

    Hope that helps
     
  3. Xenonsoft

    Xenonsoft Active Member

    The site looks cool Owen, although agree with the above that it's possibly a little risky going with a wide layout. As long as you know your target audience.
     
  4. blimey thats a wide site.. what width did you set there Owen? On my small monitor it doesnt fit :(

    nice design though :)
     
  5. Owenjones

    Owenjones Member

    Cheers fellas, yeah it's a little wider than I'd hoped. In all honesty, I'm a print designer with a big screen and didn't give enough consideration to people with smaller screens, which I guess is a big oversight. I briefly looked at figures and saw lots of people had large enough screens but maybe not enough...

    I designed the site and a friend programmed it as I have no idea about coding! I may take out one of the 'selected work' images and narrow it to 1024 max, I think it's currently 1240 or so.

    Anyway, thanks for the feedback and I'll see what I can do!
     
  6. Levi

    Levi Moderator Staff Member

    too wide, it just seems out of place even on my 20" display.
    Also if the apple imac was taken from apple then you may not be able to use it on your site as they have a no commercial use in their t&c's
     
  7. Aarlev

    Aarlev Member

    Hi Owen,

    Love the design and your work is superb, but as everyone else has mentioned, it's too wide. You get horizontal scollbars even in 1280x960.

    The layout also breaks a bit in IE7. The dotted bottom border moves on top of your 'selected works'.

    Cheers,
    Soren
     
  8. Xenonsoft

    Xenonsoft Active Member

    Just had a look at your work Owen and I really like it. I had a look at a few pieces and liked them all, especially the bereavement identity.

    Just a thought, with your retouches you could use a hover state for the before and after, would really bring out the changes. Just an idea :up:
     
  9. Music To The Eyes

    Music To The Eyes Senior Member

    Absolutely love your work and website Owen! It's doesn't look too wide to me, but it seems I'm in the minority!
     
  10. glenwheeler

    glenwheeler Senior Member

    Nice site buddy. Could'nt see the scroller as I use hi res but I really like it its great
     
  11. br3n

    br3n Senior Member

    Site is perfect for me on 1280*1024 although it does need to go in the washing machine on a hot cycle for those on laptops/smaller screns. That aside, the work is superb I clicked every link I could find on the site, even your CV! Some really clever inspirational peices. Good luck and hope to see you on here more!
     
  12. Owenjones

    Owenjones Member

    Cheers all, some really nice comments!

    Working with my programmer tonight so hoping to be able to post a more skinny version tomorrow!
     
  13. Jazajay

    Jazajay Active Member

    Hay Owen,
    Just some thoughts the site to me takes a while to load on a unprimed cache and the thing that grabs my attention first is not your logo but the free download pic, in fact your logo was 1 of the last things I noticed TBH.

    Also from a usability point of view your logo and tag line are on different sides of the page?
    Not sure I have ever seen another design where that happens TBH as your site name should be seen so as to maximise ppls memories of the site and when they first see it they read the tag line which clarify's, via text and the site design what you do more clearly.
    There are lots of examples but the 1 that's always sticks out the best for me of a prime example of following this convention is css3.info. Easy to remember and the tag line really clarify's what the site is about.

    Colour scheme I really Iike I think you have got it pretty spot on TBH.

    The selected works to me take way too long to load after they are clicked, image too big, js to large, not sure TBH but I would get it to load faster, try pre-loading the thumbnails to see if that solves it.

    The bottom half, I'm not sure to me it just doesn't feel like a home page, I've been looking at the theory to home page design a lot recently and this I don't know just doesn't feel right to me. The whole Mac showing your site, yeah I don't get it it just adds a massive image and a extra http response to the page, and it's just showing your home page, so....If it's to try to show what you can do wouldn't an offer in their be better, or something jumping out of the screen, that way you are clarifying you talents to future clients in a better way you know.

    Code wise:
    I would move all this to 1 JavaScript file, if that is used mainly through out the site, if 1 JavaScript file is only used on the home page then split it into 2 files.

    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery-ui.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){

    $('#bloglinkimg').attr('src','img/blog2.png');
    $('#cvlinkimg').attr('src','img/cv2.png');
    $('#bloglinkimg').attr('src','img/blog1.png');
    $('#cvlinkimg').attr('src','img/cv1.png');

    $('#bloglinkimg').hover(function(){
    $('#bloglinkimg').attr('src','img/blog2.png');
    },function(){
    $('#bloglinkimg').attr('src','img/blog1.png');
    });
    $('#cvlinkimg').hover(function(){
    $('#cvlinkimg').attr('src','img/cv2.png');
    },function(){
    $('#cvlinkimg').attr('src','img/cv1.png');
    });

    $('#abalogo').animate({width: '179px', height: '91px'},1000);
    $('#navleft').click(function(){
    $('.swcell, .nav').animate({left: '-2000px'},500,'swing',function(){
    $('.swcell, .nav').animate({left: '0px'},500,'swing');
    });
    });
    $('#navright').click(function(){
    $('.swcell, .nav').animate({left: '2000px'},500,'swing',function(){
    $('.swcell, .nav').animate({left: '0px'},500,'swing');
    });
    });
    $('#columnleft').load('http://www.artboyart.com/wp/?mode=one');
    $('#columnright').load('http://www.artboyart.com/wp/?mode=latest');
    $('#swloader').load('http://www.artboyart.com/wp/?cat=24&skip=0'); $('#wallpapers').slideDown();
    $('#wallpapers').click(function(){
    $('#wallpapers, #banner').slideUp('normal',function(){
    $('#downloads').slideDown();
    $('#columnleft').load('downloads.php?dl=appletree');
    });
    });
    $('#downloadstitle a').click(function(){
    $('#downloads').slideUp('normal',function(){
    $('#wallpapers, #banner').slideDown();
    });
    });
    $('#wallpapersbox .wpcell').click(function(){
    wpid = $(this).attr('wallpaperid');
    $('#columnleft').load('downloads.php?dl='+wpid);
    });
    });
    </script>


    By doing so you will improve your page performance due to the server not having a bottle neck in the http headers it gets, as JavaScript files can really slow down the download time due to the fact they can change the layout browsers will stop downloading other files, this is changing but IE7, IE6 and most of the others still will be slowed down by it.

    But it also allows the in-line code to be cached which will speed up future page loads of any page using that file.

    Change your html tag from:
    <html xmlns="http://www.w3.org/1999/xhtml">
    to ~
    <html xmlns="http://www.w3.org/1999/xhtml" "lang="en" dir="ltr">


    As those 2 attributes tell user agents that the page is in English and that the text is read from left to right.

    Move the title element to above your CSS and JavaScript files, that's just the normal convention of where that element goes, probably wont cause you any problems, but as that tag has major SEO benefits. It's like top athletes changing their "lucky" underwear before a game, they just don't you know, I know mad but all the top SEO's I know just don't move it you know and if I was brought in to improve that site's ranking that would be the first thing I change. :D

    But change your title element to ~
    <title>Owen Jones, Graphic design based in Plymouth</title>

    That way if some1 searches for Graphic design based in Plymouth your title element matches exactly, and they are more likely to search for that than graphic design Plymouth, and even if they do you've now covered both anyway.

    A lot of your images don't have ALT attributes check out my thread on accessible web coding section 3 post 9 for why that is bad.

    Also all your text, and new work as far as I can see is invisible to the search engines, why not place it on the home page?????

    Without indexable text how can the search engines know how to rank your page correctly.

    This is what the search engines see our your home page ~
    Owen Jones, Graphic Design, Plymouth

    Yeah mate you are going to get no rankings with that, AJAX is good only if in helps the page, not if it is the page sorry....

    Also thats probably why it's taking the thumbnails so long to load, as in it has to wait for the AJAX query first before it can load the images, placing them in the actual code will make it like instantaneous and really help the page.

    Apart from that you have a lot of divitus, basically lots of div, cutting out the serious bloat and using correct elements with improve your page performance by reducing your page size and also make maintenance easier.

    Create a robots.txt file and upload it to your root directory.
    In their place the following rules ~

    User-agent: *
    Disallow: jquery-ui.js
    Disallow: jquery.js
    Disallow: /img/


    As that will tell all search engines not to both indexing your img directory, or your 2 JavaScript files. Which will not only spread your equity further but also speed up search engines indexing time of your site. Plus if you look at your logs the amount of 404 errors that are generated will drop dramatically as the search engines always look for that file, if it's not present the server generates a 404 not found error which is then logged.

    Anyway only looked at your home page but I hope it helps, which it will. :angel:

    Jaz

    Key:
    Blue ~ XHTML
    Green ~ Robots.txt file rules
     
  14. Xenonsoft

    Xenonsoft Active Member

    Now that's a post :D
     
  15. Kevin

    Kevin Senior Member

    That should get its own friggin' forum :eek:
     
  16. br3n

    br3n Senior Member

    hes baaaaaaaacccccccckkkkkkk :D
     
  17. tim

    tim Senior Member

    i agree.

    defo the logo needs to be eye catching first.

    and YEEESS HE IS BACK!
     
  18. thats a monster post Jaz :D
     
  19. KatyCowan

    KatyCowan New Member

    Really love it. It's simple but has that design edge. Something that is often so difficult to achieve in a website.

    I always think design-focussed websites never work so yours really hits the mark. :D
     
  20. KatyCowan

    KatyCowan New Member

    PS. I would make the logo more prominent however. I think it needs to be more dominant on the page.
     

Share This Page