PSD to HTML is dead. Is it so?

Nick Pettit’s article PSD to HTML is Dead on Treehouse stirred a passionate debate quite some time back. In this article, I will show why PSD to HTML is not dead. 

Nick articulated that newer web technologies like Responsive Web design, CSS3 and CSS frameworks like Bootstrap and Foundation make PSD to HTML workflow useless. With these technologies, designers can directly convey their design in code and bypass drawing high-fidelity visual designs in graphic tools like Adobe Photoshop.

Designing by Coding vs Coding by Designing methodologies.

Nick proposes a designing by coding approach for UI/UX design. This is not something new, the argument for it has been going on for quite some time.

If you are a designer, your natural language is visual. With visual language, you create objects, behaviors, and relationships between them by drawing them. Whereas with the programming language you create objects, behaviors, and relations declaratively by defining object properties and procedures, that is by coding.

Now imagine, what is the most effective way to create a rectangle quickly to convey its design, that is look and feel? Definitely drawing is faster and more effective rather than coding it. Now imagine putting together thousands of such shapes to build coherent UI/UX design of a product. Do you still think coding is more effective language to convey the whole design?

Achieving your creative goals by designing by coding isn’t an effective workflow.

You could end up spending a lot of time perfecting your code than perfecting your design. This could lead to lesser creativity than your actual potential.

It’s about production quality code.

Do you think designing by coding approach will produce production quality code? Most certainly not.

If your priority, expertise, time and focus are on the creative aspect of a project, it is highly likely that you will skip necessary and complex processes involved in creating production quality code.

That’s where modern PSD to HTML workflow comes in. From writing semantic and reusable code to optimizing pages for load time, to cross browser and responsive device testing, a front-end developer involved in PSD to HTML conversion in today’s time has to go through many complex and time-taking steps to engineer code that finally runs in production.

Nick, however, oversimplified the process of PSD to HTML to such an extent that it looks redundant and totally useless. This is far from the truth. Check out Paul Boag’s – The Imposter Episode . It’s a great discussion on various topics, especially whether designers should code or not. Here is a quote from Andy in his discussion:

But things have just changed massively and have got more technical, I think there’s more involved in actually writing production code.

If you design and make multiple design revisions directly into code, its quality will pollute as your progress with the project. Also, it becomes harder to keep the code optimized and tested every time there is a design revision.

Bypassing PSD to HTML doesn’t scale.

Are you a freelancer who has the luxury of making a living out of doing one project at a time? Or your client is generous enough to give you an endless deadline? Then probably you have all the time in the world to be the jack of all trades and deliver great results.

However, if you are planning to scale as a freelancer or are already running an agency, you have to deal with multiple projects, team members, and stakeholders in parallel. It, therefore, makes sense to build specialized job profiles and standardize workflows.

Designing high-fidelity mockups first, act as a critical communication tool when working with team members, clients, and other stakeholders. Imagine you wrote a lot of code to present your web design in a web browser, only to discover it’s not what the client wanted!

You end up in long revision cycles and messing up with the code quality in the process. Instead, it’s efficient to discuss, deliberate and get approvals on you high-fidelity mockups first. Then code the designs afterward. It can also help you in preparing more accurate time and cost estimates for overall development.

Also, PSD to HTML workflow enables you to have separate profiles for designers and front-end developers. This frees your creative design team to handle the creative aspect of the project, while your front-end team takes care of all the nitty-gritty of making code work on web browsers and devices perfectly.

Conclusion

So is PSD to HTML dead?

Scrapping PSD to HTML workflow can lead to efficiency, quality and scaling issues.

But there is a genuine concern that designers have which puts them in dilemma of scrapping PSD to HTML process. Here is another quote from Paul Boag’s – The Imposter Episode:

I get it into HTML and CSS and I can look at it on my phone or look at it on an iPad or where ever, adjust the typographic’s scale and do all that kind of stuff I need to do.

The problem designers have is that they need to see how their designs look and feel in a real web browser or a device as they design for various reasons. This problem can be solved by many innovative ways rather than hacking your way through the design process.

There are now many promising tools, for example, Sketch or Macaw, both these tools allow you to draw your designs like you do in a graphic tool like Adobe Photoshop however, at the same time you can you can auto-generate code which can be used to quickly see your design in real browser or device.  Then hand it over to a front-end developer and he/she can actually do the proper stuff that hits the client’s browser.

So instead of expressing our condolences, let’s end with a more positive message – the PSD to HTML workflow is not dead, like anything else it evolves and adapts to current designers and developers needs and towards more automation.

Sketch to HTML – A new UI/UX Design Workflow

Sketch is a powerful designing application that runs on Mac system. Due to its features focused on UI/UX design, it is gaining more and more popularity among designers as an alternative to Photoshop. This has also resulted in a new workflow for front-end developers – Sketch to HTML.

Why Sketch?

From ancient times designers have been stuck with Adobe Photoshop for designing websites. Even though it offers very little features to help in UI/UX design it has been go to app for the task. On the other has Sketch offers a lot many tools and features a modern day UI/US design demand. And all of it comes in a light-weight package for a price which is a fraction of the long-term Adobe Photoshop subscription costs.

