Learn by doing, help by sharing.

When designing a website for the web there are many programs that can help with designing the visuals, such as Photoshop, Illustrator, Sketch 3 and Adobe Muse to name a few. These are the programs that I know and have used, but the main program that developers prefer designers to use is Photoshop. Now there are many reasons for this, such as personal preference, the way it exports files in pixel format for web, or how layers can be moved with ease and grouped together for each section. For a program that has a feature for any occasion, Photoshop really delivers with performance and the amount of effects and tools that are at your disposal. A program that developers dislike is Illustrator. As it is a vector based program it does allow you to design icons, logos and custom shapes with the ease that Photoshop can’t. But when exporting these images, Illustrator isn’t able to save the files in perfect pixel format to what Photoshop can produce. Illustrator is also used to quickly mock up design layouts with quick and easy placements of shapes and text. This program is the one I prefer to use for these techniques. One program that is evolving is Sketch 3. It has been used by all the large corporate brands such as Apple, Google, Twitter and Dropbox to name a few and is set to replace Photoshop & Illustrator for web design in the future. This program may not have as many features as Photoshop or Illustrator but it can certainly deliver when you need to design something. The idea of incorporating all the main features from these two programs (such as the clipping mask, pathfinder, layering and vector shapes), is what really makes this program stand out from the norm. Sketch 3 is slowly becoming the program to use for designing visual artwork for websites and apps. What makes the program so unique over its rivals is just how easy it is to use. Also, many shortcuts have been taken from Photoshop and Illustrator so you feel familiar with the software. The feel of it seems a lot simpler but you have more than enough tools to get the job done. Since Photoshop is a photo based program it does feature advanced photo editing tools that are not essential when constructing the building blocks of a website. Really, it is only useful if an image needs to be edited, but a simple photo editing software will suffice. Perspective Tool. One feature that both Photoshop and Sketch 3 have in common is the Perspective tool. It allows you to distort an image in a certain way out of the restrictions of simple resizing. One little snag is that Photoshop can currently do this much better than Sketch 3 by being able to add perspective easily by just simply clicking and dragging any corner or side. Sketch only allows you to add perspective to a vector image and not a picture. This tool comes in handy when you are designing an app or website and you want to place it in a computer or phone at a particular angle. UI Elements. Say you want to design an app and you need the UI elements to place within your design, you would have to search the internet looking for the right UI element that will work with Photoshop or find a version for Illustrator and then drag it across. This can be very tedious and time-consuming. But with Sketch 3 you just select your IOS Template and you have an elements page build in. Then you can just simply copy and paste them over without having to search the web. If you need something specific, there is a website full of resources called Sketch App. You’ll find everything that you ever need, from plugins and tutorials to UI elements created by members of the community that really do aid in your work flow. One great example of this is the UI Kit designed by Teehan+Lax who have drawn in extensive detail the iOS 7 UI for both iPhone and iPad. Artboards. A feature that really helps with your work flow is the use of artboards, a feature that is only used within Illustrator. With this, you can duplicate everything that is on one artboard to another, or just create a blank one. This function is a faster way of working as you are able to see, at a glance, the structure of your work from beginning to end whilst also making it easier to separate aspects of your work around your workspace. Did I mention that you can also place artwork outside of any artboard? When you compare this to Photoshop you would have to open multiple documents at once which can consume valuable resources and makes Sketch 3 the ideal choice for me when working on any design project related to IOS or website designing. Quick Exporting. A part of the design process is importing pictures, vectors etc… and this is what builds your work. Sometime you might want to use that imported object for something else – maybe sending to a friend or on another project. With Sketch 3, you can just drag the layer from the program to the desktop and it will be exported as an image file to be used again and again. This is a great feature that saves time for me. Rather than cropping it or placing it in its own artboard and then exporting, I am able to just simply drag the layer from the program. For me this is a great asset to have and can save me valuable when I am on a tight deadline. Guides & Grids. One thing that I always use is Guides and Design Grids when designing. This is so I can ensure that that everything I design is placed in line and all of the space is being used to its full potential. This way, my design will flow the way that I want it to. Whenever I design something in Photoshop or Illustrator I have to open a document that I made earlier with grids and guides and then use that as a starting point, or if I want to use a different size then I have to change all of the guides and grids manually. In Sketch 3, with just 3 clicks I can have a grid that is made to my size and can be adjusted automatically with no need to manually move the guides when I change a setting. Sketch 3 has a lot of great features, some that Photoshop and Illustrator lacks (and vice versa). Although each program has its own strengths and weaknesses, if I were to choose the one I prefer, it would have to be Sketch 3, purely because the tools are not complicated and it can power through any task with ease. If I were to design something other than websites and UI design then I might use Illustrator and leave Photoshop for editing images and using the Perspective tool. •Picture from Shlyapnikova on Devian Art*

Design trends to look out for in 2015

Pathfinder, the shape tool we all know and love, improved in Sketch 3.

What makes Sketch 3 different to Photoshop & Illustrator?

We solve problems and achieve goals.

It all starts with a chat