Technical Knowledge and Concepts for Designers

Remember when we shared that “we embrace and are obsessed” with collaboration back in our April article? Well, my friends, it’s high time to drill down a little deeper into a single facet of this multilayered realm. Are you a designer? Let’s talk shop. Your vision commands the elegance, flow and feel of the public-facing. But how well do you understand the basics of building software? A lot? A little? All fair. However, when you “get” technical concepts and maybe do a little tinkering on your own, the foundation of your work is more informed and solid. At the end of the day, you are doing design for a technical product, yes? Plus, it makes chats with devs on workflow and things smarter, better, maybe funnier. You see where we’re going. So, let’s talk technical knowledge and concepts for designers. As always, please shoot us your feedback and share it with your peeps if you find it useful.

Ask to Start at the Beginning    

So, let’s begin at the beginning. In Agile development, the DevOps model reigns, where IT operations and development are combined from the project launch to increase efficiency and quality. The DevOps world maintains that well-functioning products/features teams adopt a similar mindset via early collaboration. Historically, the designer might begin work much earlier than the developers. But without a collaborative skillset and participation at the outset, aspects of the design you propose can sometimes be left in “an incorrect state,” which can become expensive, time-consuming and frustrating. Early in discussion about projects, insist on collaboration from the start. This helps prevent kludge (technical term for a quick-and-dirty workaround) down the line, when things are getting complicated. Often, design “smells” stem from poor or incomplete collaboration. So, our first gem in this treasure chest is to request involvement from the start. You will thank us later.  

If you are a UX, especially in enterprise software, you need to be able to collaborate closely with devs. But what does “collaborate” mean? It’s such an overused term. Oxford says, “to work together with somebody in order to produce or achieve something.” For sure, you want developers to grasp your design and work. But it’s on you to hold up your end of this puppy. By learning the development fundamentals, you step up the responsibility for collaboration. And that, friends, is what makes excellent enterprise products, workflows, and projects that you will remember because they will slay. So, let’s dig into common ground, language, goals, and some solid memes along the way.

Setting Up a Common Language

First, you and the team must communicate in a common technical language. Words can mean different things to different people. “This is the product page. This is the modal versus dropdown versus multi-select, etc.” Ambiguity is never your friend here, folks. Start a wiki and track language, technical jargon, internal acronyms, phrases, challenges, and solutions on the fly. Often, there is a time crunch, especially with startups. Some of your glossary and solutions are going to appear later. Minor miscommunications add up and can result in what Clik2Pay Senior Operations Developer Mike Poirier calls “the death by 1000 cuts.” Setting up and adding to the wiki may feel like a hassle at first, but it will save you time, money, and table flipping. You’re building and reinforcing relationships as you are creating the site. Warning! Do not get bogged down by expecting this glossary to precede the work. That’s “contrary to agile principles” and not going to move any project needle fast, much less on time.  

High-Level Concepts Designers Should Know

To start understanding the software development world, we’ve initiated a list of technical concepts that will give you a glimpse of the development world and workflow.

Create, read, update, delete (CRUD)

This acronym for Create, Read, Update, and Delete identifies the critical database operations inherent to databases and their managing applications (which include Oracle Database, Microsoft SQL Server, MySQL, etc.). In simple terms, CRUD is the foundational trigger of things that are happening in the computer:

• Create = add a new item to the database
• Read = find, search and look at      
• Update = modify or change data      
• Delete = buh bye data. CRUD supports a variety of functions across business models and industry verticals      

When building out any interaction design, flows, or specs, keeping these four basic operations in mind is essential because everything you do will go into those categories. Think about CRUD as you develop your design to help ground it in practical considerations.    

HTML and CSS

