Design to Front-end — Chronicles Of A Perilous Journey
From conception to completion making design process more developer friendly, if only. If only early design thinking/processes, key MVP decisions, and stakeholder inputs align. If only mood boarding, exploration, user-centric research, feedback and iterations were righteous. If only early expectations are not driven by such tenuous assessments:
Client: Our goal is to create a disruptive design in two weeks as stakeholders are impatient.
Designer: Accepts engagement… sips favorite aromatic coffee, delivers first mock-up
Feedback: Like, not at all. You don’t need to show much, but what you show should be world-class, right?
Leave aside budget, just hearing this can burn your nose hairs, along with your eyebrows. By now design scope befriends ballooned expectations. Sizing up only to a second-rated and greedy management, this eavesdropping is A Nightmare from Elm Street, if you could sum up a response. As designs come full circle, development sprints become analogous — rat maze of scrum and agile.
Forming robust grid structure, clear typography, subtle colors, sharp icons, hi-res images, infographics, detailed style guide, accessibility, interactions or animations are some of the core disciplines to deliver truly rich user experiences. Make no mistake, fulfilling perceivable anatomy of a design doesn’t always start with a cup of aromatic coffee!
Life cycles of intricate design and development processes suffer from arbitrarily exceeding ideas, whereby process driven workflows derail — eventually. Talking about some of the best practices, challenges, frameworks/libraries and experiences in design vs. development.
CSS/UI Frameworks
Framework driven designs tend to be more approachable, flexible, following foundational principles of design systems and patterns, it goes without saying that quickly prototyping and scaling thematic components library doesn’t get harder.
So, should a Framework be considered early during design decisions? It’s certainly not trivial, since both design and development go hand in hand. In practice most developers find more comfort working with a known devil — than an unknown devil. However, mapping it other way around is informally risky.
Semantic Responsive Themes and Accessibility
Semantic initialization is a sure fire way to encourage development workflow that’s adaptable, customizable and scalable with inbound design challenges. Frameworks like Bootstrap, Foundation, Tailwind CSS and UI Kit fully support semantic customization.
Stacked upon defaults a component design inherits variables, keeping that in mind rolling out entirely new color schemes (light & dark), typography, spacing's, and component themes is a jolly. Overriding default variables moves you even closer to that goal:
Built on mobile first principle it‘s not Br³⁵Ba⁵⁶, even at unknown breakpoints. To see it in action observe this waterfall order of CSS rule sets (mobile first priority):
Theoretically two breakpoints are adequate in creating summarized, functional, and accessible (WCAG compliant) responsive layouts. Achieving 100% accessibility compliance will break some sweat, it factors in font-size (not too small), color contrast, empty tags, text alternatives, captions, navigation (tabs), the list grows exhaustive. Only first class candidate in this race is USWDS (U.S. Web Design System), a design system build by the US government for teams who build government websites.
Breakpoints shouldn’t be Br³⁵Ba⁵⁶
Bootstrap handles breakpoints elegantly with a bunch of smart mixins media-breakpoint-down(x), media-breakpoint-up(x), media-breakpoint-between(x), and media-breakpoint-only(x) where x is target breakpoint. I’ve found media-breakpoint-down() and media-breakpoint-up() extremely handy. When you target up or down for a sm device the media queries looks like:
/* media-breakpoint-down(sm) */
@media (max-width: 767.98px) {}/* media-breakpoint-up(sm) */
@media (min-width: 320px) {}
Too eerie? Let’s check an example column layout instead, complex — less verbose CSS layout:
#content {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(12);
}
@include media-breakpoint-up(lg) {
@include make-col(9);
}
}/* OUTPUT */
#content {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width: 320px) {
#content {flex: 0 0 100%; max-width: 100%}
}
@media (min-width: 992px) {
#content {flex: 0 0 75%; max-width: 75%}
}
I managed to target both sm (mobile) and md (tablet) devices in one mixin i.e. the column remains at 100% viewport width until the target breakpoint is > 992px (desktop).
Front-end Javascript Frameworks Survey
Rounding up reactive front-end frameworks, emphasized on building rich native alike interfaces based on reusable — pure components empowering SPA and PWA web pages. Built on abstract MVC principles, they can also perform server side operations and SSR (server side rendering). Nuxt, Gatsby, VuePress are few examples where you can perform SSR.
More conventional, jQuery — leading the correlative web frontier once, now trailing as developers gravitate to enhanced front-end frameworks like React.js, Vue.js, Svelte and Angular benefiting from virtual DOM (advance DOM manipulation) ushering optimal page-speed metrics. A recent framework survey by Stack Overflow reveals:
Shunned out but actively updated Angular ranks further down and Angular.js buried under the rubble. I’m avoiding the temptation to spin up a few cloud instances on them for show and tell, sure there’s plenty of that tl;dr. It’s a broad discussion with an eye-opening history of cloud platforms like GCP.
GCP was launched in 2008 boasting modest 4 cloud services: App Engine, Compute Engine, Cloud Storage and BigQuery, good old simpler days. Somewhere in 2017–18 estimated 60 humongous services for Computing, Big Data, Data Science, Machine Learning & AI, IoT, Containers — Orchestration (Kubernetes), NoSQL, Health & Life Science, Gaming, Networking, and Serverless computing.
Next level Charting and Visualizations
In this perilous journey, they come last but never the least, awe-inspiring yet intriguing. Putting a new era of data visualization on the map, cloud computing pushes the limits of complex structured and unstructured data.
I’ve crossed paths with some popular, some unheard and some not so popular libraries in similar regards— D3.js, Vis.js, Chart.js, Mermaid.js, Cytoscape and mxGraph. Going over some of them, information architecture, and use cases:
- Geographic Map Visualization
- Chart Visualization
- Event & Timeline Visualization
- Topology & Network Diagrams
- Node Traversal
- Asset Visualization
- Data Visualization and Reporting
Among these — Mermaid is lesser known library even so it’s very powerful and straightforward. Using simple Markdown like syntax that create Flowcharts, Sequence/Class/State/Entity Relation diagrams, User journey maps, Gantt chart, Pie charts etc. My earliest crack at this library was born out of a requirement — creating a Network cluster design flowchart for SDN (Software Defined Network) cloud application. As part of my research few iterations went in:
Second choice was Cytoscape, an open source platform to visualize complex networks, bio-metrics, molecular structures, genomics, proteomics, social science and network analysis. It’s domain-independent with a vibrant community; well suited for Network graphs.
Time to spin up some more prototypes on Cytoscape.js, yes, it does come in two flavors. The earliest bare-bones prototype looked like:
I faced my biggest challenge yet in Cytoscape.js — customizing precise positioning of nodes to edges. The preset grid, circle, concentric, breadthfirst, and cose layouts prove comprehensive enough to visualize most complex of Networks i.e. nodes = edges with the optional custom layout extensions. During early evaluations Mermaid was ruled-out in favor of Cytoscape which is developed specifically for Network visualizations of enterprise scale.
It required some more work for refined placement, and aesthetics to fully qualify for final round, ending up like this, no tl;dr on this one:
Cytoscape stood out in creating interactive, aesthetic and appealing network cluster visualization flowchart; forming foundation for many variations that may follow across the board.
Summary
There is no definitive answer to condense optimal workflows for design vs. development. Most trial and errors, mistakes, progressive enhancements could take several iterations before reaching chequered flag. PoC’s and MVP’s are your best buddies to learn and earn. If you’re attuned — a symphony, if not it’s pure noise. Do checkout:
