Need Help with Mockup Design for Website

Homework giving you a headache? Math gives you a migraine? Can't quite figure out how to do something in photoshop? Never fear, the other members of CAA share their expertise in this forum.

Need Help with Mockup Design for Website

Postby Warrior 4 Jesus » Mon Jun 20, 2005 10:26 pm

This is a mockup design for what I want my personal website to look like. (this is only the home page) I used Photoshop (and Freehand) but I'm going to use Dreamweaver with CSS and also ImageReady to create my site.

I'm not sure about the body text placement (kerning etc and the font chosen -Arial) I like the Garamond font I've used throughout. And I like the clean, simple look.
(The little image of me will be in colour in the final website).

I was wondering what people's thoughts were on it (preferably people with know-how) and what could be done to improve it.

Anyone to comments? Please keep in mind that this is my first website so I don't have much experience at all. Thanks!

Image
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby bigsleepj » Mon Jun 20, 2005 10:32 pm

Looks pretty good to me.
User avatar
bigsleepj
 
Posts: 3432
Joined: Sun Apr 11, 2004 12:00 pm
Location: South Africa - Oh yes, better believe it!

Postby Warrior 4 Jesus » Mon Jun 20, 2005 10:37 pm

Thanks J! You da man! XD
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby Hephzibah » Tue Jun 21, 2005 12:40 am

That's nifty W4J! I didn't know you drew! Have you submitted any here on CAA?
Hephzibah
 
Posts: 1494
Joined: Thu Oct 14, 2004 9:00 am
Location: Australia

Postby Radical Dreamer » Tue Jun 21, 2005 12:47 am

That's pretty cool, W4J! Has a nice look to it! ^_^

*notices Tal's avi* Aw, you changed it! No more Tamales from Talame...*thinks this is a sad day...XD*
[color="DeepSkyBlue"]4 8 15 16 23[/color] 42
[color="PaleGreen"]Rushia: YOU ARE MY FAVORITE IGNORANT AMERICAN OF IRISH DECENT. I LOVE YOU AND YOUR POTATOES.[/color]
[color="Orange"]WELCOME TO MOES[/color]

Image

User avatar
Radical Dreamer
 
Posts: 7950
Joined: Sat May 28, 2005 9:00 am
Location: Some place where I can think up witty things to say under the "Location" category.

Postby Warrior 4 Jesus » Tue Jun 21, 2005 1:05 am

Talame, yes I have submitted some to CAA. I'll PM you the link.

Thanks peeps!
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby Ashley » Tue Jun 21, 2005 11:39 pm

Hmm, I really like it. It's very clean and simple, yet effective--not overcrowded or over busy. @.@

My suggestions would be to unify the theme...like the compass wheel suggests something nautical or adventurous, yet the text doesn't suggest that nor does the cute guy with a pencil. Some sort of unifying theme...be it an ideal (like...simplicity or night sky) or like, words from a particular song...something unified woud really help this.

Also, I would LOVE to see a splash of red or blue in there somewhere...maybe just a tiny section of the compass wheel, or a word or two...but something small yet bold would be very dramatic and effective.

And I'm speaking like a graphic designer again. If you have NO idea what I mean, just ask ^^;;
Image
User avatar
Ashley
 
Posts: 7364
Joined: Mon May 26, 2003 10:00 am
Location: Fort Worth, Texas

Postby Warrior 4 Jesus » Thu Jun 23, 2005 9:04 pm

Thanks Ashley!
I know what you mean by needing to unify the theme but its quite broad because this is my personal website and will have webcomics and my novel and other stuff. The "cute guy" is me (lol).
The "compass wheel" is actually a spiked wheel spoke and references a part of the world in my story. The world its set in is medieval in some respects (swords, castles etc), victorian era in others (fancy architecture, big clocks and steampowered stuff) and futuristic also - the genre is called steampunk. The wheel spoke was meant to be a simple image.

I'll take into account the splashing of red and blue somewhere. I'm still kind of confused though.
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby CreatureArt » Fri Jun 24, 2005 4:05 am

I like the design, too. The bold black in the top left of the heading and the bottom right with the wheelspoke is really nice, and the drawing is cool, too. :)

If I have any thoughts it would be to see what it would look like with the text a little more to the right so that the cool pic of you gets more space around it and therefore emphasis. I dont know if that would work or not :sweat:
---
[SIGPIC][/SIGPIC]
A sci-fi drama webcomic updating Thursdays.
PG-13. Rating description here.
---
User avatar
CreatureArt
 
Posts: 1107
Joined: Sun Oct 24, 2004 12:11 pm
Location: Studentville, New Zealand

Postby Warrior 4 Jesus » Fri Jun 24, 2005 6:30 am

Good to see you CreatureArt! Thanks for the kind comments and I'll edit the image a bit (tomorrow probably) and then I guess we'll see what it looks like.
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby CreatureArt » Fri Jun 24, 2005 1:50 pm

