Here's a mockup of the wayfarer site's current design idea. I'm going to have a hell of a time implementing this in a way that makes me happy, but I suppose I could use a challenge.
This is mainly for a web design class, and doesn't really reflect my progress with wayfarer as a whole - that's still basically slogging along.
This is mainly for a web design class, and doesn't really reflect my progress with wayfarer as a whole - that's still basically slogging along.
Category Designs / Fantasy
Species Unspecified / Any
Size 1280 x 1024px
File Size 262.7 kB
Listed in Folders
Is this reflective of the actual size? Because it's huge. I can't fit the entire image in my window without resizing larger. Why are the margins between everything different? Is there a reason the logo is in the upper right instead of the upper left? Is the leftNav dynamic, will it grow longer or shorter based on the number of links in it, or will its size remain pretty static? If it's going to be that size, have you tried drawing it out the same size as the main content box next to it and adjusting the gem decoration to balance its empty space so there's no visual jump in height between major elements?
it wasn't supposed to be this big, I'm not sure what happened. they're different because this is a loose concepty doodle (hence why there's no text or anything) I was just trying to get a feel for the style.
I rather like the logo being on the left - I suppose I could move it to the right, but this is just how I came out. I dunno about the side bar, we'll have to see how that goes. I'm thinking it'll be pretty static, though.
I could try that - but one thing to note is that I was nearly deliriously tired when I put this together x3.
there also may or may not be a bottom bar with that wierd link and legal crap that's on every site. or maybe just white text. not sure, yet.
or maybe a gradient black area with white text.
also the background might be changed to something looking more like a pillow. that's what I was going for - I missed the mark a little.
I rather like the logo being on the left - I suppose I could move it to the right, but this is just how I came out. I dunno about the side bar, we'll have to see how that goes. I'm thinking it'll be pretty static, though.
I could try that - but one thing to note is that I was nearly deliriously tired when I put this together x3.
there also may or may not be a bottom bar with that wierd link and legal crap that's on every site. or maybe just white text. not sure, yet.
or maybe a gradient black area with white text.
also the background might be changed to something looking more like a pillow. that's what I was going for - I missed the mark a little.
If the size is appearing oddly and it's just for layout, then it's all right.
Your logo is already on the right. The standard place is top-left for virtually any Western country, since our eyes are trained to read from the top left to the bottom right. If there's ever a question for what site the person is at (if they get linked to an individual piece of content or some such thing), they look to the top left right away just to check for a logo. It's one thing that's so standard that you need a really special reason to break that rule.
If you get a chance, use a grid to help you lay out boxes with equal margins between each box and the edges of the picture where appropriate. I'd recommend making your leftNav the same size as your main content, the visual rhythm will just be nicer, and you have decorative elements you can move around to clear up space.
As for the background, it's at least got some texture, though it's a standard filter. The Fiber filter in Photoshop tends to make something more like a wood grain. What you may try is getting a flat color that you like, and adding 50% gray layers above it using "Soft Light" for their blending mode. Add monochromatic noise to them, maybe some blur, or try filling one layer with a rock or fabric pattern with the Blend mode set to "Soft Light". Then create another 50% gray, "Soft Light" blended layer, and use dodge and burn to provide pillow highlights and shadows.
Your logo is already on the right. The standard place is top-left for virtually any Western country, since our eyes are trained to read from the top left to the bottom right. If there's ever a question for what site the person is at (if they get linked to an individual piece of content or some such thing), they look to the top left right away just to check for a logo. It's one thing that's so standard that you need a really special reason to break that rule.
If you get a chance, use a grid to help you lay out boxes with equal margins between each box and the edges of the picture where appropriate. I'd recommend making your leftNav the same size as your main content, the visual rhythm will just be nicer, and you have decorative elements you can move around to clear up space.
As for the background, it's at least got some texture, though it's a standard filter. The Fiber filter in Photoshop tends to make something more like a wood grain. What you may try is getting a flat color that you like, and adding 50% gray layers above it using "Soft Light" for their blending mode. Add monochromatic noise to them, maybe some blur, or try filling one layer with a rock or fabric pattern with the Blend mode set to "Soft Light". Then create another 50% gray, "Soft Light" blended layer, and use dodge and burn to provide pillow highlights and shadows.
If nothing else, as you finalize the design, consider putting the logo in the top left so it's at the first point in the visual hierarchy, and then make sure you even out the spacing between your elements. Things like buttons and tabs don't have to have equal sizes, but the spacing between your topNav, leftNav, mainContent and the borders of the page will make it look really sharp.<Zimmer> You're going to like the way it looks, I guarantee it. </Zimmer>
FA+


Comments