Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post

    Your valued opinion please

    Hey all,

    I was wondering if you were willing to give your valued opinion on the designs that I made for my personal portfolio. It's not only a web portfolio but also an IT project which is why I'm especially interested in the opinion of my peers. I do not only want to know why you made the choice that you did but also why. In other words please criticize my designs as long as it's not bordering flaming this topic.

    Now these are the two designs, to sum it up which one do you like best and what should I improve (for the one you picked and the one you didn't pick)?

    www.mathewdesigns.com
    www.mathewdesigns.com/new

    Thanks in advance and I really hope I could include some of your opinions in my process blog.

    sincerely
    - Mathew

    PS: mod or admin please move this topic to the site review request section as I didn't notice it earlier. Thank you
    Last edited by mathew edison; 11-06-2008 at 05:50 PM. Reason: Move request

  • #2
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    http://www.mathewdesigns.com/new/.
    I think that it is the best, but to improve:

    1. Change Times new roman to arial or something along those lines
    2.
    2008 Mathew Designs | Legal Note |
    Change the colour of the link, instead of leaving default
    3. http://www.mathewdesigns.com/new/about.html - Put that in a div. It looks ugly the way it is, currently.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • Users who have thanked BabyJack for this post:

    mathew edison (11-06-2008)

  • #3
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post
    Ahhh yes I forgot to mention that these are all base designs and the content shouldn't even receive any attention for the moment. This is merely me trying to put it together in coding so I know how it looks and feels in different browsers. I still have to disable the rollover for IE users for instance as it crashes the browser on every pre IE 7.0 platform which seems to occur on more sites yet seems unsolved (IE's rendering engine is probably the devil behind it)... So to sum that up; please only focus on the design itself and not too much on the miscellaneous content.

  • #4
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    I prefer the concept of you're new design, but have some Glitches I'd like to show you.

    http://img390.imageshack.us/img390/9...eenshotln2.png

    As you can see, the 'Contact Me' button forces itself onto 2 lines of text, which make it look funny; and the text on the about me page is out of place. The 'Contact Me' problem occurs on every page, whereas the text layout problem only happens on the 'About' page.

  • Users who have thanked Millenia for this post:

    mathew edison (11-06-2008)

  • #5
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post

    Thumbs up

    Quote Originally Posted by Millenia View Post
    I prefer the concept of you're new design, but have some Glitches I'd like to show you.

    http://img390.imageshack.us/img390/9...eenshotln2.png

    As you can see, the 'Contact Me' button forces itself onto 2 lines of text, which make it look funny; and the text on the about me page is out of place. The 'Contact Me' problem occurs on every page, whereas the text layout problem only happens on the 'About' page.
    The about page is a known issue and I explained it in the post above yours though your post is very much appreciated as I know that I'll have to lower my font size slightly. May I ask you what resolution you're viewing my site in? Thanks for both of your replies btw

  • #6
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by mathew edison View Post
    The about page is a known issue and I explained it in the post above yours though your post is very much appreciated as I know that I'll have to lower my font size slightly. May I ask you what resolution you're viewing my site in? Thanks for both of your replies btw
    1024 x 768 is my resolution. I know it is low, but there are tonnes of people, even the majority of people that use this resolution or lower.

    Also note that I don't have Windows fonts. So mine might be bigger, you could help people like me by adding lot's of fonts to view you're site in on your CSS. If not our browsers will revert to default.

    I just had a little look at your CSS, and all you're fonts are Windows only by default, could that be the problem?
    Last edited by Millenia; 11-06-2008 at 06:25 PM.

  • #7
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Millenia View Post
    1024 x 768 is my resolution. I know it is low, but there are tonnes of people, even the majority of people that use this resolution or lower.

    Also note that I don't have Windows fonts. So mine might be bigger, you could help people like me by adding lot's of fonts to view you're site in on your CSS. If not our browsers will revert to default.

    I just had a little look at your CSS, and all you're fonts are Windows only by default, could that be the problem?
    That was indeed the problem, I haven't set any other font types yet. Are there any font types that you could recommend for me to include to increase the inter-OS and browser compatibility? It must actually be the fonts as I just lowered my resolution to yours and it seems to display fine

  • #8
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by mathew edison View Post
    That was indeed the problem, I haven't set any other font types yet. Are there any font types that you could recommend for me to include to increase the inter-OS and browser compatibility? It must actually be the fonts as I just lowered my resolution to yours and it seems to display fine
    'Liberation Sans' looks like an OK font for you're site. Try adding it to you're CSS and I'll see if it works.

  • #9
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Or Helvetica
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #10
    Regular Coder
    Join Date
    May 2008
    Location
    Lost in Localhost...
    Posts
    702
    Thanks
    3
    Thanked 43 Times in 42 Posts
    Quote Originally Posted by BabyJack View Post
    Or Helvetica
    He already uses Helvetica in his CSS.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    And Helvetica is licensed and not installed by default on most if any Linux installations.

  • #12
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    I like the first design better myself. I see a lot of black/dark designs and really I don't think they should be for a 'designer'. (Note my website is inverted, with a dark theme. I plan on changing this but I'm also not a designer but a developer) I prefer lighter themes which have good colors. That dark tone works, but for a designer you want to dazzle with color and I think using back backgrounds hurts that objective.

    With that preface, your first design needs less gray tones and to employ some colors. You have a nice header color, but it doesn't carry through the design. What do you think about pulling more color themes down through the design?

    Your header is a fine start, but why is it so small? Create your identity with that header, and make yourself more of a brand. If your header doesn't need as much space, reduce the size. Otherwise it needs something to seem less empty.

    You currently have some empty space on the right column, good. I would let that breathe and have it develop after you make some other adjustments. Leave some room to grow instead of packing it tight.

    Text contrast can be a huge thing for your site. Right now you have the black text on a slightly gray background. What about having your main content with a white background, or perhaps some of it white and a sidebar with another background to separate? The more contrast, the better in most cases.

    I know you worked less with the text itself, but I suggest that you take a look at this:
    http://informationarchitects.jp/the-...graphy-period/
    which is an interesting perspective about typography. A plain site with awesome typography can look great, which brings me to one last point.

    Simplicity is king. I like how the first design is basic, simple, clean. There is the temptation to take a design to the extreme (throwing that color in like I was suggesting), but its the minor changes which make the design take off. Small things, like adjusting the tones of the background slightly, increasing the font size slightly, allowing the font size to change, taking control of the link styles, and so on will make this design very sweet. So one of the problems with taking opinions is you want to know what you can add. I suggest you think about ways that you can refine and define the basics. Sweet graphics work on some sites, but neither of these designs looks like one of those. Keep it simple, keep it solid.

    Of course everything also has to be carefully crafted to make sure it looks fine cross browser (not necessarily the same though!)
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by jeremywilken View Post
    I like the first design better myself...
    I agree, and I had the exact same thought about the top banner. It looks bare as it is. To contrast Jeremy's idea, I wouldn't reduce the height of the header, instead I would increase the size of your logo and accompanying text (the font of the tag line is too small to be comfortably viewable as-is anyway). Infact, you might consider adding your navigation bar into the main header rather than having it as a "sub-header." This would mean changing the colors of your navigation, but I think aesthetically it would be worth it.

    I also notice that your header is centered and does not run the entire width of the page. I have a personal preference for a left-justified header that runs the entire width... I think they look neater. If this breaks your personal design style though feel free to ignore this point.

    Also, your mouseover effects for the navigation buttons work, but the only part that is a clickable link is the actual text. I'd either lose the mouseover effect or else make the whole thing clickable. If you don't have your mouse over an actual selection, the view should not change, ya know?
    Last edited by Rowsdower!; 03-03-2009 at 08:00 PM.

  • #14
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    5
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Rowsdower! View Post
    I agree, and I had the exact same thought about the top banner. It looks bare as it is. To contrast Jeremy's idea, I wouldn't reduce the height of the header, instead I would increase the size of your logo and accompanying text (the font of the tag line is too small to be comfortably viewable as-is anyway). Infact, you might consider adding your navigation bar into the main header rather than having it as a "sub-header." This would mean changing the colors of your navigation, but I think aesthetically it would be worth it.

    I also notice that your header is centered and does not run the entire width of the page. I have a personal preference for a left-justified header that runs the entire width... I think they look neater. If this breaks your personal design style though feel free to ignore this point.

    Also, your mouseover effects for the navigation buttons work, but the only part that is a clickable link is the actual text. I'd either lose the mouseover effect or else make the whole thing clickable. If you don't have your mouse over an actual selection, the view should not change, ya know?
    Thanks that was very useful. I still haven't decided on which design I'll use yet I do know that one of them is going to be available as a template so I appreciate suggestions on both designs equally. Thanks for your input. Owh yea and would moving my anchor tag before the list item tag cause the whole rollover thing to be click-able?

  • #15
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by mathew edison View Post
    ...Owh yea and would moving my anchor tag before the list item tag cause the whole rollover thing to be click-able?
    Nope, I don't believe that would work. To be honest I'm not sure how to do it using <li>. If it were me, I'd use a button like so:

    (PLEASE NOTE THAT I HAVEN'T VALIDATED ANY OF THIS - I recommend you save a backup copy of all of your css and page files just incase)

    --NOTE: this particular example is for your "About Me" link--

    Step 1:
    Create a transparent blank GIF image such as the one attached at the bottom of this post. Place it in your images directory.

    Step 2:

    Place the following into your style sheet:
    Code:
    input.test{
    font-weight: bold;
    background: url("../images/BLANK.gif") no-repeat;
    border: 0px solid;
    width: 110px;
    height: 32px;
    }
    
    input.testhov{
    font-weight: bold;
    background: url("../images/libg.png") no-repeat;
    border: 0px solid;
    width: 110px;
    height: 32px;
    }
    
    input.testactive{
    font-weight: bold;
    background: url("http://mathewdesigns.com/images/libg.png") no-repeat;
    border: 0px solid;
    width: 110px;
    height: 32px;
    }
    Step 3:
    Pop this script into the header:
    Code:
    <script type="text/javascript"><!--   
    function hov(loc,cls) {   
    if(loc.className)   
    loc.className=cls;   
    }
    //-->
    </script>
    Step 4:
    Place this button into the menu. You'll have to reposition your menu items a little since you cannot get the same position/appearance just by directly swapping these buttons with the old links - I'd be tempted to use a table to maintain the old look, but there's probably a better way.
    Code:
    <input type="button" class="test" id="about" value="About Me" onClick="location.href='http://mathewdesigns.com/index.php/about'" onmouseover="this.className='test testhov'" onmouseout="this.className='test'">
    In this example, when coding the "About Me" page be sure to change both instances of "test" in the above code to "testactive" or whatever you have renamed that button class. This will maintain the style you had to make the link to the current page appear already gray (i.e. do this instead of changing the list class).

    Step 5:
    Replace the colored text above ("test," "testhov," "testactive," and "BLANK.gif") with whatever your actual naming convention warrants. Just make sure you replace "test" with the same thing each time and replace "testhov" with another consistent name each time and you should be fine.

    If any of my rambling directions are confusing let me know...

    It may not be the most elegant approach to the problem, but I test drove this on my IE and it works fine. I can't speak for any other browsers as I don't have admin privelages where I am right now.

  • Users who have thanked Rowsdower! for this post:

    mathew edison (11-09-2008)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •