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

    Svenska Färghusgruppen

    Digital Designer

    Jimi is an experienced project manager with a rather unique range of kills. He is a certified requirements manager, trained designer with special expertise in conversion optimization, experienced system, integration and acceptance testers and has 20+ years of experience in front end development…

    Project Summary

    Employer: Zington AB

    Industry: Color

    Assignment: I stepped in to support my colleagues 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.

    Technique/Method: Sketch, UX, digital design

    Customer Value: The design was used to build a new website for Färghusgruppen to better present their business to increase sales and visibility.


    My Thoughts

    My role in this project was to support UX and UI with design in Sketch. We worked with the mobile layout first (Mobile First if you want to use Buzz words) in Sketch, which we then added to InVision to create a clickable design prototype.

    A relatively small project for me, but incredibly rewarding and motivating to work with design for real again. Extra fun to work with colleagues who are real superstars!

    • Like 1

    User Feedback

    Recommended Comments

    There are no comments to display.



    Join the conversation

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

    Guest
    Add a comment...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By ©Jimi Wikman
      Figma has been in the news for designers for a while and it is in many ways praised as the one tool that will save us all. I am still skeptical because to me Figma is a generalist tool, and I am used to working with specialist tools. I will go over the selling points that Figma have listed as to why people make the switch from Sketch to Figma.
      On the Figma website they list 3 main selling points for making the switch: Less is more, Faster in the cloud and Better Teamwork. The collaboration aspect has been their biggest selling point so far as far as I am concerned, but let us go over them one by one and see how they appeal to certain groups.
      I will look at these selling points from two points of view. The Isolated design team, which would be where most design studios and larger companies with dedicated design teams would fit. The included design team which is where the team is working alongside the requirements and development team members.
       
      Less is more
      I could not agree more. Having to juggle multiple tools at once is a bad experience for everyone. The design tool is just one tool and it must connect to the overall flow of the build phases. That means that the design should be connected to the code and the requirements. As far as I know there is no design tool that have that today, so we still need to have that as separate tools.
      Abstract for release management
      When it comes to both requirements and development, which are the two adjacent disciplines to design, then version management is very important. Abstract is by far the best tool right now for maintaining a controlled version management, which also can follow the same flow as the code. This allows for locking a design, while also continue working on it in a controlled way.
      While Figma have a version history built in, it is just that. Version management of single assets with no connection outside the design flow. It is not what is needed for collaboration outside the design discipline, even if it is nice to see who did what when.
      InVision for prototyping
      I do not do a lot of prototyping and usually the built-in functions in Sketch works fine to illustrate a flow. If I need to do a full prototype I would either use InVision or Axure depending on the situation. Are the functions in Figma as advanced as InVision or Axure? I don't think so, but then again I have not seen any reason to dig into it too much. I doubt it is something that will make or break a decision for a designer.
      Zeplin / Avocode for design handover
      While design handovers are less common when working with proper pattern libraries, a lot of people still do not have that workflow in their organization. Having tools like Zeplin or Avocode to allow developers to match colors, fonts, margins and paddings becomes important in that case.
      For the isolated design teams this is a lifesaver as it reduce the need to communicate with the build team. For the included teams it is simply an additional feature, like a nice-to-have. This is because the included teams will of course collaborate directly with the rest of the team, which makes static information less important.
      Overall it is not bad that Figma have the basic tools for prototyping and design handover, quite the opposite. The missing part for me is that they do not have the features to replace Abstract and the features for prototyping and design handover are not exceeding the features of the specialized tools.
      I would argue that Figma would best fit small, isolated teams that need a generalist tool over specialized ones or due to cost.
       
      Faster in the cloud
      One selling point for Figma is that it works everywhere. This is good news if you are forced to work in an organization that only allow PC computers or if you prefer to work on a Linux for whatever reason. Personally I fail to see the importance of this because you should choose the tools that make you most efficient. If you are limited because the organization prioritize hardware over people, then leave right away. Never work for companies that don't care about its people.
      The only reason why this is good for Figma is because they want to bring everyone into Figma and as such it must be available on all systems. It does not make the design process more efficient and collaboration of multiple disciplines inside a design tool is far from problem free.
      I would say this is only needed if you have the design handover in the design tool or if your workflow is based on passive collaboration.
       
      Better Teamwork
      This is Figma's biggest selling point in my opinion and it is one they promote a lot. Collaboration is an interesting thing though and it clearly means different things to different people. Figma define collaboration as getting passive feedback through comments and the ability to work on the same designs together.
      Comments are passive collaboration
      The ability to add comments is the very lowest form of collaboration. It is a passive form of communication and while it is nice to not having to email people to get a comment on a design suggestion, it is best suited for isolated teams that do not have access to the people that they need to communicate with.
      For included teams this might at best be something you use when you are not working or to get feedback from people that are not part of the build stream that you are working in. Included teams would get far better results directly communicating with developers and stakeholders than asking for comments.
      Adding Notes to your design
      While it is sometimes useful to add notes in the design, for example during a workshop, I do not see this as a big selling point as I could just as easily get something like Sketch Notebook to do the same thing.
      So while we all want better collaboration, I fail to see how passive communication with external sources will be helpful in most situations. Unless you are an isolated team with little to no access to the people you need to collaborate with. Figma has the same type of collaboration like many other tools that also cater to the same working conditions where you work apart from the people you need to collaborate with.
      Is this something that is crucial for a modern designer today? In some cases it might be, but for people who work in an agile and included way this would never be an important feature. It should also be noted that Sketch are also adding these type of features in a near future and if they are similar, then this would not be a big selling point in the future.
       
      Design System (not listed as a selling point)
      Figma also promote their design system as an important feature, but not as a reason why people move from Sketch to Figma. I bring it up because design systems are used a bit carelessly these days and sometimes seem to be interchangeable with pattern libraries.
      In both Sketch and Figma a design system is just design asset management. It is not connected to code in any way, other than that certain values can be seen using the inspect tools in Figma. You would need something like Invision DSM to actually connect code to assets, but usually you will still have a manual step between design and code.
       
      Should you make the switch?
      This is the big question, just like it was some years ago when Sketch challenged Adobe. Back then it depended on your workflow and your finances mostly, but also what UI you preferred. To some it was also about small company vs big company or just to have the latest hot tool on the market. Here are some the reasons I see.
      Figma is the latest hot tool
      There is no denying this fact ever since WordPress announced they would go for Figma as the official tool back in 2018. It is now the talk of the town and many are looking at Figma to replace Sketch. If you are one of those that follow the crowd, then Figma is probably pretty attractive right now for this reason alone.
      Many designers still work in isolation
      Sadly this is still true, even if designers are slowly moving into the build teams. When you are cut off from the daily interactions of the build teams, then you have no choice but to work with passive communication. Having that inside your design tool is a good option if you are crippled when it comes to good communication. Sketch will get similar features so this may not be the selling point it once was.
      One cheaper general tool
      Money always define the tools we use and the possibility to reduce cost by using one general tool rather that several specialist tools is not a bad thing. If you rarely use the full features on the specialist tools, or if you are struggling with the cost for multiple tools, then Figma is not a bad alternative. It probably has most of the feature you use every day already built in.
      Everyone can use Figma
      This is something that should not be underestimated. Many companies suffer from low trust and as such managers have the need to control the work even if they should not. In such situations it is very nice to have a tool that is accessible everywhere and the commenting function is also a big bonus.
       
      The only drawbacks with Figma as I see it, is that it is an isolated design tool and it is not an offline tool. It has no connection to the build flow and it really needs Abstract as a plugin or a similar product that also have design release flows. The fact that it require Internet also put some limits on where I can or can not work. There are of course plugins to both Figma and Sketch that require Internet connection as well, so the limitations are not only in Figma.
      My conclusion when it comes to Figma is that for me there is nothing that make me want to make the switch. The tools are roughly the same and when I need it I will bring in another tool to supplement for example prototyping. It does not fit into my workflow of direct communication where design follows the same cadence as development and test. At least not for the moment.
      For isolated design teams, or smaller design teams that do not need additional features I would say this is a great fit due to it's acessibility, indirect collaboration features and price.
      For included design teams I would still suggest Sketch + Abstract as the most efficient and collaborative way of working.

      View full blog article
    • By ©Jimi Wikman
      A nice new update for Sketch mac app came out yesterday. It comes with some nice quality of life additions and some bugfixes as well as two new features. It's a good start on the new year I think.
      New Smart Layout controls
      In this release we got a nice new addition where we can set minimum width for symbols. This is useful for making sure your assets look good when doing overrides as well as controlling size for tap and other things. Maximum dimension is coming soon as well so you can get even more control.

      A better way to save
      A nifty new interface for the save function provide the option to save to cloud or locally in one dialog instead of two.

      A whole host of improvements and bug fixes
       
      Not the largest update, but still some nice quality of life changes. A larger update is scheduled for later this month it seems according to the release post.
      New Smart Layout controls, better document saving and more — what’s new in Sketch?
      BLOG.SKETCHAPP.COM After an exciting end to 2019, we’re kicking off the year with an update to the Mac app. Here’s what’s new in Sketch 62…  

      View full blog article
    • By ©Jimi Wikman
      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

      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 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 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

      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.
      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. 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. 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. 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. 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?

      View full blog article
    • By ©Jimi Wikman
      My assignment was to create a new design for a political community called TheLeft. The design would then be implemented using HTML and CSS. The community also needed custom content blocks using Invision Communities Pages module. I created a new structure for that and added blocks for hero banners and other blocks need to create the desired design. I also configured Invision Community and built the structure of information to make it a complete community experience.
    • By ©Jimi Wikman
      My assignment was to make a new design for the web based user area based on the graphical profile from one of ChessIT's clients. The design had to be light in terms of changes as the project had hard deadlines. I worked with the client and the developers to find a balance between the two that satisfied the requirements and respected the time constraints.
×
×
  • Create New...