Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Jimi Wikman
    Jimi Wikman

    Collaborate Design - Bridge the gap to development

    • Interresting 1
       (0 reviews)

    For many, many years visual designers have been working outside the workflow of IT. The way of working differ a lot from the more controlled IT deliveries, which has meant that design often comes as design drops rather than as a part of an Agile workflow. Today we have many tools that can change that, but how do you do that and what is the benefit?

    For many years visual design have been a messy affair with naming convention and external cloud storage where versions get put into a named folder structure. Sure it has been improved with tools that allow collaboration such as Figma and Invision. Handover to development have also improved with tools like Zeplin and Avocode. Still, the handover process, when it even exist, is far from streamlined and it causes quite a bit of a mess.

    Even with collaboration tools and development handover there is still no control over changes to the visual designs. Versioning, automatic or even manual is not the same as version control after all. Why is it important to be able to control versions? The reason is that in a continuous delivery situation design changes  need to be controlled and agreed upon before they are turned into code. This is especially important if you do not work in a design system or at least in an Atomic Design pattern.

    In order to fit into a continuous delivery way of working, which is where I think most companies are moving towards, we as designers need to fit into the way development work already. So how do we do that without compromising the exploratory nature of our craft? Let us first define what it is that we need to do in order to sync visual design work with development work:

    • Collaboration - We need a way to quickly get feedback on visual designs so we can adapt and adjust. This comes from stakeholders and developers so it must fit both groups.
    • Controlled deliveries - We need a way to deliver visual design in a controlled way that is not only easy to understand, but also matches the work of the developers.
    • Handover - We need a way to handover visual design to development that is easy to work with for the developers.

    Most of these are done today mostly in meetings. That is wasteful and it require a lot of time management. It also require that there are meeting spaces suitable for this work. In some cases it require that everyone is in the same location or that specific technical setups are made for external communication.

    There has to be a better solution?

    Indeed there is and it's not really that much of a pain to begin with this workflow for visual deign either. We will take advantage of the tools you most likely are already using and we will tweak the workflow a bit and add a few things that you may not use just yet. This workflow is for Sketch, but you can probably find similar way of working if you work with Adobe, Figma or the Affinity suite to mention a few alternatives.

    Atomic Design

    atomic.jpg

    The first step is to start thinking of your design the same way that the developers (hopefully) is. By organizing your visual design according to Atomic Design you will have a one to one connection to the code. This is extra useful if you are using a design system as then the design changes you make will be reflected correctly in both the visual design and the code.

    Nest your symbols following the basic structure of atomic design and you will make the developers happy as they can simply make the same changes you do on the atoms and molecules. You will also find it much easier to continuously work from the smallest entity up as it makes creating new design elements fast and easy

    Abstract

    Abstract Design Version Control

    Abstract is a great tool that allow you to work in branches, just like the development team is doing. This allow you to commit to designs for delivery, but without restricting you from exploring alternatives at the same time. This is done by having different branches where only the Master branch is actually the one that is put in production.

    The way Abstract work fit very nicely into the development workflow. This makes it much easier to collaborate on the same cadence and it ensures that only the visual design that has been agreed upon by everyone involved is being put into production.  This is done by using the approval process built into Abstract any time you want to push design to the master branch.

    The final part of abstract is the handover where the developers get an overview of the design elements that makes sense to them. Things like measurements, color codes and more are all easily accessible from Abstract. There are other tools specifically designed for this, like Zeplin and Avocode if the handover features in Abstract is not enough. For me Abstract hold all the information I need, but every team have different need.

     

    Invision DSM

    Invision DSM

    Invision DSM is a design management system and it is where the final design we push to master get placed as the one truth. Not only will this be a fully functional documentation space, but you can also work with the components directly in Sketch by drag and drop. This allow you to constantly work with the latest visual design.

    You can integrate Invision DSM with your code as well to automatically push code directly into the documentation using Storybook. If you do not have Storybook, then you can manually add code to each component in the documentation in Invision DSM. If you want to extent the developer handover you can connect Invision DSM to Invision Inspect as well.

    Invision DSM is also part of a greater package so you get access to tools like Prototype to make your designs come to life and Freehand that is a collaboration space that is kind of like a mix of sketch and a whiteboard. You also get Boards that allow you to create mood boards with ease.

     

    Jira Cloud

    Jira Cloud

    Most developers work in Jira today and most are on Jira Cloud, or on their way there.  You can connect Invision DSM to Jira directly using the Invision addon for Prototypes or by simply link directly to a section in Invision DSM. Jira will act as your task management so you can connect your design tasks directly to other tasks, such as development and test for example.

    If you are working within a SAFe organization, then design can be part of other types of work items such as SAFe epics or Features for POC work. If you are working in a smaller organization then you can get Jira Cloud for free, which is always nice.

     

    Why would you want to do this?

    What benefit would you as a designer get from changing your workflow in this way?  There are of course many benefits, but let us list the biggest reasons why making this change will have a positive effect on you and your design work.

    1. Reduce the barriers between you, stakeholders and development - By making it possible for everyone to stay on top of the design process as well as the development process in one place it becomes easier to break down the barriers that naturally are built in most cases. You reduce us and them situations and communication improve quite a bit. This allow you to become a part of the team because you work the same way as everyone else.
    2. Control the way your design turn into code - One of the worst things I know as a designer is when my design get turned into something horrible in development. This often happen when you as a designer is on the outside of the team and simply handover design. By working along side the developers and working with the same cadence as they do, it becomes much easier to maintain your design as you intended it. Using the atomic design and having a design system it becomes so much easier to make sure everything looks as intended in your design and changes can be done swiftly with minimum effort on all sides.
    3. Improve feedback to make better designs - By working in a controlled with alongside the development team and the stakeholder with tools that allow for rapid feedback and approval processes you get feedback faster. Often this feedback is also much better quality-wise as it is in the design itself and not a collection of emails or excel sheets. With fast feedback with great quality design work become faster and changes can be done almost instantly.
    4. Free up time by making information available to the developers - As a designer you spend a lot of time providing assets, color codes and information about the design. By automatically move this into a tool you can reduce that time a lot. This time can instead be spent on discussing designs with the developers to find great solutions together that are both visually appealing to the end consumer and technically easy to build and maintain.
    5. Keep everyone up to date with the design process - How may screens, videos, prototypes and power point presentations have you not made to keep different groups up to date on your design work? Having everyone in the same tools make that so much easier. The trick is just that the tools have to be useful for everyone as well, which is why so many design tools fail in that regard. Abstract and Invision DSM are different in that regard since it is useful for stakeholders and developers alike.

    If this is not enough to convince you, then as icing on the top you should know that the tools integrate with Slack as well. So you can get the best communication flow possible...

    So, what do you say, does this sound like a workflow that you would like to see expanded with more details? If so, what would you like to learn more about first?


    • Interresting 1


    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

  • Similar Content

    • By ©Jimi Wikman
      Sketch 69 is coming with:
      - Color Variables - create and apply color variables to multiple elements, change them all at once and scale your colors across a files, libraries and design systems
      - Components View - a completely new way to create and organize symbols, text styles, layer styles and color variables
      - Insert Window - quickly search for and insert everything in your libraries into your art-board in a faster more visual way.
    • By Stas Ustimenko
      In this article, we suggest you to get acquainted with the free editor of web languages - CodeLobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.
       CodeLobster IDE allows you to edit PHP, HTML, CSS, JavaScript and TypeScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.
       If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript/TypeScript code, which is contained in HTML files.
       The program includes auto-completion function, which greatly speeds up the programmer's work and eliminates the possibility of errors.
       

       
      CodeLobster IDE provides contextual help on all supported programming languages, it uses the most up to date documentation at this moment, downloading it from official sites. So we can quickly get a description of any HTML tag, CSS attribute, PHP or JavaScript/TypeScript function by pressing the F1 key.
       The built-in PHP debugger allows you to execute PHP scripts step by step, sequentially moving through the lines of code. You can assign check points, view the process of the work of loops, and monitor the values of all variables during the execution of the script.
       Other useful functions and features of the IDE:
      A pair highlighting of parentheses and tags - you will never have to count parentheses or quotation marks, the editor will take care of it. Highlighting of blocks, selection and collapsing of code snippets, bookmarks to facilitate navigation on the edited file, recognition and building of the complete structure of PHP projects - these functions ensure easy work with projects of any scale.  Support for 17 user interface languages, among them English, German, Russian, Spanish, French and others. The program works on the following operation systems: Windows 7, Windows 8, Windows 10, Mac OS, Linux, Ubuntu, Fedora, Debian.  The professional version of CodeLobster IDE provides the programmer with even more features.
      For example, you have an opportunity to work with projects on a remote server with use of the built-in FTP client. You can edit the selected files, preview the results and then synchronize the changes with the files on the hosting.
      In addition the professional version includes an extensive set of plug-ins:
      Fully implemented support for JavaScript (and TypeScript) libraries, such as jQuery, Node.js, AngularJS, AngularTS, BackboneJS, EmberJS, VueJS and MeteorJS. A large set of extensions that help to work with PHP frameworks - CakePHP, CodeIgniter, Laravel, Phalcon, Smarty, Symfony, Twig and Yii plug-ins. Plugins for working with the most popular CMS - Drupal, Joomla, Magento and WordPress. Also CodeLobster IDE has special plug-in for Bootstrap.  
      We can download and install any framework directly from the program without being distracted from the main tasks.
       In general, for a year of work, our team had no complaints against the editor. CodeLobster IDE works fast, does not hang and allows us to work even with large PHP projects.
      You can download CodeLobster IDE from the original website:
      http://www.codelobster.com/
    • By ©Jimi Wikman
      Working on multiple projects at the same time is sadly a common experience for many of us working in IT. Many split their attention on at least 2 projects or responsibility areas. This comes at a cost however, not just for the person splitting their time, but also for the people they work with.
      Few lift an eyebrow at the mention that someone is in a project for as low as 20% these days. Sadly no one really bat an eyelash when a coworker break down mentally and get sick from the mental stress either. In my line of work as an IT consultant I often see people splitting their time and I see what it cost those persons as well as the projects they are doing their best to contribute to.
      Not to long ago I witnessed a co-worker taking a seat after lunch looking pale. A faded smile and assurance that he would join soon and just needed a moment to himself was followed by an ambulance taking him to the hospital. It took him a year to come back to work. More than once have I seen people pass out in a meeting and outbursts of anger and frustration for small things happen on a regular basis by even the most gentle and kind persons.
      What could possibly cause such extreme amounts of stress? The answer is that all of these people have suffered from extreme forms of content switching. As a human we need time to focus in order to make rational decisions. As the time to focus is interrupted we experience content switching. That is that moment when you are forced to go from one focused thought to another. This change of focus comes at a cost of mental energy and eveyone need a different amount of time to make the switch mentally.
      As a manager you do this a lot as part of your work. That mental flexibility and speed that you have as a manager serve you well to manage most situations. That is because the content switching is still within one context. When you need to split your attention on multiple context however the cost will increase exponentially and with time, you will build up negative stress. If you do not reduce that stress it will eventually cause physical harm and you will hit that famous wall head first.
      Other fields in IT have the same situation, but there is one group that suffer from this more than any other group: the developers. Developers unlike most other groups are focused oriented, mening that they spend more time in their own minds setting up structures and logical flows that create the code they write. Once interrupted it takes far longer to get back to their focused state of mind. Fortunately developers are less likely to work on multiple projects at the same time, but when they do the damage is more severe than for other groups. Designers have a similar situation, but have an easier time to make the mental switch.
       
      How to mitigate and avoid getting burned out
      Speed is everything, or so they make you think. Meeting after meeting where you jump from onte topic to the next in frantic speed. As you solve issue after issue with your quick and skilled mind you will experience a sense of accomplishment. This is because your brain reward you for it and it becomes an addiction. Soon you will crave it and like a junkie you will crave your fix even when you are off work. Eventually the rewards will not measure up with the cost and you will get frustrated and eventually have problem being happy. A sense of feeling empty and caught in a endless loop is your last warning before you bend the knee to the mental exhaustion and collapse.
      The price you pay fror strecthing yourself thin benefit no one as you break down. There are things you can do however to prevent this. Both as regular practices, but also as strategies and rules you set for yourself.
      Managers, Requirements & Business people
      Make time for focused work - As a manager or if you work in the Business area the biggest danger is having long periods without proper focus. Meetings and workshops take up much of your time, so make sure you dedicate at least 1 hour every day for focused work (no, not during lunch...). This is a time where you take time to be fully alone without distractions to focus on emails, power points and whatever else you have promised to do. This will naturally lower your stress levels and allow you a form of soft reboot. If this does not work, then dedicate a longer period 1-2 days a week. This can be that you work from home one day once a week or two half days for example.
        Turn off at the end of the day - The most common mistake managers do is that they never stop working. My suggestion is that you leave the computer at work if you can, or leave it in the bag when you get home. The same goes for the phone. make sure it is turned off as soon as you leave work, or at least as soon as you get home. If you are required to be reached every hour of they day, then you are constantly on stand by and never relaxed. Not only is this bad for your health, it is actually a legal issue as well in many countries as you are working over time. Stop doing that today!
        Say no or delegate - If you get asked to split your attention between multiple areas or you feel that thet area you are in charge of is becoming difficult to manage within your normal working hours, then you should say no or delegate.  Saying no is always difficult since most managers are driven by status or to help others. It s however a very useful skill to master and it will save you a lot of stress. Just make sure you say no for the right reason and not to avoid stepping out of your comfort zone, because that is actually a good thing.

      This is very hard in some cultures and if you feel that this is impossible, then find a way within the situation you find yourself. A trick that you can try is to promote people that work for you or offer to teach someone what you do. Just make sure you make sure the person you delegate to also have their regular workload reduced or you will burn them out instead.
        Never try to lead someone that is not fully commited - Having people in your team that split their time is a cause for much frustration. No matter how much time they dedicate to your project you will never get that time because of the cost of content switching. You will also find the moments when they are not working on your project, no matter how rare they are, to be annoying and inconvenient. My advice is to never try to lead anyone who is not fully commited to your project because of this.  
      Developers & Designers
      Never split your work - There are times when you might be asked to split your work and my advice to you is to say no. No matter what split you have you will never be able to dedicate 100% time between the two. Each split will cost you a lot of time just for switching between them and the mental toll will be far worse then you think. If you split yourself 50/50 you will do 40% in each project and you will work 120%. You will constantly feel stressed and that you do not do the work you are supposed to. It will eventually break you down mentally so never accept a split work situation.
        Avoid meetings if you can - Some meetings you need to attend, but try to avoid meetings that are not necessary. The reason is that a meeting, even if it is just 30 minutes long, will completely content switch you from your work. Unlike a short interruption that cost around 10-15 minutes of lost time a meeting will cost at least double that. Some meetings may be even more disruptive causing fragmentaion of thought for hours afterwards as you try to focus on work, but have the new information or task in mind as well.
        Take time to clarify things - The biggest issue for most developers and designers is unclear requirements and unclear expectations. If you take time to clarify things, then you will save a lot of time. That is because not only will you wate time trying to find answers, you also suffer from content switching. This can make a simple question cost hours of focused work. Everyone have different need when it comes to clarity so do not rush sprint startups, requirement sessions or technical architect forums. Make sure everyone in the team understand what to do and why. This way you can focus on working without having to find answers or explain things to other members of your team.
        Agree on work environments - All teams have different compositions. Some need a lot fo focus, others less. Make sure you define wht your team needs and agree on how you will work. I have had teams that work with the hand so they just put up the hand to let you know they are busy. This way you can signal that the person have to come back later as you are deep into something right now. If that is still to disruptive then use a hat or something that indicate this before you even approach teh developer. In some cases it can be a good idea to assign a team lead or project manager to handle all outside requests to further reduce disruptions. Whatever your team need, make sure it is defined and agreed upon by everyone.  
      Test
      Insert yourself into the information flow - As testers it is sometimes difficult to know what is going on. This is because testers can be seen as an external part of the development flow. This usually means test comes in long after requirements and development planning, which is not only stupid from a quality perspective, it is also cause for frustration and stress. As testers you should sign off on all requirements and you need to be on top of development and deploys. So if you are not included in the information flows you need to be in, then make sure that you are. This way you do not need to run around looking for information or work within an isolated workflow. If you do not, then you will constantly feel stressed and frustrated.
        Agree on bug flow with developers - As testers you should not sit and verify browser compability or standard flows. These should already be well tested by the developers. If this is not the case then you will feel that you are just writing bugs all days and no development ever get past test. This is a bad situation and you should make sure there is a proper definition of done that prevent this.

      When you find a bug you often want to discuss this with a developer. Doing so is disruptive however and I suggest that you set aside two slots every day where you can go over the defects with the team when it does the least damage. This can be done directly after the daily standup and directly after lunch as that is also when many teams collaborate on code reviews and so on. Just agree with the developers when and how you will go over the defects to ensure the impact is as small as possible.  
      These are just a few small tips on how to reduce stress and what the cost is for stretching yourself thin by splitting your attention between multiple projects. Most of these may be most relevant to a certain group, but most of them are valid for all groups. Content switching and bad work processes cost billions every day and they cause health issues that should not be underestimated.
      Stress related illness is increasing and in many fields you can name at least one or two persons that you work with that have suffered from being burned out. In Japan there is even a specific word for working yourself to death: Karoshi. So be wary of the many ways that you can harm yourself unintentionally. One good start to protect yourself is to never accept working on multiple projects at the same time.
      If you have more tips, please share to help others avoid getting burned out.
    • By ©Jimi Wikman
      Hey there!
      I'm Brad Frost, a web designer, speaker, consultant, writer, and musician located in beautiful Pittsburgh, PA.
      Atomic Design
      I wrote a book called Atomic Design, which covers all that goes into creating and maintaining effective design systems. You can read it online and order the ebook.
    • By ©Jimi Wikman
      I stepped in to support my collegues with the UI design for the new website. My assignment was to take the graphic profile already put in place and build new pages in Sketch where needed.
×
×
  • Create New...