: Webpage design in Photoshop I don't know it should be asked here or on freelancing. Designing a webpage and do coding for webpage both are different tasks and need different skills. I have

@Tiffany317

As your design should just be a guideline, you can make every design you can imagine.

In ye olde days, people would slice up photoshop files into separate images and then use frames or tables to stick it back together as a website. This created bulky, non-responsive websites.

Fortunately, web design has developed. Every self-respecting developer should use a .psd as a guideline, an inspirational tool, rather than a 1-to-1 non-websitey copy of a website. He has to take into account the fluidity of the web, and extrapolate a design from the rigidity of your Photoshop document.

As a web developer, I advise you to take the following things in consideration:

Use the right fonts, and not too many

Use only standard fonts (Arial, Times, Courier etc) or webfonts for your design. Unless you are willing to pay big time, using Futura and other hotties like that is not an option. Luckily, the already vast amount of very nice webfonts is still growing every day. Pick one or two, no more. Using too many webfonts slows down your website. Keep in mind that every font-weight adds to the loading time!

Work hi-res

This might seem a bit counter-intuitive, keeping loading times in mind. Nevertheless, more and more devices have a huge pixel count per inch. Reducing the dimensions of an image is easy, but enlarging it looks ugly.

Work with vectors

Again, an odd thing to say when using Photoshop. Using vectors has it's advantages though. It makes for small file sizes, and it will look as intended on every screen resolution and pixel pitch. Placing them in your .psd is easy using Smart Objects.

Organize your layers

Give every layer a sensible name, and use groups to stick layers together. This greatly improves the workflow for the web developer, and is good practice anyway.

Use simple gradients

CSS (the thing that makes websites pretty) is capable of generating simple gradients in code. This has the advantage of not needing to load an image, and looks good however big or small the element becomes.

Do not expect the final result to exactly match your design

In theory, your developer could render a pixel-perfect version of your design as a website. In practice, this means that said developer wasted a lot of time creating a subpar website. Fixed dimensions and consistent rendering are luxuries web does not have. A good frontend developer will not copy, but interpret your design. Mind you, I am not advocating artistic freedom from the dev here, I am merely emphasizing that it is his/her job to convert your pixels into consistent usability.

Collaborate

If possible, get in contact with the people that transform your design into a real website. Ask them for feedback, be interested in their progress, try to come up with (design) solutions that keep you both happy.

Vote Up Vote Down

@RJPawlick971

It depends entirely on the client. If you're talking about a business client, they typically don't want a design, they want a complete product. They likely want to higher a firm that design and produces the web site.

If the client is another design firm or development firm, they may just want you to handle visual design, and they'll take care of production.

Vote Up Vote Down