Good to see you, too, W4J!
It's an awesome site design and I cant wait till its up on the net :)
---
[SIGPIC][/SIGPIC]
A sci-fi drama webcomic updating Thursdays.
PG-13. Rating description here.
---
User avatar
CreatureArt
 
Posts: 1107
Joined: Sun Oct 24, 2004 12:11 pm
Location: Studentville, New Zealand

Postby Warrior 4 Jesus » Tue Jun 28, 2005 10:03 pm

Image

What about this? I did a brain in Freehand vector art then enlarged it heaps. "Inside the Creative Mind" + Brain = Theme
I added a touch of red for interest like Ashley suggested. I then put the Brain in the background and blurred it a lot. I also added 50% opacity (white) so the text would still be legible. I removed the pic of me, since I can have that, or another of me on the About page instead.
Is this better? I like it more.

Suggestions on improvements?
Comments?

or this one:

Image

I'd like to get to work on this site as soon as possible, so all advice is welcome!

Thanks!
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby Anime Dad » Tue Jun 28, 2005 10:36 pm

I like the second one better, it makes the text so much easier to read. I would probably make the background even lighter than you have it - but that's just my personal preference :)
User avatar
Anime Dad
 
Posts: 126
Joined: Mon May 30, 2005 7:03 pm
Location: Australia.... BTW i'm not really a dwarf with a bushy beard and a helmety thing.....

Postby Warrior 4 Jesus » Tue Jun 28, 2005 10:41 pm

Thanks Anime Dad, I prefer the second one also. Like you suggested I upped the opacity - this time to 70%.

Image
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby Anime Dad » Tue Jun 28, 2005 11:02 pm

Even better!. You'll probably have to make it a fixed width site so the background looks good.
User avatar
Anime Dad
 
Posts: 126
Joined: Mon May 30, 2005 7:03 pm
Location: Australia.... BTW i'm not really a dwarf with a bushy beard and a helmety thing.....

Postby CreatureArt » Tue Jun 28, 2005 11:02 pm

Very, very nice. The opacity of thast last bacground doesn't obscure the text, and the red on the wheel is really effective in drawing it out and giving it impact.

The brain picture to link into the theme and just the pattern it makes look awesome. I really liked the original - and I like this even better :thumb:

I really do like your dude picture... but as he is still on the site, just a different page, I'm happy ^_^
---
[SIGPIC][/SIGPIC]
A sci-fi drama webcomic updating Thursdays.
PG-13. Rating description here.
---
User avatar
CreatureArt
 
Posts: 1107
Joined: Sun Oct 24, 2004 12:11 pm
Location: Studentville, New Zealand

Postby Warrior 4 Jesus » Sat Aug 13, 2005 1:36 am

Its been awhile and I haven't done much more at all (darn procrastination) - trying to brush up on my drawing skills and writing a novel.

Anyways, I like the welcome page (home) but once I entered info on the Profile page the text didn't hold together so well. The text looks tacked on and the spiked wheel (compass whatever) takes up a lot of space where text goes but I really like it. Hmm.... Big dilemma. Any helpful suggestions?

Thanks!

Image
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby Mr. Rogers » Sat Aug 13, 2005 9:44 am

i think the red text on there kinda hurts the eyes. but it is a cool layout. ^__^
User avatar
Mr. Rogers
 
Posts: 1512
Joined: Sat Sep 06, 2003 10:23 pm
Location: Chicago, IL

Postby Warrior 4 Jesus » Sat Aug 13, 2005 6:27 pm

That could be it. Thanks. What's a better colour to choose? Dark blue or something?
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby CreatureArt » Sun Aug 14, 2005 12:27 am

Would it look any good to put a black background around the red text and bold it? It might make it easier to read, but I'm not sure if it would look good with the current layout or not.

Oh, and the shot of your profile page has loaded now. I like it. (hurrah for Metropolis!) . Still, what I said above can apply to that page, too. I was originally replying with the impression that sldr4Christ was referring to your home page shots.

The background, header and footer look so nice as a continuous layout.
---
[SIGPIC][/SIGPIC]
A sci-fi drama webcomic updating Thursdays.
PG-13. Rating description here.
---
User avatar
CreatureArt
 
Posts: 1107
Joined: Sun Oct 24, 2004 12:11 pm
Location: Studentville, New Zealand

Postby Mave » Sun Aug 14, 2005 2:13 pm

Oooh!

My only preference would be to lighten up that background design (that red/black pattern) even further. For some reason, that bg just bothers me. Maybe it acts like a distraction to me (?) since I prefer simple and clean-looking designs.

Anyway, everything else looks GREAT!
User avatar
Mave
 
Posts: 3662
Joined: Tue Aug 12, 2003 9:00 am

Postby Photosoph » Sun Aug 14, 2005 6:02 pm

