How HTML 5 and CSS3 Can Change Web Design

We can talk about the power of the semantic web or about the reduction of the plug-in-based rich internet applications (such as Flash or Java); but as web designer the first big change is within my design process. In fact the new features of CSS3 and HTML 5 allow us a complete control of some properties able to create nice effects without the use of jpg, png or gif. New properties of CSS3, such as box-shadow, text-shadow, border-radius, transparent PNG, and @font-face avoid creating pixel-perfect images to make precious your web design.

For a long time we’ve thought about Photoshop ‘it is an essential tool to develop a website.’

How the psd mockup and PSD-to-HTML conversion are needful things, but, digging into new features of CSS3 HTML 5, a question hires my brain: ‘do you really need a psd mockup?’

The answer, in my opinion, is ’sometimes.’ When we have a clear concept and a good wireframe we may code instantly an HTML-based mockup for a browser; to save your time (and money) avoiding an almost-obsolete step.

Note: I am not saying that we don’t need Photoshop. I am just saying that, sometimes, a psd mockup could be an unessential step; however we could need an image editor to create stunning graphic details. 

Make Your Mockup in Markup

THE OLD WAY

We used to think the best place to design a website was in an image editor. I’d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup.

From a survey it clear that close to 90% of respondents said they design in Photoshop before the browser.

Some of you may be wondering, “What’s so bad about using Photoshop for the bulk of my design?” Well, any seasoned designer will tell you that working in Photoshop are akin to working in a minefield: you never know when it’s going to blow up in your face.

Crashing and text rendering issues suck, but we’ve learned to live with them. The real issue with using Photoshop for mockups is the expectations you’re setting for a client. When you send the client a static image of the design, you’re not giving them the whole picture — they can’t see how a fluid grid would function, how the design will look in a variety of browsers, basic interactions like: hover effects, or JavaScript behaviors.

In the past we’ve put up with Photoshop because it was vital to achieving our beloved rounded corners, drop shadows, outer glows, and gradients. However, with the recent adaptation of CSS3 in major browsers, and the slow, joyous death of IE6, browsers can render mockups that are just as beautiful as those created in an image editor. With the power of CSS3 and HTML 5 text-shadow, box-shadow, border-radius, transparent PNG, and @font-face combined, we can create a prototype that radiates shiny awesomeness right in the browser.

‘Do u think image Editor (Photoshop) is essential tool to develop a website?’

Actually I’m changing this point of view to ‘it is a useful tool to develop a website.’

 

 

Leave a Reply