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<\/i><\/b> avoid creating pixel-perfect images to make precious your web design.<\/p>\n
For a long time we\u2019ve thought about Photoshop \u2018it is an essential tool to develop a website.\u2019<\/b><\/p>\n
How the psd mockup and PSD-to-HTML conversion are needful things, but, digging into new features of CSS3 HTML 5<\/b>, a question hires my brain: \u2018do you really need a psd mockup?\u2019<\/b><\/p>\n
The answer, in my opinion, is \u2019sometimes.\u2019<\/b> 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.<\/p>\n
Note: I am not saying that we don\u2019t 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.<\/b>\u00a0<\/b><\/p>\n
Make Your Mockup in Markup<\/b><\/p>\n
THE OLD WAY<\/b><\/p>\n
We used to think the best place to design a website was in an image editor. I\u2019d 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.<\/p>\n
From a survey it clear that close to 90% of respondents said they design in Photoshop before the browser.<\/p>\n
Some of you may be wondering, \u201cWhat\u2019s so bad about using Photoshop for the bulk of my design?\u201d<\/b> Well, any seasoned designer will tell you that working in Photoshop are akin to working in a minefield: you never know when it\u2019s going to blow up in your face.<\/p>\n
Crashing and text rendering issues suck, but we\u2019ve learned to live with them. The real issue with using Photoshop for mockups is the expectations you\u2019re setting for a client. When you send the client a static image of the design, you\u2019re not giving them the whole picture \u2014 they can\u2019t see how a fluid grid<\/b> would function, how the design will look in a variety of browsers, basic interactions like: hover effects, or JavaScript behaviors.<\/b><\/p>\n
In the past\u00a0we’ve\u00a0put 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, <\/b>transparent PNG, and @font-face<\/b> combined, we can create a prototype that radiates shiny awesomeness right in the browser.<\/p>\n
\u2018Do u think image Editor (Photoshop) is essential tool to develop a website?\u2019<\/b><\/p>\n
Actually I\u2019m changing this point of view to \u2018it is a useful tool to develop a website.\u2019<\/p>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":2,"featured_media":1501,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8,11,20],"tags":[86,111,168,223,273,365,382],"class_list":["post-376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cascading-style-sheets","category-development","category-jquery-javascript","tag-browsers-support","tag-css3","tag-html5","tag-markup","tag-photoshop","tag-web-designing","tag-website-mockup"],"acf":{"custom_meta_title":"How HTML 5 and CSS3 Can Change Web Design? | NTSPL","meta_description":"Do you really need a PSD mockup? To save your time & money avoiding it is an almost obsolete step. Know how HTML5 & CSS3 can change web design.","meta_keyword":"features of css3, features of html5, properties of css3, psd to html conversion","other_meta_tag":"\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"},"_links":{"self":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/376"}],"collection":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":3,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"predecessor-version":[{"id":4356,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions\/4356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media\/1501"}],"wp:attachment":[{"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ntspl.co.in\/blog\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}