First Attempt at a Web Design Mockup

[CoolAsCarlito]

Okay given I know how to write proper HTML schematic code as well as work with WordPress and know moderate use of PHP coding. I decided to try and learn photoshop and try and become accustomed to its features and what it can do for web design. This is just my first attempt at it.

http://kansasoutlawwrestling.com/jeffdavidson/images/mockup-1.jpg

[shagzdesign]

Not bad, but I might recommend for someone just trying to learn the Adobe suites, to start off with Fireworks first. The it’s specifically designed for a web design workflow, it has more control over certain aspects than PhotoShop does, and isn’t quite as complicated to learn. PhotoShop is a lot more powerful, but that power is shifted toward photo manipulation instead of web design. Personally I use Illustrator, then PhotoShop or Fireworks before it makes it to the web.

[CoolAsCarlito]

I was hoping for more of a critique I know there isn’t much though but anything that can be said so I can learn from what I’ve done. But thank you.

[TheDoc]

Couple of things:

1. Portrait Image is distorted

   • When resizing an image in Photoshop, make sure to hold down Shift to make sure the dimension ratio stays the same.

2. Think about ‘padding’

   • When adding text to boxes, it’s best to make sure your text has lots of ‘breathing room’. In the Blog box, for example, the first title is very close to the top of the box.

3. Typography

   • This is not an easy thing to learn. I would redo all of the text on this mockup. Have a look around the web to see what fonts are currently in style. Typography is one of the most important aspects of design.

[burtflaxton]

Can’t stress #3 enough.

The proper use of type adds so much feel to a design. To me, it is what is holding your design back. At no point should anyone have to “try” to read something on a webpage.

[CoolAsCarlito]

Thank you all. I know it was stretch. I can code it but I’d rather also learn the design part of it as well. Any suggestions on where I’d find the best fonts to look over?

[Luminated]

Just google “web safe fonts”

[Author]

Posts