Web Page Designing tools

February 11, 2016
Responsive Email Designer

Even though I learned about designing for the web in what most would consider the modern era, I still learned (what I would consider) the old way of doing things. No, I’ve never made a table-based site, but I learned how to build a site without all of today’s CSS techniques. I remember slicing gradient images into repeatable, 1-pixel-wide background images, I remember how annoying it was to make a scalable container with rounded corners, and I remember adding classes of even and odd to list items and table rows.

I learned the ways of Photoshop, Illustrator, and other Creative Suite applications, but I had no set processes or preferences early on—I was bias-free, and nothing was sacred. There’s no arguing that the Creative Suite applications are powerful, feature-rich, and have the intangible value of being industry standards—the PSD format is almost as universal as PDF—but, they just didn’t feel like the right tool for the job, especially to someone who was new to it all.

As browsers became more advanced and rendering shifted from images to native CSS, the old, established applications fell out of step. A weird divide grew between how things were done in Photoshop and how they were implemented in code. The time was ripe for an application that was built, from the ground up, focused on the new era of interface design. And that’s when I found Sketch.

Navigating around Sketch is a breeze, and it doesn’t stop at the interface. Documents are broken down into pages, and pages are broken down into artboards. With an unlimited number of each, there’s a lot of flexibility to be had. There’s no right or wrong way to use pages and artboards, so bend them to fit your process.

I’ve created Sketch pages to match each site page, with artboards to show responsive states. I’ve created pattern library pages, with artboards for things like type styles, control elements, and other general styles. I’ve made pages for icon sets, with an artboard for each individual icon. I find navigating through pages and artboards is a lot easier than opening multiple files and dealing with somewhat strange naming conventions.

Back in the days of slicing designs, one size and format of each image would do just fine. But today, it’s not uncommon to have multiple sizes and formats of each image asset to support different viewport sizes and display pixel densities. Though we’re using images for less, exporting has become much more complex, tedious, and important.

Sketch is built with a modern workflow in mind. Every single object and artboard in a document can be made exportable, and configured with multiple export rules. For each rule you can set a specific size, filename suffix, and image format. Sketch Export Rules My most frequently used export rules: high-PPI-ready and standard-sized PNGs, as well as SVGs for supporting browsers.

Exporting assets is generally time-intensive, and future updates require a complete re-export. Once export rules have been set up in Sketch, all assets (or a chosen subset of assets) can be exported, formatted, and renamed with one click.

There are a ton of workflow improvements to be discovered in Sketch—things like global text and layer styles, reusable elements, square and layout grids, iOS mirroring, and a powerful third-party plugin system (my favorite of which is this content generator plugin).

Free Web Design Tools
Free Web Design Tools
Tutorial: MAGIX Xara Web Designer 6 - Text tool (EN)
Tutorial: MAGIX Xara Web Designer 6 - Text tool (EN)
Tech-Review: Artisteer 2 (Web Design Tool)
Tech-Review: Artisteer 2 (Web Design Tool)
Share this Post