Design

What We Use To Design Your Website

12/06/2020

What We Use To Design Your Website (P.S. It’s Not With Photoshop)

Yes, you heard that right, no Photoshop here (sorry Adobe). So how exactly do we design your website at WDL, what do our designers use to bring your project to life

Web design software has come a long way in the last few years, with more programs than you can shake a stick at and a lot of them are very good indeed. Which made choosing a piece of software that would improve our work, even more challenging.

Several years ago now I noticed lots of articles that were saying “Are You Still Using Photoshop?”, “Photoshop Isn’t Made For Designing Websites” and initially I just ignored them and kept on my merry way, using Photoshop. Yet I kept seeing these articles on the design sites I frequented, so finally took the time to read them, to see what all the fuss was about. After reading the feature lists and watching several videos, I was convinced enough to hit the big old download button to start my free trial.

Once installed I was expecting my design life to be transformed, I was picturing it in my head, amazing designs coming out effortlessly and in no time at all. Instead, I was greeted with a stark and plain interface, which left me thinking this is pretty basic and more like Microsoft Paint from back in the day. Where had all my options, toolbars and palettes gone? I could hear myself screaming for Photoshop to take me back, but through gritted teeth, I persisted and put pen to paper, well mouse to screen to see what I could create.

I played around with the tools and a few of the features, what there was of them and got to a point where I had created something that resembled a design, although I wasn’t satisfied with the results, it just felt too basic, like a wireframe. Next, I moved on to a mobile version of the design, as I thought simplicity works well on mobile, yet I was still underwhelmed, the design lacked my normal polish.

The interface was easy to use and navigate and I knew there would be a learning curve, however, I just found the software too basic and not for me, so the app found the digital trash can, expecting to never be seen again.

But it’s funny how things manage to come back into your life, by chance I came across a really nice template file for the program and decided to just download it. So after a few minutes of rooting through the trash to find the installer, I had the program up and running and who’d of thought it, staring me in the face, was a really detailed design with all the polish I was used to. I’m so glad I downloaded the file, as it allowed me to see how this detailed design had been made up and how the capabilities of the software really worked. By seeing all the different layers and how they functioned started my love affair with a piece of software called Sketch www.sketch.com, which is now used to great effect by our design team.

What Our Designers Love About Sketch

 

So what do our designers love most about working with Sketch? Firstly it’s the interface, as I said earlier it reminds me of Microsoft Paint, but in a good way. Once you get to know the app, the user interface is just so clean and simple, bringing the most commonly used tools to the front. Once you click on an object you’re presented with a set of features just for that object, so you only see what you need when you actually need it. No need to have lots of toolbars open all the time, I’m looking at you Photoshop.

Artboards, lots of artboards. These are essentially just pages, but Sketch allows you to have many pages all in one document all at different sizes, this is a massive time saver as we can have the designs for desktop, tablet and mobile all in the same document, making copying elements between the pages so much easier than having to have multiple pages open at the same time, your computer also thanks you for this.

Plugins, glorious plugins, these just used to be reserved for developers however Sketch has a plugin library for us designers too. With all sorts of useful tools to help improve our designs and speed up our processes, everything from grid and layout guides, to responsive button tools, through to animation tools and basic web builders. My personal favourites being 2 of the most simple, yet used every time I’m in Sketch, these are Artboard Manager and Button.

Symbols, these are one of the most amazing things in Sketch, allowing us to create lots of universal elements that are used regularly on a website. Elements such as headers, footers, buttons, menu’s, forms and icons can be created and edited all in one place. What this means is, if a menu item needs to be added to the menu we can do it in one place and it updates across all the pages in your design, this one is a real lifesaver. I’d say this is Sketch’s killer feature and is amazing when you are creating large-scale design systems for a large website. Where you need to create a library of elements rather than page designs, this means that new pages can be quickly prototyped by using the library of elements you have created (aka symbols in Sketch).

Great resources and community to call on. One of the great things about Sketch is the number of resources there are to speed up your design processes, responsive icons and logos, social media templates, Gmail mockups perfect for designing email signatures, Youtube video players, menu elements, devices to help present your design and basically most things you can think of, if not you can probably create it and share with fellow Sketchers.

Being able to share your work with colleagues and clients effortlessly. In Sketch there’s a really cool feature called Sketch Cloud that allows you to upload your designs, to easily share them with your team and perfect for presenting and sharing your design with clients. Especially as it creates a link that just opens in your browser, great for giving you a real idea of what the site will actually look like in context inside a browser interface.

Lightweight, yep Sketch is a real lightweight, well in the file size department. Another great feature about Sketch is its small file size, you can have a large website design with multiple layers and pages and it might only take up a couple of hundred megabytes, now do that in photoshop and you’re looking at gigabytes instead. Which is a real pain when you want to try and share the design files with your team or client, another pain taken away by Sketch. Another benefit of the program’s lightweight size is that you don’t need a powerful computer to run it, so Sketch will happily run on older and less powerful machines, which is great especially as Sketch is so affordable in the first place too, but for Macs only at this stage.

Finally and probably the most important factor, it’s just plain nice to design in. It’s the combination of a simple interface with a lot of hidden depth and capability when you need it. We find we can use Sketch for everything from basic wireframing to test out layout ideas, to working prototypes on large-scale websites and for a predominantly digital program, it can be pretty useful for the odd print-based file too.

So you can safely say with just a few of favourite features, we are converts to Sketch and have been happily using the app for several years now in the design department and would recommend it to anyone. But with so many great options out there could we be due for a change soon? Well, I have tried a couple of other apps, so watch this space…

What happened to your love for Photoshop? I know there’s been the odd jibe against Photoshop in this article, but rest assured we haven’t fallen out of love with Photoshop. Where Sketch has taken over for the design and layout, we now use Photoshop to add the wow factor to our images. Where photos need to be adjusted or cut-out, we turn to Photoshop to do what it’s best at, editing photos, and that’s why we use Sketch for the design and layout because that is what it’s best at. By using them together we now have an extremely powerful set of tools to create amazing websites.