UI/UX approach, tools and resources for web and app design | Perpetuum Mobile

UI/UX approach, tools and resources for web and app design

Zvonimir Dimovski UX

UI/UX design is without doubt an important part of a website or application development, therefore choosing the right tools and resources can greatly optimize both workflow and speed up design processes without compromising quality itself.

If you failed to plan, you better plan to fail

Every design process starts with planning. We are building a product that has a lot of moving parts that need to be synchronized in order to produce a successful result. By successful in designer's words it's meant that the set of resources as product of design process, should be well documented, client approved and ready for developers to ensure an easier implementation.

In this blog piece, I am going to mention various tools that can be helpful in design processes. Additionally, I am going to put an emphasis on tools and methods that I personally use in my own design process.

Wireframing

 

Wireframing

After designers get all necessary information about the product that needs to be built (website or app), the process usually starts with wireframing because it represents the fastest and easiest way to answer to potential change requests from client’s or developer’s  side. It also gives an insight into the product’s shape.

Pen-and-paper

This is one of the oldest, easiest and my favorite way to create a structured prototype that does not require any special learning curve (maybe a little bit of practice in drawing narrow lines and shapes). In a few hours, it is possible to produce a complete mock-up that can be subject of discussion among all parties included in product development.

Other tools worth considering:

Balsamic Mock-ups – a fairly popular desktop application for building prototypes/mock-ups for Mac OS and Windows. 

Moqups - online tool for prototype building. It doesn’t require installation, designed to use online.

UI / Web design

 

UI

There is a plethora of available tools to get the job done. However, none of them are perfect and it is up to each designer to find the best fit for its workflow. 

Photoshop

(pricing model for CC version «some_mount_of_$» per month/year, pricing model differs to buyer's country – 29.99$/mo for US buyers)

A well known and, some say, ultimate tool for web / UI design, Photoshop is still the most used tool among designers due to its long lasting popularity.

Make my logo bigger and I want PSDs...

Often, designers have to cope with expectations consisting in delivering finished designs in Photoshop file format (PSD). Therefore, lots of designers are forced to use Photoshop even if they have, or maybe think they do, better options for a design process.

One of the cons for using Photoshop is the product’s pricing model. It makes people think twice (or even thrice ☺) about purchasing and using the tool.

The next con (where does it end?) would regard working with vectors that is still a bit squishy. You can use vector tools in Photoshop, but exporting vectors will not create a «true» vector. 

However, not everything is grey ☺ Photoshop evolved enormously. I used CS6 and other previous versions of Photoshop for a long time and after upgrading to CC 2017, my life became much easier thanks to different features like Artboards and quick measurements for relations between layers. Photo-editing tools and color management is still the best among everything I’ve seen so far.

Since I’ve been someone who used Photoshop for a long time, I’m glad to witness the tool’s evolution and the fact that it still remains a viable contender in web/app design.

Sketch
 

(99$  / + 1year of free updates)

I've been a Photoshop user for a long time, a decade or more, I’d say. After trying out Sketch, it was everything I ever wanted to be included in Photoshop.

1. Everything is a vector – and it works like a charm even though they didn’t exclude pixel awareness. It is possible, for example, to set a pixel grid and combine it with raster graphics, which makes it perfect for website design.

2. Creating grids in built-in system. Everyone knows that grids are essential for web design. In a few minutes, it is possible to create custom grids with multiple columns and custom gutter size.

3. Font representation is really good and it is near to what it would look like on a real website or mobile app.

4. Exporting resources in @1x, @2x or @3x for Retina like high density displays is fast and easy 

It would not be fair not to mention a few cons though:

1. It is only for Mac users

2. In the previous version there were some minor bugs and application reliability was compromised

3. Color management (not as good as in Photoshop)

Look no further, with addition of fair pricing, speed, features and minor cons, Sketch is a complete tool for web/app design.

Other tools worth considering:
 

Adobe Illustrator – Although I am an Illustrator noob, from what I can read on forums and social networks, people generally say that Illustrator is a good tool for web/app design

Adobe XD - a direct Sketch competitor that works on both on Mac as well as on Windows, which makes it worth considering. Adobe XD is integrated better with other Adobe tools.

Adobe Fireworks – a really good tool for web/app design (what actually Photoshop should be). However, it is not recognized on the market in order to be able to deploy its full potential.

Collaboration 

 

Collab

Web/app design is not a walk in the park, so collaboration between designers, development team and client is a necessary part to keep the project on the right track. 

InVision

An interactive online tool for design collaboration, from uploading files, sharing and communing with all parties included in project to design-driven project management.

UXPin

A full stack UX design platform that includes powerful design prototyping, built-in interactions and animations. Also, as InVision, UXPin have communication/commenting system.

It is worth mentioning that both InVision and UXpin have the ability to sync Photoshop or Sketch files.

Zeplin

Like InVision or UXpin, Zeplin has similar functionalities, it disposes however of a certain number of limited communication abilities, but it is very well integrated with Slack. Where Zeplin shines, is the ability to create style guides making it possible to developers to bring designer's idea to life in a easier way.

Conclusion

As stated above, there are plenty of tools to ensure design process, workflow and communication run smoothly by assuring the creation of the final product. 

I haven't mentioned all the available tools but rather scratched the surface. If you however decide to go with one of the mentioned tools, you won’t regret it.