Why I Moved To Sketch – This article should convince you enough to switch to Sketch for your next project.

Switching to Sketch

Here are list of articles that will help you to make a switch from Photoshop to Sketch:

  1. Making The Switch
  2. How To Mock-up Website In Sketch
  3. Using Sketch For Responsive Web Design (A Case Study)

Sketch to HTML

Sketch is not only useful for designers but also very useful for front-end developers. The workflow of converting designs into HTML/CSS code becomes even more precise and faster. This is especially true if the designs made in Sketch includes responsive variants.

Due to all this these benefits there is an increase in demand for Sketch to HTML services. And our team has been the first one offering this workflow.

If you love designing in Sketch, but have no time to code your designs? Let our experienced developers handle the HTML, CSS and JavaScript needed to bring your designs to life.

Just deliver us your Sketch designs and we will convert them to modern HTML5 / CSS3 templates using the latest industry standards and best practices.

10 Best Web Design Blogs To Follow in 2016-2017

As a web designer, knowing where to look online for all the best news, tips, tools, freebies, tutorials and other useful resources is pretty important. We’ve collected some of the best web design blogs around for you. Now go grab a cup of coffee and enjoy reading. In no particular order, here are 10 must-read blogs for web designers.

1. SmashingMagazine

smashingmagazine-web-design-blogs

Smashing Magazine has been around since 2006, and the depth and breadth of their blog reflects it. Coding, design, mobile, graphics, UX Design, WordPress… it’s all here!

For designers that want to go in-depth, this is a phenomenal resource.

2. Codrops

codrops

If you are a front-end developer or web designer, you’ll find a lot of useful tutorials and code snippets on Codrops. Furthermore, Codrops also discusses more general topics of web design and how the role of a web designer has evolved over the years.

3. Webdesign tuts+

tuts

If you want to keep up with the latest in web design, you have to be willing to study and learn on an ongoing basis.

At Tuts+, you will find tutorials on a variety of topics, from creating WordPress themes, to introducing new CSS elements to your site.

If you want to stay on top of your game, there’s plenty for you to sink your teeth into at Tuts+.

4. Hongkiat

hongkiat

There probably aren’t too many web designers who haven’t at least heard of Hongkiat, as their articles tend to rank pretty high in Google.

If you can name a topic, you can probably find it here. Plus, there are viewpoints offered by a variety of different contributors.

Hongkiat continues to remain a vital blog for web designers.

5. CSS Tricks

css-tricks

CSS-Tricks is a web design & development blog by Chris Coyier. Back when it launched in 2007, CSS-Tricks was all about just what its name suggested – CSS. Today, however, it has since expanded to include all topics related to web design and web development.

Besides interesting design articles and videos, you’ll also find code snippets, an almanac and a web design forum there. It’s definitely a great resource for web designers and front-end developers

6. Design Shack

design-shack

Design Shack features both a gallery as well as a blog, covering topics such as business, CSS, graphics, HTML, navigation, typography, and a lot more.

In short, at Design Shack, you can learn something from the blog, and you can take some inspiration from the gallery. It’s the best of both worlds.

7. Creative Bloq

creative-bloq

Creative Bloq is a blog that discusses topics such as graphic and web design, 3D, digital art, typography, illustration, and more.

Plus, there’s more than just articles. You can also find opinion pieces, videos and interviews that take a deep dive into the industry.

8. Web Designer Depot

web-designer-depot

Web Designer Depot’s goal is to share only the best and latest discoveries, tips and techniques in web design and development while also covering the business side of design work, mobile apps and working as a freelancer.

Given that it’s quickly grown to become one of the web’s most popular design blogs, you can find all sorts of great, in-depth articles and tutorials on almost anything.

9. SpeckyBoy Design Magazine

speckyboy

Speckyboy was launched in October 2007 as the personal freelance web design homepage of Paul Andrew, located in Scotland. Somewhere along the way, Speckyboy became one of the most influential design blogs on the Internet, receiving around 1.9 million page views each month.

Speckyboy offers insightful tutorials, time saving techniques, fresh and useful resources and inspirational art, covering web design and development, graphic design, advertising, mobile applications and even the occasional Lego post.

10. InvisionApp Blog

Invision is a great prototyping, collaboration & workflow platform for web designers. And there blog offers some great insights for web designers. Topics range from modern UI/UX Design, Design Inspirations, Productivity to Web Design Business Development.

Conclusion

Make learning a regular part of your ongoing efforts. There’s no way you can know it all, but if you make studying a habit, you’ll always be growing as a designer, and that’s what it takes to stay ahead of the competition.

The trends online are constantly changing, so don’t get left behind. Keep up-to-date by visiting the previously mentioned blogs on a regular basis.

And that’s a wrap! It definitely isn’t always easy to find the best or most up to date information on web design topics, but the above list of best web design blogs can help solve that problem as you move forward with your work in the new year.

Which blogs from this list do you love the most and are there any others you think deserve a spot on this best web design blogs list? Share your thoughts via the comments section below!