Tools for designers - Breakfast Briefing

Editor's Notes

1. Welcome
2. We are the ux design team. About 30-40 mins We joked initially that we could talk about grid paper and certain pens, but want to confirmed that we’re looking at digital software and tools. I hope that doesn’t disappoint anyone here! This is aimed at all levels so hopefully you find something that helps you in your day to day. We’ve got a lot of stuff to cover today and we’ll leave time for questions at the end of the session.
3.  We’re going to cover tools for interface design, tools that are worth keeping an eye on and also other tools you should have in your toolkit .  We’ll also software for designing at scale  We’re not here to sell you a particular tool or way of working, and as a consultancy we see much variation in terms of design workflow between our clients, even here in Edinburgh. But would like to cover some of the things we think are most useful. New year new you, so you may be looking to upskill and learn new tools – anyone in that boat??? Before that heres some words of wisdom if you are considering evaluating some new tool, 
4. I’d like to introduce the concept of tool time vs goal. Coined by Jared spool, who many of you may know. It is suggested as a metric for your own product but it’s useful for designers to evaluate software for use. Explained simply the quote:
5. “quote” What we’re saying with this is: consider If the time spent learning a new tool will increase the quality of your output. And make sure anything you are trying doesn’t increase the time to complete tasks you carry out regularly. Whats we’ve seen recently is a huge increase in choice and availability of tools, but actually – they all have very high quality and somewhat generic websites that it can be difficult to understand what is and isn’t different. Heres a few examples we have redacted that show how similar sites seem to look nowadays– its basically down to two designs.
6. Tend to be of one of two designs
7. Not even getting to see the interface now
8. Okay – so you should get the jist. Lots of tools are out there. But which one is the best?
9. There is no magic bullet tool Unfortunately! But if we had to make a recommendation, we would ask you this question first:
10. As  a team or organisation its important to know what your goal is, when picking the right software.  So whats the most important thing for your team when choosing a tool?
11. Are you looking at a redesign, and screen design is most important? Or are you testing new interactions and need to focus on creating prototypes? Another consideration is collaboration, how many people need to see work in progress and be involved with designs at this stage? Are the team not co-located? And will investing in learning a new tool be worthwhile? Goal time/tool time…. There isn’t anything that sits perfectly balanced at the centre of this diagram (and if it did, I doubt it would it been any good) There are some in the overlap areas and Marks going to take you through some of the solutions we recommend and what teams or situations they work best in. 
12. This is the best software.
13. Designing at scale doesn’t necessarily mean hundred of non-co-located designers working on your brand. Even as low as 4 designers or users of visual design can lead to issues with consistency which could lead to confusion of your users.  If you’re at a stage where designs are not aligned across all platforms and systems, you may wish to consider establishing processes to make it easy. Not going into a full discussion on design ops today - just a few software recommendations. 
14. One thing to consider is version control.  A concept familiar to developers. Developers often used to working on a shared product that is your code base and is a single source of truth (refer to this as master).   Let me try explain roughly how it works
15. Okay you start with a file and you make some changes - A history of a file is stored - we call this the master. Any previous versions are shown here. And you can revert back to them if needed. if a designer needs to make a change they create what we call a branch
16. The branch is a separate version of the file that you can work on without making changes to the master. If you’re happy with the changes you can “merge” the file back to master
17. Usually accompanied with notes on what changes have been made and then everyone can use the updated file. Files store centrally so you don’t need to worry about who has the sketch file etc. The idea behind this is it gives visibility and prevents unfortunate overwrite of work if working from the same sketch file. That’s a rough overview:
18. The tool called Abstract does this well and is a good way of sharing your sketch files and libraries amongst the team.  Also shows who has made changes and allows you to share changes to designs with developers.
19. Anyone using one or working on one currently? Anyone not familiar with this term?
20. Simply put, a design system, is a one stop shop for everything you need when designing and developing your product. This covers the styling (fonts colours etc), components and patterns, and often also includes principles and rules.  The idea with this is to make it easy for designers to build without having to start from scratch everytime. For maintaining consistency its important that principles or rules for use are included so that team members old and new know when it is appropriate to use certain components or styling.  What does a good one look like?
21. Google share their material design (design system) publicly so that you can apply the native material design correctly when designing android apps, but is also a popular framework for web as you don’t have to reinvent the wheel, it works well and is tested for usability and accessibility. 
22.  If you’re looking to create your own, check out Spotifys design blog. They have done a huge amount on designing at scale and is a great resource. 
23. For anyone using Invision, there is an additional tool called DSM. Free for a basic version. DSM allows you to build a searchable database of components and you can interact with it directly through sketch. A web based style guide is automatically created as you add to it. It also stores a history of components, so you can see when it has been changed and by whom. 
24. Lets quickly recaps before jumping to questions (slides you want to get pictures of)
25. Best flagships for specific reasons