If you’ve ever built a website for your business, you’ve likely worked with a designer who took your ideas and created a (hopefully) beautiful design. If it’s been a few years since that project, you’re probably familiar with the process of design composition done in Photoshop. Your designer took your requirements, spent a few weeks conceptualizing, and then presented you with static images of what the site will look like. Wow! What your designer did took immense skill and time. It's magic!
While Photoshop still plays a very important role in the design process, new programs have largely replaced the need to design web sites and applications in Photoshop. These new tools have improved the quality, speed, and collaboration that takes place in web design. In this blog we will explore these new tools and the role Photoshop still plays.
Photoshop’s Impact on Design
Photoshop has long been known as the gold standard design tool. A part of Adobe’s suite of tools, Photoshop, along with Illustrator, allows designers to conceptualize intricate designs. Photoshop features a seemingly endless number of tools and techniques to complete a design. It’s a true workhorse based around photo manipulation and editing. Beyond photo editing, other features within Photoshop allows a designer to add in text, shapes, and other illustrative graphics. The more a designer learns about the Photoshop the more techniques they have their disposal. It’s a true craft that require a lot of trial-and-error, reviewing tutorials, or taking formal classes.
Photoshop does almost everything a designer needs but not necessarily efficiently. Because Photoshop is so powerful, it eats up a lot of computer resources. It’s truly meant for photo editing which is graphics intensive. So when doing a graphics based design, it can become tedious. Every process takes a few extra seconds which adds up when you’re designing over the course of a whole work day.
A New Class of Programs
The efficiency gap of Photoshop has given way to a new set of tools that are centered around web design and not photo editing. Programs like Adobe XD, Figma, Sketch, and InVision are classified as prototyping software. Most site and apps these days are light on photos so it doesn’t make sense to design as much in Photoshop. These prototyping programs allow designers to create apps and sites at a much more rapid pace without giving up any design standards. Any photos that need to be manipulated can still be edited in Photoshop and then brought into a designer’s prototyping software.
At Alliance Systems, our preferred prototyping software is Figma, but XD and InVision also great choices and have similar toolboxes. Because they are meant for app and site design, a lot of features are tailored to a digital experience. Setting up grids, reusable components, and interactions are easily done.
Figma, and its easy usability, has allowed Alliance Systems designers to work faster. The intuitive tools lets us get pixel perfect designs that can be delivered to the development team for building. Designs are now more consistent and we can think through every micro-interaction like rollovers and validation states without adding production hours.
Prototyping Adds a New Design Layer
With Photoshop, the end result is a flat image that can be viewed by the client or user. It’s not clickable and showing any type of interactions means another flat image. With a program like Figma, we can build an app that simulates actual mobile transitions. We can design how the navigation flies in, how panels transition as you swipe, and what the page does when the mobile keyboard is activated. It’s incredibly powerful.
Prototyping in Figma has taken our design process to another level. We can now test beyond the aesthetics. We can show a client how their application will actually work. It’s not working code but feels like it. This allows us to quickly test concepts and obtain feedback.
Here is an example of one our prototypes. Click on the panel to see the activated touch points. And read about our SmartSitter case study here.
By doing interaction testing in the design phase, applications become much more user friendly and refined. Getting your application prototype in the hand of potential end-users allows the design team to check their work against User Experience and User Interface standards. The feedback received from users identifies strengths and weaknesses of the design that can be applied in other spots or adjusted.
It is more efficient (time and cost) for the design team to refine their prototypes than it is for the development to rewrite code. Without prototyping, test users are limited in looking at static images so key feedback may be missed until the actual app launches. Reworking code is more costly and can be a big setup back for a startup or company.
Prototyping programs are exploding in popularity and are add valuable features on a consistent basis. Figma is now a staple for our entire team. With it’s collaboration tools, us designers can now hand off functional prototypes to the development team for implementation. In my next blog, I will discuss how we use these collaborative features of Figma and supports our integrated, design-first methodology across the entire company.