View Full Version : Personal site for review / Inspiration needed
03-20-2009, 04:31 PM
As my old site was filled with things I never used anyways I decided to come up with a whole new design and site which reflects 'me' more.
The design is intended to be simple but nice. I have tried to archieve this by hiding the menu making more space for simplicity and content.
The site is going to be my personal site where I will show off my photography and whatever else I find interesting.
I tried to make the design kinda "grunge" and underground-like as that's the culture and environment I like to be in.
So, I would like to hear what you think about the design, or if you guys have any ideas to make it more complete? I really can't decide if I like the upper part - something's missing?
Also, I would like to hear your oppinion on the menu and it's hoover effect. Loading time?
I look forward to your oppinions. So far tested in IE7 and FF3.
(Links are still out of function, not to be used)
03-20-2009, 05:04 PM
03-20-2009, 05:13 PM
Hehe, I knew that comment would show up ;)
03-20-2009, 05:14 PM
Overall, I like the look and feel. DC-9/MD-80 in the header, innit?
- As mentioned, nice quasi-industrial look and feel.
Could be improved:
- As Art mentioned, people with JS turned off are SOL when it comes to the navigation.
- The blurring on hover of the menu button violates one of my cardinal rules (http://webdesignfromscratch.com/mouseovers.php) when it comes to website interactivity: Make the element more clear, more visible when you're on it, not less. It just seems really counterintuitive when you've identified an area of interest on the page by mousing over it and then it becomes "less interesting" in response by fading out or blurring. Your site navigation, on the other hand, is brilliant: B&W until moused over, then becomes colored. That's the right direction, IMHO.
03-20-2009, 05:21 PM
As I'm kinda an airplane geek / Privat Pilot Trainee too, yes it is :)
However, try to refresh the page and a new header image will show up.
Thank you for your suggestions. I see your point, actually my solution seems pretty ridiculous now :D Do you have any ideas which might be used instead? I'm pretty low on inspiration atm.. :rolleyes:
03-20-2009, 05:29 PM
Again your header adds some beauty to your entire layout. So you could add a background image to your header as a default content, for the one who have no ..... :). That's what we call a progressive enhancement (http://en.wikipedia.org/wiki/Progressive_Enhancement) approach.
Also, from the seo point of view, adding an <h1> tag or replacing your current div#header with and h1#header would increase your site's semantic value (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html)
(Just inspect your site with firefox=>web developer tool bar (https://addons.mozilla.org/en-US/firefox/addon/60)=>Information=>View document outline)
03-20-2009, 06:42 PM
As I'm kinda an airplane geek / Private Pilot Trainee too
Awesome! :thumbsup: I'm an airplane buff from way back. Got my PPL in April 2006 but don't do much/any flying nowadays. :( Have you soloed yet?
However, try to refresh the page and a new header image will show up.
Very cool. I like all the images--very much in keeping with the theme of your site.
Do you have any ideas which might be used instead?
Well, you yourself have a great method already developed: Making the icons B&W until hovered over, then making them colored. Your navigation menu isn't unattractive, either, so why not just bring it "out into the open," avoid the JS inaccessibility issue and find someplace for it on your page proper, without the "menu" button? My first impulse would be to try it to the right of the header area. In other words, narrow your header area by 100-150 pixels, align it left and put a verticalized version of your nav menu in the space to the right. And just keep the B&W/color graphic functionality.
03-20-2009, 09:40 PM
Abduraooft: Ahh. Good ideas, and thank you for the links. I already have Web Developer installed, I just didn't know about that function - I see what you mean :)
Msuffern: Yay, another pilot! How come?
Unfortunately I havn't really started the practical flying yet - I have only just finished the theoretical stuff, though I have had 1,5hour or so in the air so far. But I plan to start very soon, my instructor just needs to renew his permission to fly.
Thank you - I plan to add more different when the site goes online!
Yup, I get your point. However, as mentioned I'm going for the 'clean' design and therefore want to keep it as 'simple as possible'. But thanks for the suggestion anyways :)
I just need to figure something cool out for the hoover!
03-20-2009, 09:58 PM
Re: the menu button, why not just figure out a way to color it on rollover instead of blurring it? It would preserve the same kind of "feel" between clicking the button and then interacting with the nav buttons once the menu pops appears.
another pilot! How come?
How come I'm a pilot or how come I don't fly as much any more? :) I don't fly because it doesn't fit into our family budget at the moment. To really stay current (read: safe) I estimate I'd need to fly an hour a week, and at ~$100/hr for a 172 (http://en.wikipedia.org/wiki/Cessna_172), that's not something we can afford right now. Soon, though, maybe... As for the first thing, I was training to become a missionary pilot, and, well, family happened. :D
Good luck with your training! Let me know when you solo. :)
03-20-2009, 10:34 PM
Yeah, I did that on first try, but thought I would make something more 'fancy', lol - I'll try to figure something out :D
Why you don't fly much anymore :) Oh, I see. I guess I did a good decission on getting my PPL already now, when I still have no family to take care of! I wish it only costed 100$ over here - we have tonnes of environment taxes, landing fees and stuff like that, so an hour in a PA-28 (if you have a part in it) is approx 145$/hr..and then come landing fees :rolleyes:
Thank you, and sure I will!
with referecne to your js menu - you could do that pretty much identically with plain old css. (except it wil not stay on screen without hovering on it).
look up 'suckerfish' menu or 'Son of Suckerfish'
The css can tell the menu word to show (as an image) and the main menu part, not to show unless you hover the word menu. just as it is now but without the necessity to have js enabled.
03-23-2009, 09:09 PM
Anyways, I like to have something to think about, maybe I'll change it some day. But for now I'll keep it.
New update on the site: Reworked header + added a close-button to the menu. Criticism?
03-23-2009, 09:34 PM
I'm telling you, man, the blur on the menu button kills it for me. The pop-up menu looks good, wanting to stick with the JS, fine, but nothing else on your site blurs, and the aforementioned (http://codingforums.com/showpost.php?p=795930&postcount=4) counterintuitive action of the button. Everything else on your site is crisp and fine and sharp (albeit "distressed") and then mousing over the menu button gives me this mushy blur...
Other than that it's awesome. :D
By the way: I dunno if you're using any transparent PNGs, but if IE6 support is important to you, you might want to check those as well.
03-23-2009, 09:41 PM
Why is your header a Flash movie? That's particularly long winded for what you're trying to do--images and the PHP rand() function will do fine.
03-23-2009, 09:57 PM
msuffern, Oh man, SORRY ! That must be the most important thing I forgot! Don't expect it to stay that way too long, tomorrow I'll get rid of it!! :D:thumbsup:
All my previous designs have been with IE6 support - but this time, after long considerations, I've decided to go for IE7+ support.
Thanks for your fine words :)
CyanLight: Well, good question. At the time I made it (with help from here), I guess it was the only solution I could think of. And now you mention it, I would be happy to get rid of it actually. For one thing it does not accept z-index which kinda messes up my ideas a little.
Currently the flash loads data from a .xml file which is automaticly generated. Is there a way to do that with the function you mention?
03-24-2009, 07:42 AM
Currently the flash loads data from a .xml file which is automaticly generated. Is there a way to do that with the function you mention? Just do a search on this forum, you'll get many results, like
03-24-2009, 10:11 AM
Thanks, abduraooft, I hadn't realised it was that easy to do with PHP!
It is now changed! (on localhost for now)
04-03-2009, 03:12 PM
The design has now been updated. Major changes are:
A dynamic 'date' function has been added along with a non-flash solution for the banner - I would really like comments on the new header and the "date function". Also, a 'close' button has been added to the menu (still js, I know).
The menu-button has gotten a new mouse-over effect - I would like your oppinion on that one as well.
And thank you all a lot for comments and ideas so far !
04-03-2009, 09:53 PM
Looking good! :thumbsup: A few designerly thoughts:
- Consider putting the sticky note on the opposite side of the banner from the logotype. That would give you more visual balance. As it is both the sticky note and the word "Behrentzs" are clumped together on one side.
- There's a rather large gap between the top of the browser window and the top of the banner. I would try to make the gap less, only 25px or so instead of 50ish, which is what it looks like presently. After the page loads I scroll down the page about 1cm, which is where I feel like the site should sit in the window.
- I know I sound like a broken record, but adding an outer glow to the menu button on rollover gives it a measure of the blurry effect it had before, and... we're back where we were. :D I love the black&white/colored rollover effect on the four actual menu buttons. Have you tried fading the menu button, and just giving it some color and restoring its opacity when you rollover it?
04-04-2009, 06:48 PM
1: Good idea. The thing is that the word "Behrentzs" appear on different places on the different header images... but I think I'll make it static and follow your suggestion!
2: I had not noticed that as it may look different in other resulutions that mine - good point! :thumbsup:
3: Hehe ;) I'll try to experiment with it - I see your point!
Thank you for keep sticking with this never ending project.. :rolleyes::D:thumbsup:
04-05-2009, 03:05 AM
This is one of the best sites in the review section. Great job!
I don't like the pop-up menu. Perhaps make a menu with the garages?
Also, change the content font (Helvetica). Add more padding (~50px).
Get rid of the Valid CSS/HTML bars. Make the footer blend into the content more - no one cares about copyright.
Finish your grunges - they seem to just stop which makes then look blocky.
04-05-2009, 08:55 AM
Thank you for your suggestions, Twodayslate - I'll have a look at it!
Yes, I've noticed the blocky grunge too - it's just damn hard to make it look right with a repeating image :p
04-05-2009, 02:12 PM
The best way to get around the blocky-ness is to experiment. Even you static images (http://behrentzs.com/new/head.png) are not grungy enough and seem cut off. If your brush is the thing that is creating the blocky-ness - download a new one.
04-05-2009, 02:45 PM
Your website may take a lot of time to load for users who have a low speed connection, and it may suck their bandwidth.
You could analyse your site using http://www.websiteoptimization.com/services/analyze/
04-06-2009, 02:43 PM
The main culprits are your images, save them as JPG to make a big difference. I know you want transparency, but a balance needs to be found.
Documents (1 file) 5 KB
http://behrentzs.com/new/ 5 KB
Images (17 files) 866 KB
http://behrentzs.com/new/head.png 290 KB
http://behrentzs.com/new/images/body_top.png 243 KB
http://behrentzs.com/new/images/background.jpg 130 KB
http://behrentzs.com/new/images/menu_background.png 40 KB
http://behrentzs.com/new/images/container-top.png 35 KB
http://behrentzs.com/new/images/footer.png 31 KB
http://behrentzs.com/new/images/content_top.png 21 KB
http://behrentzs.com/new/images/icons/home.png 18 KB
http://behrentzs.com/new/images/icons/gallery.png 15 KB
http://behrentzs.com/new/images/icons/forums.png 13 KB
http://behrentzs.com/new/images/icons/contact.png 11 KB
http://behrentzs.com/new/menu.png 9 KB
http://behrentzs.com/new/date.php 3 KB
http://behrentzs.com/new/test.png 2 KB
http://behrentzs.com/new/images/xhtml.png 2 KB
http://behrentzs.com/new/images/css.png 2 KB
http://behrentzs.com/new/images/button_close.png 464 bytes
Objects (0 files)
Scripts (2 files) 6 KB
Style Sheets (1 file) 5 KB
http://behrentzs.com/new/style/style.css 5 KB
Total 882 KB
I do not and will not ever like a menu system that I have to click to access. There are some basic issues with usability, and breaking this particular rule is very dangerous IMO. If a user cannot see the navigation (no matter that you have a menu icon, I honestly couldn't locate the nav for 15 seconds or so, and I'm patient) they will leave or give up. I thought it might be the little white text at top: no joy, then looked under the image, no joy, and finally saw Menu but it just is rather difficult to read unless you stop and stare at it. Then I found it, and got icons :( I had to do a lot of work just to find what is on the site. Its nice, but I think many visitors will have similar problems. This is a problem many flash designers had for a long time (some still do), by making such 'cool' nav schemes that they stumpped the average user.
Suggestions: make it always visible, and place it in the top right corner of your header (above where the MENU button is now). Put each icon label underneath or above the corresponding icon. Don't dimm the text, but the icons could act like they do now.
- Put a little more padding on the main body text to the left, its right up against the border (the Index is good, just the paragraphs are too far)
- Reduce the empty space above the header some by moving the whole thing up 50px or so, would help expose more content above the fold on smaller screens/windows
- I've been recommending recently to get rid of the validation links. They generally don't mean anything and if a small error jumps into your page (often on a small update or something) and you claim to be valid but aren't...well it looks silly. I'd rather put something about how it was designed to standards.
- Maybe punch the font size up a couple pixels, or provide a font resizer option.
Its a nice look, and has a consistent theme, you have done a great job so far, so hope you aren't put off by my thoughts :)
04-06-2009, 05:22 PM
I'm not put off at all, Jeremy - and I thank you for all your suggestions!
Regarding the menu: One of the main goals with the site was a very clean (but grungy :p) design - that's why I won't have a visible menu all the time. However, I see what you mean - I havn't thought about visibility of the "Menu" text actually - to me it's just there, but I see it might not be easy to locate if you don't know it's there..!
I plan to add a "sitemap" and "home" icon in the footer instead of the "validate" images - more on that later.
Padding and spacing have already been fixed (not online yet).
I just don't have a clue on how to reduce the size of the site.. I need transparency in order to have the grunge graphic :(
But thank you, as well as all other repliers, for your suggestions!
04-07-2009, 06:57 AM
First of all very snazzy website, I like the layout.
Also, like jeremy said, be careful and watch your image sizes. I'm on cable (albeit crappy cable) and it took a few seconds for your page to load fully. If you haven't already, investigate the File->Save Image for Web feature of Photoshop. This is a wonderful device.
All in all sharp website, nice implementation, and I look forward to seeing the finished product!
04-07-2009, 08:23 AM
Here are a couple ideas for compression
04-07-2009, 11:17 AM
I've now tried to reduce the size of the site a little by compressing all .png images with a tool called pngcrusher(neat tool, btw - thanks for link).
It has not been compressed as much as I would like, though, but a little difference has been archieved.
Some padding and spacing has been fixed along with some optimizing of the grunge effect on some of the static images.
The footer has been reworked and the 'validate' buttons have been replaced by a sitemap icon.
The date-thing has been moved to the right corner instead of the left.
The shuffle-header-images php function has been incorporated, so now you see a couple of different images every time you refresh the page (more will be added later).
Would it be a good idea to use <noscript> tags to include an alternative menu for non-js users, or is there a better way to do this?
I am thinking about just letting the site be avaible to js-enabled users as the gallery, the main turning-point of the site, is partly js-driven..
04-07-2009, 11:57 AM
You may add a favicon (http://en.wikipedia.org/wiki/Favicon) now!
04-07-2009, 12:27 PM
You may add a favicon (http://en.wikipedia.org/wiki/Favicon) now!
As you wish :D;)