Do you understand HTML and CSS? Even a little? HTML is “HyperText Markup Language: a set of standards, a variety of SGML, used to tag the elements of a hypertext document. It is the standard protocol for formatting and displaying documents on the World Wide Web.” HTML basically just ‘tags’ different bits of content as what they should be in a browser. The tag <p>, for example, tells the browser that the text within it is a paragraph. Same goes for headings (<h1>, <h2>, etc.), images (<img>) and everything else rendered on a page.

CSS is “Cascading Style Sheets is used to style and layout web pages. For example, to alter the font, colour, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.” Designers don’t need to know how to code necessarily. But many aspects of HTML and CSS relate directly to your work, so being at least capable of editing it or understanding how to use browser-specific dev tools to adjust CSS and HTML on the fly is super useful. Designers who understand how websites and applications are built can better understand the rules that define the work. They can appreciate the devs’ experience better, capture bugs more accurately, and generally get a feel for how complex some front end operations are.

Google Console

Cool tool alert! Once the site is built, you can track, troubleshoot, and maintain the site and monitor performance. Also, with very little knowledge, you can edit HTML and CSS live to iterate and prototype changes. It assesses mobile usability errors and can monitor the site’s performance. What’s more, it’s free and helps you understand how Google sees and ranks your site. This is an excellent tool for your “I’m a designer, but I know more than that” toolbox.

OOTB framework

An “out of the box” framework is software you purchase and use with built-in functionality, or “plug and play.” This means that a bunch of the code is already done. The developer’s job is to extend and modify it for your product. Bootstrap is a common example of an OOTB framework. It might great for your use case at first, but down the road as it gets built out, it might present insurmountable limitations. “You need to understand the tradeoffs,” shares Poirier, “If you decide to implement something that framework doesn’t support, now you are stuck modifying the underlying tool, which can compromise updates.” When working with an OOTB Framework, you need to understand the context of the application and what is possible within that structure in terms of design.

Better yet, work with developers to assess OOTB tools for your needs. You can document the UX requirements along with developers and even scout a few examples yourself.

Most frameworks have demos that allow you to click around and feel the bare-bones functionality. Well-established frameworks have multiple examples on their website, which give you a greater sense of the possibilities.

What’s a database, and how is it working

Databases. What are they? What are they doing? They are “a collection of data organized for rapid search by a computer.” The architectural decisions depend on whether you seek consistent data, like “ordering bolts, with a similar length, thread, and size,” or disparate data, like looking at people and mental health, for example. Being clear on what is being organized and for what users will inform the design and understanding of the project goal.  Grasping how a database works, even at a base level, is beneficial, especially if you’re designing data tables and dashboards. You need to dig into your dataset particulars with your dev crew. This will suss out the ‘gotchas’ where you can’t do what you want and the opportunities you have that you had no idea about.

APIs—The Layer Between DBs and Other Things

APIs or “Application Programming Interfaces” facilitate communication between software components, i.e., your application and an external service. A couple of the most popular API integrations are the Currency Exchange, Breaking News, and the Urban Dictionary. It’s essential to be clear about what an API does. They are, in effect, a ‘safe’ layer between systems across the world that prevent or enable operations to happen across software systems. For example, take a FinTech app; it usually needs to connect to banking services and other products to check for eligibility, credit scores, etc. In this case, the APIs are the banking services and other products that structure your app and are under the hood. The state of the API you have internally (or the ones you connect to) can significantly impact the user experience. It involves what data is required, what can be returned, and when. This is fundamental to interaction and how you pace things out in your user flow and will come up in design problem discussions with developers.  

Wrapping up

A solid, elegant design can invoke trust, shift perception, sell products, and much more. As the tech tools continue to improve, accelerate, and exceed our wildest dreams, it’s even more important to communicate well and often with the people working on the enterprise websites. By streamlining and understanding a bit of what one another does and being part of the puzzle the whole way through, your project and relationship success has its best chance. So now, go forth and design!

Thank you, Mike! Mike Poirier helped us create this article from a seasoned technical perspective. You too can be like Mike by collaborating from the ground up. Talk soon, skippers!

‍