Website mockup – would love some serious critique

[Spearfrost]

Hello folks,

I am absolutely brand spanking new here and I am in love with the content of this site. So very informative that I am learning ALOT. I am fairly a noob at web designing and I LOVE it. Digging through hundreds of tutorials, delving into many books and stripping site’s codes and learning from them…

I’ve been using my own website as practice, still alot of mistakes, but I am learning from it. Right now I am working on a bigger project that’s going to test me at everything I’ve and probably beat me into a bloody pulp… but still going to give it all I got.

SHAMEFULLY, this is just a single png image mock-up of what it will look like:

First Attempt – with notes
Second Attempt

I have not made the attempt to design the actual html and css for it just yet because I feel that I am still lacking in a few features. So right now it is all review, redo, repeat.

Please let me in on your input and critiques. I would LOVE to get an insight of what you like, don’t like and even suggestions. Thank you so much for your time. I TRULY appreciate it.

Disclaimer: please, please… PLEASE… be warned… if you do check out my online studio, it contains adult material. NOT for the underage. I rather let you know now than be “surprised” should you decide to view my site’s content, other than what I have linked here.

[gno]

Hi Spearfrost! I feel like saying welcome, but I’m as new as you, so I’ll leave that to the guys who are more frequent on this forum ;-)

Dark layouts are alot harder to pull off, in my opinion, but yours is quite nice. The colors fit eachother well and the orange one is not too bright – so we’ll leave them…

There are a few places where I would recommend you to do some changes;

1) The “Featured Submission” box seems odd, when its the only box on the page without the lighter grey background. I have no idea why you chose to use the same heading as you do for the other boxes, but leave the background out? It leaves the header hanging in the same way that you do not want to be left hanging, when attempting a high-five with one of your bro’s ;-)

2) The text on the profile tab is far too wide. I have to turn my neck to read a line in its full length. You seem to using a 11 or 12px font-size on the text. I believe Chris covered this in a previous article – but best practice for paragraph widths is to be about 35-50 ems. An em is a relative measure (originally its the length of the lower case letter m) – its the same size as your font size in css at least. So, if we say 11px font size, your max width would be 550pixels, and minimum 385 pixels. I measured yours to be about 750px.

After your disclaimer in the end, I obviously headed straight to your site, and I noticed one other thing there, besides the awesome drawings – no kidding, I think you are an amazing artist (drawer – whatever its called :-)). Your site took quite some time to load – because of all those images.

I’m from Copenhagen, Denmark, and you are most likely from the US, like most of this community seems to be, but even most american sites load in an instant. You should look into the images and other external elements on your page. A few ideas/key words: Better compression of images, stylesheets and what not. Figuring out where you can avoid the use of images. Using repeated patterns instead of full size images on backgrounds.

You said you were new to web design so I couldn’t help mentioning this :-)

I hope that you can make use the feedback – and that you are able to understand me. If I were to throw a disclaimer as an ending for my post it would have to be something like: Please keep in mind that english is not my native language ;-)

[coffeendonut]

Im liking you site however you having issues with colors the orange i find it to overpowering
the kinda black is easy on the eyes but to opaque, i like how the structure is but is missing some fun in it…

[Spearfrost]

^^ Thank you so much Gno for the suggestions. I truly appreciate it. I am definitely going to take all the advice you gave into account. I see your reasoning for the “featured Submission box” and looking at it again, you’re right… XP I will fix that asap.

Agreed with the text in the profile too…. it is a bit too much, will fix that too.

As for my website. Those were pure images slices exported from Photoshop to Dreamweaver and learning from THAT mistake, I am working towards a more lighter design of lesser images and more css. Now, I just consider my site a place where I can douche around and test out new features that I have learned.

^^ I do understand you and I appreciate your help. I WILL be working on this project diligently so I’ll take all the help I can get.

[Spearfrost]

Thanks for the comment Coffeendonut. I figured the colors are a bit extreme so I will be working towards making it more neutral and comfortable to viewers eyes. XD

I am also adding the “customize feature” where individual users can change the colors of their user-page to suit their specific tastes… dunno how I am going to pull it off just yet… so still researching.

I know it looks kinda simple and somewhat standard, but simplicity is what I was aiming for… too much “stuff” makes things a bit too complicated and the idea is to spend less time fiddling around with the settings and concentrate more on the content and community.

But! Whatever suggestions you have for the “fun” feature, feel free to dish it out. XP

[gno]

I’m glad I can help. The deadline on my current project is approaching rapidly, and I’ve been working for 21 hours straight now. Only with the occasional breaks where I’m taking a look on this forum or the ones of a more natural character. Looking at other peoples problems is a great way to get renewed focus – it is like meditation for me ;-) The time is 9am here in Northern Europe, so I take all I can get ;-) ;-)

I got another idea while looking over your design a second time. I’m thinking; try making the orange border on top of your profile-text-box go around the borders of the active tab (the greyed out “Profile” in this case).

I think that would make it look extra polished and make it even more obvious that it is the active one.

[gno]

I have to disagree with Coffeendonut on the missing “fun factor”. When you dish out so much information on one single page, the single most important thing is structure. And so far, Spearfrost got that right. Adding too much extra “fun” might just screw up the structure and make it confusing for the visitor.

My advice would be to focus on sleekness and polishing – and keeping it simple.

Save all your funny effects until you are creating a page with less concentration of content :-)

[Spearfrost]

AH! Excellent idea Gno. XD Fixing…! Thank you!

I am working on the design layout at the moment while I have this site open up too to get myself some ideas. So you’re not alone…. except I don’t have a deadline… so make yourself some coffee or tea and dash off to the finish line!

[Spearfrost]

Understood Gno! Will keep focus on refining the details.

[gno]

I just found an article for you, regarding the width of body text I spoke of earlier. It seems I gave Chris the credit a little too early ;-) It was one from webdesignersdepot.com, especially #2 in that is related to that problem:

http://www.webdesignerdepot.com/2009/03/5-simple-ways-to-improve-web-typography/

Thanks for the cheering ;-) I took your advice on the coffee!

[Spearfrost]

Sweet. This bit of information will help alot! Thank you very much Gno

[Spearfrost]

Done alot of tweaking since the last discussion and I do appreciate the suggestions. I will change the fonts and take the sizing and positioning into account when I am ready to get into the core designing with css.

Here is the Third test for review.

This is with the view of the pop-up box

I know there is a css rule I can write that will allow me to apply such a popup…. still looking for it though… XD

Please let me know what you all think.

[Jerm993]

I think that it looks great, course I like dark themed pages. I Just hope you aren’t going to overwhelm yourself when you get to the actual development process. Are you planning on using a CMS? or are you writing your own?

[Spearfrost]

Good Lord Jerm993… I’ll have to leave CMS for my developer… I am not too well versed on the topic. Right now, I am just the designer. If I can get a layout of how all the pages should look like, I’ll just work on their htmls and css. At least I can get that much done to make it easier for the next step.

But thanks for the notation. I will do some research on the topic. If you have any resources where I can also take in some new knowledge on CMS, it would be most welcomed. ^^

[Author]

Posts