I think blue could look good -I like the red personally, but who knows? Another colour could fit better. However, if the blue doesn't work and you want to try something different, you could always change the red text to black and just bold it, and/or make a change to the text which is now black to make it a lighter shade of grey. I'm not sure how that would work... I suppose that that's just trial and error.
With the wheel, perhaps if you added a transparent white box behind the text, even if it went over the top of the wheel, it could help to bring the text out more. Again, trial and error. ^_^"

<EDIT>I agree with Mave -lightening it up further could be a good idea.
(0)>
((_\//
mm

[Quote=Photosoph]Well, t'was a good deduction, Mr. Holmes! *salutes Mr. Myoti Sherlock Homes* [/QUOTE]
Myoti wrote:Elementary, my dear Watsoph. XD

\(^_^)/
Still in rest and recovery mode. Posting may be sporadic at times. :pinned:
User avatar
Photosoph
 
Posts: 1528
Joined: Tue Jan 11, 2005 8:32 pm
Location: Kiwiland... fighting for mankind in the battle of human vs. sheep.

Postby Warrior 4 Jesus » Sun Aug 14, 2005 7:45 pm

Thanks Mave, CreatureArt and Photosoph! I'll give it a go!

EDIT: Okay here I upped the opacity to 85% from the 70% it was at. I put boxes around some text with 50% opacity and changed the red text to black and bolded some. I think it looks a lot better.

Thanks for the help guys!

Image

Image
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby Warrior 4 Jesus » Sun Aug 14, 2005 8:27 pm

I hope this thread isn't getting too image intensive.
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby faithfighter » Sun Aug 14, 2005 8:50 pm

I really like the improvments W4J. awesome job *thumbs up*
[color="Green"][font="Verdana"]There is no one you can't love once you know their story-Mary Lou Lawnacki[/font][/color]
User avatar
faithfighter
 
Posts: 806
Joined: Thu Feb 17, 2005 9:05 pm
Location: rattling the cages

Postby CreatureArt » Sun Aug 14, 2005 9:18 pm

Very, very nice. I like the changes. They work well, and are easier on the eyes :thumb:
---
[SIGPIC][/SIGPIC]
A sci-fi drama webcomic updating Thursdays.
PG-13. Rating description here.
---
User avatar
CreatureArt
 
Posts: 1107
Joined: Sun Oct 24, 2004 12:11 pm
Location: Studentville, New Zealand

Postby Warrior 4 Jesus » Sun Aug 14, 2005 9:20 pm

Thanks faith and CreatureArt! Much love! *hugs*
User avatar
Warrior 4 Jesus
 
Posts: 4844
Joined: Tue Sep 07, 2004 10:52 pm
Location: The driest continent that isn't Antarctica.

Postby shooraijin » Mon Aug 15, 2005 7:49 am

Not to throw cold water on this, but I find a lot of web sites that enforce a very specific layout instead of letting the web browser use some flexibility in display tend to break on all but a couple browsers. By doing your mockup in Photoshop, you're pretty much demanding pixel-perfect alignment that you might not get on everyone's system (and your layout will fall apart if it doesn't). Have you tried doing any kind of feasibility study in raw HTML to see if it will work?
"you're a doctor.... and 27 years.... so...doctor + 27 years = HATORI SOHMA" - RoyalWing, when I was 27
"Al hail the forum editting Shooby! His vibes are law!" - Osaka-chan

I could still be champ, but I'd feel bad taking it away from one of the younger guys. - George Foreman
User avatar
shooraijin
 
Posts: 9928
Joined: Thu Jun 26, 2003 12:00 pm
Location: Southern California

Postby Mithrandir » Mon Aug 15, 2005 8:49 am

Yeah. A few things. If you keep the background to a fixed width, you're going to have to force everyone to use the same size display. Those extra 50% boxes might be tough.

I'm sure this will sound absolutely horrid, but I actually liked the first one better. The extra color (especially the bkground) seems somehow ad hoc to me - as though you are comprimising on your expression to cater to someone else...
User avatar
Mithrandir
 
Posts: 11071
Joined: Fri Jun 27, 2003 12:00 pm
Location: You will be baked. And then there will be cake.

Postby ChristianKitsune » Mon Aug 15, 2005 11:13 am

I agree with Mithrandir, Your site looks great either way..(hey, I like them all! ^^) but it is your site, W4J! Do What YOU think would be best! ^^

what is the url for this site have you put it up yet?
ImageImage
Stick Monkey Chronicles
Web-Manga Hosted by: The Project
User avatar
ChristianKitsune
 
Posts: 5420
Joined: Mon Mar 14, 2005 12:00 pm
Location: In my sketchbook of wonderment and puffy pink clouds! *\^o^/*

Next

Return to Tutorials

Who is online

Users browsing this forum: No registered users and 133 guests