...

View Full Version : Your valued opinion please



mathew edison
11-06-2008, 05:45 PM
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 :)

BabyJack
11-06-2008, 05:53 PM
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 (http://www.mathewdesigns.com/new/#) | http://www.mathewdesigns.com/new/images/css.png (http://jigsaw.w3.org/css-validator/check/referer) http://www.mathewdesigns.com/new/images/xhtml.png (http://validator.w3.org/check?uri=http%3A%2F%2Fmathewdesigns.com%2Fnew%2F) http://www.mathewdesigns.com/new/images/ci.png (http://www.codeigniter.com/)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.

mathew edison
11-06-2008, 06:12 PM
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.

Millenia
11-06-2008, 06:16 PM
I prefer the concept of you're new design, but have some Glitches I'd like to show you.

http://img390.imageshack.us/img390/900/screenshotln2.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.

mathew edison
11-06-2008, 06:19 PM
I prefer the concept of you're new design, but have some Glitches I'd like to show you.

http://img390.imageshack.us/img390/900/screenshotln2.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? :thumbsup: Thanks for both of your replies btw :D

Millenia
11-06-2008, 06:21 PM
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? :thumbsup: Thanks for both of your replies btw :D

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?

mathew edison
11-06-2008, 06:29 PM
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 :D

Millenia
11-06-2008, 06:39 PM
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 :D

'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.

BabyJack
11-06-2008, 09:26 PM
Or Helvetica

Millenia
11-06-2008, 09:58 PM
Or Helvetica

He already uses Helvetica in his CSS.

Apostropartheid
11-06-2008, 10:00 PM
And Helvetica is licensed and not installed by default on most if any Linux installations.

gnomeontherun
11-06-2008, 10:12 PM
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-web-is-all-about-typography-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!)

Rowsdower!
11-07-2008, 05:19 PM
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?

mathew edison
11-08-2008, 01:39 AM
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?

Rowsdower!
11-09-2008, 12:48 AM
...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:


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:


<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.


<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.

Rowsdower!
11-09-2008, 01:01 AM
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).


On second thought, if you get your buttons to line up with the old text locations you could still change the <li> class and skip the button class change since the transparent background of the original button class would allow any existing <li> background to show through. The mouseover effect will still be present, but it wouldn't be visible unless there was an alignment issue. Not sure how that would work out cross-browser though, so your best bet might still be the button class change. Just something to consider...

mathew edison
11-09-2008, 01:14 AM
I'll be completely honest with you. I prefer not to have any Javascript in my coding as I personally despise the whole Javascript concept. If necessary I will change the whole list item concept into image rollovers yet I prefer to keep the Javascript to a minimum. I'm already using one script which is a PNG hack as PNG hack isn't displayed properly by IE prior to 7.0 (as always) yet it is the best quality transparency supporting image type I know of. You suggestion was however very appreciated and I will most certainly look into alternatives. I'm also open for all your other opinions :D

Rowsdower!
11-09-2008, 01:39 AM
Well I can respect that. Unfortunately, as coding goes this is the only solution I can think of right now.

Which version are you leaning toward anyway? I'd hate to waste time reviewing a template that's on its way to the scrap heap...;)

mathew edison
11-09-2008, 01:41 AM
Well I want to improve both designs anyways because one will be published as a template for others to use and I don't want them to end up with a crappy template either (excuse my language). I'm currently leaning more towards the second design looking at the opinion of my peers yet the first one also seems to have an important key feature which is simplicity. That's the reason I asked your opinions in the first place, to make a choice and to improve both results. xD

Rowsdower!
11-09-2008, 02:41 AM
Sure, nobody likes a lemon!

I don't want any of this to sound nasty, but a long list of negativity might come across that way. Bear with me, but here is what I see that could use improvement in the "new" design:

For starters, I would echo my original sentiments from the old version, which is that I dislike the center alignment. I'd left-justify the page and right-justify your navigation on this one.

I would also suggest that the navigation bar should remain at the same level between pages. As viewed on my screen the navigation on the "About" page appears noticeably higher up than it does on the "Home" page.

If you're going to include the validation check icons you might as well make them large enough to be read (they're pretty minimalist on my screen - I can only actually read the alt text, not the text in the image). Really though, I'd lose these all together as most casual viewers won't even know what those mean.

The menu/navigation would look better if drawn up closer to the MathewDesigns logo (and if the boxes themselves weren't quite so high). I get the impression you are pushing the navigation block farther down the page in order to show off more of the gradient in the background but I don't think that really helps to sell it.

I agree with a previous post that the link color should be changed for the "Legal Note." It doesn't need to stick out like a sore thumb, but you might want to make all of the text at the footer a small-ish, bold, gray font. You should keep the vertical dividers, maybe add a contact link in place of the validation check images.



I suppose that'd be about it for the first impression. The trouble with reviewing either of these right now is that there is no real sample content so it's hard to get an idea of how you will be presenting the meat and potatoes of the site. Once you populate them a bit more and, for example, show us how images will be handled in content rather than in headers and banners we may be able to get into some deeper issues. Is anything in the works for this?

gnomeontherun
11-09-2008, 11:04 AM
As far as pure CSS rollovoers, its possible. You have two choices, just make each of the links an image with a rollover image (then use the :hover state to change it) or I made a method in this thread post #4

http://codingforums.com/showthread.php?t=151001 which needs to be tested further but its a start.

mathew edison
11-09-2008, 11:23 AM
Don't worry about the negativity; It's good to know what you guys think should be improved and it's a learning experience for me :D As for your earlier question regarding the content of the site: yes I am working on that. It's partially database driven so I'd rather have the coding in place first and then worry about the way the text is styled. Obviously the second, or the 'new' design if you'd like, is going to have a blog post structure quit alike the first one. Maybe less distinct but it's going to be there. I will also give the class method a try to see what that comes up with. If anybody feels that a suggestion was left out please tell me. Oh and would some of you mind if I put your suggestion in my project's progress journal because as I mentioned this is also an IT project and I have to keep a progress journal.

mathew edison
12-16-2008, 09:09 AM
I just wanted to thank you for your opinions. I handed in the project and I will continue to improve it as I use it as my own portfolio. The eventual result can be viewed here: www.mathewdesigns.com

I'm reasonably proud of the result. It even has a log in and everything. Anyways thanks for your opinions. Even though I haven't managed to add every improvement due to lack of time I will add some of your suggestions at a later time. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum