What do you think of my website layout design?
Also, how would you suggest I layout the CSS positioning? I have considered using this layout as a fixed background with an overflow scroll bar around the content, however, I would rather it be more fluid. I am unsure of how best to pull it off.
Any help would be greatly appreciated!
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$7 Answers
First off, good job developing a creative layout for the web. Too often, we're faced with bland one-off's that if they're lucky, only slightly improve on the sites they borrow elements from.
Here are some criticisms presented with the hope that could become the best site that you've ever made.
1)
Your logo is floating in nothingness.
This may be resolved when you actually place the logo, but for now, the logo placement needs work.
2)
Your text block does not encourage skimming, reading, or apply the "F" or "E" pattern of skimming. Visitors will likely not absorb or be attracted to the text that is placed in the blocks.
Also, you've (maybe unconsciously) discovered that your background image distracts from the body text. You've cut your Lorem Ipsum short just before the the tops of the houses get in the way. Text will almost certainly run over those houses at some point and it will again detract from your message.
3)
Your navigation does not leave very much room for additions.
It's shocking how after a website goes live that you need to add sections. While you could make a fluid vertical div to expand the box to fit more text, it won't help the space available for your navigation.
4)
As mentioned, your background image is causing a problem with your body block. At the very least, you could decrease the transparency of the white body block container.
The other problem with your photographic image background is screen resolution. People view the web at all different sizes and it's important to consider them. I view the web at 1920x1080. Unless either contained or repeated, your background will look out of place.
5)
Generally, you'll need to use a lot of images on this site. That will significantly increase load time and bandwidth consumption.
This is usually a consideration of professional web developers who design and code for high traffic sites. However, speed and ease of access are important even for small and medium shops as mobile consumption & usage continues to grow.
0)
I haven't qualified any of these points with all of the good things about your page. Please don't take these points as purely negative. I discarded the positive aspects to form a concise, hopefully helpful answer.
Overall, I like your creative approach and think that with more work you'll be on to something.
I hope that this helps,
Rob
I'm a pro web developer with years of experience.
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$Second, I have no idea what the topic of the website is, but I am trying to figure out what an apartment complex, a stream and some guy way too happy about junk connect. Apply the "Don't make me think" principle to your website. Can a person tell within a few seconds what your website is about?
Third, I don't know who that guy is, but the expression on his face looks creepy--very unnatural. With the way his eyebrows are raised, it's more of a leer than a happy grin.
Fourth, why this beautiful picture then an image of a guy pointing at junk? It looks like clutter. Maybe this has something to do with the site, but I don't know what. If you get rid of people's junk, then an image of a guy standing next to an clean garage would be a better sell.
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$
Alternatively, if you are open to getting rid of the window, use navigation pop ups throughout the image. Crop the image just a bit on the sides and boost the color saturation, also try adding some clouds to the sky (if you're using Photoshop as you said, you have the tool to do that). It's a good start, hope this helps, good luck.
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$Also, the shading effect + 50% transparency is kind of out of date. Think of what you/your company is about and try to relate the design to it.
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$
I make websites for fun and my own company.
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$
This is only a rough sketch, just to give you the idea.
You can leave an optional "tip" with Mahalo's virtual currency, Mahalo Dollars. If you are asking a difficult question that might require some research, or if you'd like a wide variety of feedback, a higher tip often leads to more answers to your question.
M$
"F" or "E" pattern of skimming." What is that rob?
Gr8 answer Rob... I don't think I'm even going to attempt an answer after one that's so comprehensive and insightful :)
Keep up the good work!
Excellent!
@thelastscionspeaks
In short, it's the way that people move their eyes to read web pages. Information in the most popular (red) areas is usually absorbed faster and deeper than other areas.
http://www.useit.com/alertbox/reading_pattern.html
Thanks for your great feedback, Rob!
I'm glad you pointed out the problems with the background image. I'm not sure how I missed it but clearly it's not going to work for people that have large screen resolutions. Personally, I like how the image represents and appeals to our target audience (apartment communities managers). However, I am not sure how it can fit into the background of the site. If you have an suggestions or ideas, please let me know.
As for the navigation, that is something I recognize needs some work. I plan on playing around with some different ideas to see what looks best.
I am hoping the layout of the text/content will address the skimming and attraction concerns. Adjusting the transparency and opacity of the background image may help.
Well that is cool info. Thanks...
Here are a couple of ideas for the background:
1)
Contain the background image. If that photo has been cropped and you can see the edges of the houses, it would be possible to apply a 360 degree radiant fill around the actual image. Then, you could set a solid background color (maybe blue). Center the whole thing up and it would look like your background, body container, etc is floating nicely in the center (both horizontal and vertical) of the page.
2)
Use elements from your idea to convey the same thing.
For example, you could find a stock photo of some houses and use only the middle/top of each to create a footer. Or, you could use the houses and the stream directly around the body block rather than as a (somewhat) watermarked background.