Less Photoshop, More Code

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

What is one of the biggest mistakes in web design? Photoshop, as the leading creative tool! I am very glad that with the advent of responsive web design, a general opinion is starting to spread that Photoshop should not play a significant part in web design. I certainly hope that PSD to HTML coding will soon end up in a museum, right next to a floppy disk.

How does this relate to CSS3? Somewhat like Tom to Jerry. Meaning very much.

In the “dark ages”, all website graphics that were not possible to tackle using CSS were exported from Photoshop as images. CSS3 has provided a way to create not only static graphics but simple interactions as well.

If we can express something using code, it is very simple to interlink the visual parts with a browser experience. Certain attempts have already been made - take Sketch, Adobe Edge Reflow or WebFlow, for instance. They export code or parts of it and are certainly much better adapted to the needs of today’s web design in terms of workflow in that they support SVG and responsive design.

Coders really appreciate tools such as Brackets or Avocode, which address the issue from their own particular perspectives, generating parts of the code automatically from the source graphics.

We certainly cannot forget about UI libraries such as Bootstrap. Thanks to them, programmers can do without graphic designers and front-end developers.

Teams that develop their own web products have found that rather than drawing tons of screens in Photoshop, the most effective way is to create their own Bootstrap. We call this style guides. Web user interfaces and web apps in particular can be handled like a jigsaw puzzle made of separate components - or like reusable LEGO blocks, if you will.

As a front-end designer, I have had interesting experiences with designing responsive websites in a browser. However, combining HTML and CSS design using a graphic editor would force me to write a whole book on this topic. So let’s not go there.

If your team’s workflow allows you to do so, try to experiment and use one of the above-mentioned approaches.




Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more