By Evan Katz |
Director of Human-Centered Design at Sparksoft |
November 25, 2020.
NOTE: For this article, we are focusing on the front end look and feel of the application; taking your pretty pictures and converting them for use on the web using HTML and Cascading Style Sheets (CSS)
Have you ever designed a prototype, handed it off to developers, and then find that their end result doesn't match what you gave them? I've run into this problem many times over my career. It's also very rare for the prototype to match the developed solution for reasons that we're going to explore in this article.
Designers tend to be creative. They want to come up with pretty pictures, create "wow" factor, and explore possibilities with the user in mind without limitations. All of this is done before tossing the designs over the fence to developers and saying, “make it like this.”
Developers tend to be very logical. A + B = C. They want to be given a list of requirements with components, including the fonts, styles, spacing, colors, and images. Everything should be provided and spelled out so they (the developers) can focus on wiring up the components and making it dynamically driven. Although HTML and CSS are considered programming languages, implementing them often takes more of a creative approach than a straightforward and logical approach that is typical of programming languages.
How might we find a way to convert the design into code that matches the design? The developers do the best they can or just what they think is best. If the coded version doesn't match the prototype, the design team may ask them to try again since it doesn't meet their acceptance criteria.
Ultimately, there is a way to create a bridge between designers and developers by utilizing design systems. A design system is a library of visual styles and reusable components, with corresponding code, which ideally provides guidance on when and why to use each. Designers use components from an established design system to create interactive and responsive prototypes while the developers can pull the code from the design system to help convert the prototypes to a dynamic application.
Now there are a few different ways that this can be done.
1) Utilize an Existing Design System and Framework.
Since it's often easier to start with an established design system and add on to them as needed, below is a listing of 4 to evaluate first.
U.S. Web Design System (USWDS) (https://designsystem.digital.gov/)
U.S Digital Service (USDS) is great. Having worked with them on previous projects, they are some of the best and brightest developers I've come across. Not only do they have the rendered components to interact with, but also provide the component code and guidance explaining when to use it, when to consider something else, usability guidance and accessibility. Hint: You should model your design system based on USWDS.
CMS Design System (https://design.cms.gov/)
Center for Medicare & Medicaid Services (CMS) projects also have a design system based on the USWDS, but styled in a CMS theme with some differences in components.
Fluent UI (https://developer.microsoft.com/en-us/fluentui#/resources)
Fluent is Microsoft's open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.
2) Customize an Existing Design System or Combine Multiple Design Systems and Add Your Own Additional Components.
Design systems are a great start, but I have yet to discover one system that has all of the components included for all scenarios. Let's review USWDS and CMS as an example.
Compare USWDS with CMS Design Systems
NOTE: You may need to scroll horizontally
on mobile to see all below.
Compare USWDS with CMS Design Systems
Decide which coding practices and nomenclature you're going to follow and why. Do you want to name all of your components like USDS or CMS, or would you rather create your own? I recommend looking into Block, Element, Modifier (BEM) Methology as a naming convention for classes in HTML and CSS.
Adding additional components = cost and time, but will:
only require work for a few components
ensure components are future-proof and sustainable
and provide substantial added value
The good news is that most of the design systems have components broken down to a design version (XD, Sketch, Figma) and the code to implement each component (React, Vue, Angular, HTML, CSS, SCSS) that you can download from respective sites or find it available elsewhere online.
A design system should be seen as a living document. Start out with the baseline components that you rely on with previous projects and add to it as needed when coming up with your designs for your prototype.
Ready for the Fun Part?
Someone needs to code these custom components needed in the design system. Why can't it be you? It's easy for designers to add components to their design library in XD, Sketch, or Figma, and therefore it's a much smaller leap for designers to also learn how to design their components in code with HTML and CSS! Let me show you an example.
Imagine you have just designed and coded the component shown above. You receive feedback from your users that they would like:
the completed sections to be in green,
the circle numbers replaced with checkmarks,
the circle numbers with text, centered within each step.
As a designer, you can easily do that in XD, but if you don't know with 100% certainty if it can be coded, it shouldn't be included in the design. Can you imagine presenting something to a client, they love it, and then your developers say it can't be done? You would lose the trust of the client when presenting any future ideas.
Modifying the Styles to Make the Changes
The first thing I would do is go into the page where the design component lives. Using Chrome, right click on the component you want to modify and select Inspect
There is now a new panel on the bottom that has the HTML on the left side and the Cascading Style Sheets (CSS) on the right side. Notice the arrows on the left and point down when clicked on them to expand and show more information about each.
NOTE: You may need to scroll horizontally
on mobile to see all below.
Whatever I select on the left, I see the styles changing on the right side. By clicking on each line and expanding where necessary, I can see what styles appear in the right side, manipulate it to see what changes, then copy and paste the styles I modified into a separate file to later include in the final CSS or SCSS in this case.
The Revised Step Indicator Design
Changing The Styles of Components Through The Browser Code
Now what I've done here requires a basic understanding of how CSS and SCSS work along with some practice. But you didn't get this far as a designer without learning how to utilize all of the features in the design programs you rely on every day, did you? It's all about taking what you know about design and using code to design your components.
Will understanding HTML and CSS be enough to create the functionality needed in the components?
But aren't there programs available that can convert my designs into code for me?
Yes and no. There have been companies trying to come up with software to convert your designs into code, but you should use this code as a starting point. There will still be some cleanup that you will need to do before your code should be released into production. Have you ever had a document in Word and you want to export it to HTML? Yes, it works to generate HTML that can be viewed on a browser, but there is a lot of extra, unnecessary code in there that should be removed or modified.
I am always looking for ways to be more efficient in my process. Every few months or so, I conduct discovery research to learn what latest software solutions, available plugins, or existing design solutions (such as Adobe XD) have emerged as potential time-savers in converting designs to code. Two of the latest software solutions I'm currently evaluating are Exportkit.com and Animaapp.com.
Since they are capable of creating what I'll refer to as "starting point" code, these software solutions can still help you with creating a foundation for more complex code such as animations. It is still up to you to clean up the code as needed and ensure that it plays well with your existing code.
Why Should UX Designers Learn How to Design in Code?
For starters, it will lead to about 75% time-saving in redundant work.
Once you learn how to design directly in code, you can knock out interactive HTML prototypes in a fraction of the time it normally takes to create layouts in XD, hand it off to developers, have them try to interpret the design, code it, and have the constant back and forth of improvements so the code matches the design. I am not suggesting that you completely bypass rapid prototyping with XD, Illustrator, or other prototyping tools; those are great for coming up with many different iterations quickly. Instead, I'm suggesting that you convert your better designs to HTML prototypes once you have the basic concept down and expect minimal changes moving forward. Before you know it, you will get as comfortable designing in code as you do in XD.
You own the limitations of the design.
You can add new components to the design system with the necessary HTML and CSS needed. Developers will be happier knowing they can just focus on the dynamic functionality (what they do best) instead of getting frustrated stumbling through HTML & CSS, which most backend developers tend to not be as proficient.
You are responsible for how your design will look when coded.
Instead of handing off to developers and hoping that they are able to match your design, when the code is implemented to be dynamically populated in the dev environment, you can make the necessary changes to styles to ensure it's just how you want it.
If your developers can't seem to convert the design to code to match your mockups, the end result still reflects on you. As a designer, you are responsible for the end result of how your design is displayed on the website or application.
When you have a design system that has all the design components for your favorite prototyping software and the code needed for developers to utilize it, you will have a more streamlined and efficient process.
Once you learn how to convert designs into code with HTML and CSS, not only will you be able to add new components and code how they look for handing off to developers to dynamically populate, you will be able to produce more accurate, production-ready, interactive, and responsive HTML prototypes that developers can easily implement in their builds.
Sparksoft is a certified Capability Maturity Model Integration (CMMI) Services and Development Level 3, ISO 9001:2015, ISO 27001:2013, HUBZone, 8(a), Small Disadvantaged Business (SDB), Women-Owned Small Business (WOSB), and Small, Women-owned, Minority-owned (SWaM), and MBE/DBE/SBE consulting firm. With our focused mission “to ignite innovation, inspire transformation, and implement digital solutions for a healthier nation”, we specialize in 6 specific digital health services: Test Automation, Cloud Services, DevOps Delivery, Cyber Security, Data Science, and Human-Centered Design. Since 2004, our exceptionally skilled people, proven leadership, and optimized processes all work together relentlessly to continuously push for more efficient solutions.
We have developed a support structure of Innovation Centers, designed to collect our lessons learned and identify opportunities for improvement. A key development from our Innovational Centers is the DevTOps framework, which uses an Agile methodology and emphasizes testing to optimize the project lifecycle. SparkLabs is an important impetus in our drive for innovation where our development teams explore ideas and turn them into real-world solutions. We continually pull from our experience and combine this with forward thinking technology from our certified partners like RedHat, Microsoft, AWS, Okta, Google, Databricks, and MarkLogic to conceptualize our novel and effective solutions such as MockSpider® virtual sandbox, ScriptHive® TDD/BDD automation, and 508bee® accessibility validation.
Sparksoft’s website is updated regularly with news of product launches, contract awards, certification and vehicle changes, key hires, and corporate milestones. Visitors are encouraged to explore the website and also connect with us on Social Media