With technological advances changing not only the tools we use to create a website but also how users access it, it is essential that web designers adapt their approach and choice of software to stay up to date with these changes.
For many web designers (including everyone at Square Balloon), Photoshop has long been their “go-to” piece of software for image editing. Full of tools to build graphics from scratch, Photoshop is fantastic for manipulating imagery and constructing graphic layouts, which at a time when web browsers were incapable of directly generating these kinds of effects themselves, was the perfect solution for visuals and demonstrating design concepts. However, with recent advancements in technology, Photoshop has seen its role changing with the emergence of other pieces of software that are taking its place in the web designers toolbox. In this article we discuss some of the tools we use for the graphical side of web design.
Thanks to the spread of mobile devices, the web has well and truly gone global, forcing us to notice that we can no longer 100% guarantee how content is being accessed. From 'phablets' to tablets there is a huge variety in screen sizes and processor speeds, meaning today's web designers have to ensure their designs are optimised for a huge variety of devices.
Often clients will have a strong image in mind of what they expect their website to look like, wanting to use a whole host of visuals to demonstrate their product/company. What many won’t realise is performance is just as important in creating a strong, user-friendly website and design. Too many assets will effect how your site loads and is viewed, which directly effect user experience. With this in mind, it’s best to strategically pick fewer key images, optimising them to be as small as possible. If you focus on what actually converts for your audience when they visit your site, something we pride ourselves on at Square Balloon, you can make sure any visitors to your website don’t bounce straight off it.
Photoshop’s smart layering allows you to be flexible with future client amendments without having to recreate images from scratch. Consider, however, if you can achieve some of the Photoshop effects with CSS which would potentially reduce the sizes load times. And for not photographic elements, consider the implementation of vector graphics or SVGs using other tools such as Illustrator. Don’t be afraid to mix software!
As can be seen here, using a combination of Photoshop and InDesign, the colour of the gradient on the image is easily changed to suit the style of the page and then added to the final template:
Another example to help further explain: If you choose to use Illustrator instead of Photoshop to create a logo or graphic your finished product will be a vector object that isn’t a bitmap. The advantage of this is a vector object, unlike a Photoshop bitmap graphic, won’t lose quality or pixelate when resized or reshaped. This is ideal in website design as often graphics need to fit a variety of sizes depending on the user's screen size (mobile vs desktop). Vectors can be used in a variety of ways across your site and this ensures you won’t have to continuously have to recreate it in Photoshop to prevent it losing any quality or pixelation issues. So when Illustrator is combined with Photoshop or other free alternatives such as gimp.org or getpaint.net, your web design process and workflow will be a lot faster and you’ll have a more consistent design. After all, as we move to responsive and agile sites, reusable graphics that maintain consistency is a must!
So remember, when designing your site and considering your tools, during the planning stages decide what information and content you’ll need and the relationships between the areas of the website. This will help to work out what can support each process and how one will affect the other to avoid what could potentially be a complete mess for your users. For any designer, the process is personal and based on preference, but nobody wants to waste man-hours, which could be resolved at a click of a button…or two.