This article expose a glimpse of the current web market and how some game-changer/emerging technologies impacted it in the last decade for big companies such as Capgemini. More specifically, we will focus on the disappearing of Web-designers and the rise of a new Front-end developer/Web-designer hybrid job.
During the learning processes of designing and coding connected solutions such as apps and websites (whether it is self taught or in classrooms), we once been told that there was a role for such a field of expertise : the Web-designer. The actual market has proved us something very different.
We’ve come a long way since traditional websites with limited pages and interactions and we’ve made every single part of creating processes a specific job, with specific technologies and/or languages.
This evolution is due to an exponential growth of needs and tools to make websites more pleasant, visible, accessible and performant, that also generate revenues in one way or another.
#I. Web market game-changers
Some game-changing way of using the web have arise over the years, making some jobs not specific enough or tasks harder to actually achieve as a single person in big tech companies :
1 : Apps.
Applications are taking over the world since 2007. Since then, almost any idea can be brought to an app, and more easily over time. Apps have fed the need for users to easily access anything anywhere quite quickly. These apps, located in our smartphones, influenced the creation of web-apps and complex websites for desktop use.
2 : Frameworks, libraries, UI kits and CMS.
Applications, web-apps and complex websites mean complex actions and functionalities that need simplification to speed up their development. They led to the birth of frameworks and libraries, easing conception stages.
For developers : Javascript and CSS frameworks or libraries prevent developers to reinvent the wheel for redundant contents and behaviours across projects. They also bring a new idea to the web : the single page application, with the purpose of giving a smoother navigation between pages and interactions without loading between pages (or at least getting rid of requests to load a page, but only its needed elements and data). These tools heavily impacted both Front and Back developments.
For designers : Design system and UI kits not only speed up the sketching and prototyping, but also spread homogeneous interfaces over the web, which facilitate standardization of user-flows.
For clients : CMS (Content Management System) such as WordPress, Drupal, Joomla, Magento… allow users to create, edit and manage easily some Front and Back aspects of their websites through themes and a various choice of built-in plug-ins.
3 : E-Commerce and the R.O.I. of brands’ online presence.
E-commerce is the perfect example for these previously named new solutions. Brands need a manageable website (CMS) where they can sell their products and services, while making sure performances and interfaces permit flawless user-flows (Js Frameworks/Libraries). Needless to say that any frustration from users of e-commerce sites can cost a loss of potential sells and new clients.
Regarding brands and companies that aren’t selling anything but their image, online presence can only be visible to a wider audience by good web marketing and SEO skills.
I believe that there’s a lot more than these factors that built the new web, but we would need an entire article around this.
#II. Big tech companies response (and how their processes made the Web-designer role disappear)
Please, keep in mind that I’m talking about products delivered by big teams for thousands of hundred or millions of $/€ contracts. This scenario may not make sense for five-digits contract.
Let’s picture a typical project starting :
- Clients describe the needs with Solution Architects, who choose the appropriate stack of technologies.
- The stack selected, clients discuss with Business Analysts what their functional and technical specifications are within the solution.
- These BA share their specifications with User Experience designers that communicate, in turn, to User Interface designers expected behaviours and design tendencies to take in consideration for their interface conception.
- Once these steps are done comes the development of the final product. Back-end developers will mostly manage databases and security on the server-side while front-end developers will work on behaviours on the client-side.
Where does the so-called Web-designer exist in this context ? Nowhere at first sight. Now that there’s UX/UI designers and developers, whose work is it to code templates and style these while respecting what the new web expect ?
UI designers deliveries can’t be perfect out of the box and need a certain amount of custom code anyway. This is due to the fact that they have little clue what limitations of Front-end tools are in term of code and behaviours.
Front-end developers are all about Javascript and frameworks, but do they know CSS pre-processors ? How to code cross-browser ? What is accessible and what’s not ? What’s good for the W3C or SEO ? The good practices and more…
Web-designers on such teams made no sense, since we now have UI designers and Front-end developers that originally consist of the same job in some aspects.
As a result, we needed a new role in the process; halfway between Web-designer and Front-end developer; a field of skills and knowledge that not only were creative, but also technical, to style web-solutions properly.
Here enters what we’ve been calling in France a ‘Intégrateur’ (male) or ‘Intégratrice’ (female) for several years now. A job title that don’t seem to exist in other nations.
We could name it a UI Developer, who brings a creative point of view on code. With a wide set of skills and knowledge, design perspective combined with coding skills can lead to optimal results in projects.
#III. Job description
How wide its field of skills is ?
Technical skills and knowledge (by alphabetical order) :
- Accessibility : giving feedback on what is and what isn’t accessible for people with cognitive or non-cognitive disabilities, and optimizing HTML code in consequence.
- CMS : knowing how the CMS works; what languages, frameworks and libraries exist within it and how the architecture work. Mainly WordPress, Drupal, Magento and Prestashop.
- Cross-browser : being aware of what can be used, what can’t, CSS-prefixes, Js poly fills and more, to make it work on multiple browsers.
- Debugging : using browsers developer tool to edit HTML, CSS and outputting Javascript logs.
- HTML : being aware of the best choices of tags and naming for further styling, Javascript DOM manipulations, accessibility and SEO.
- Javascript DOM : relatively good skills and vision of how the DOM works and how to control it in the most efficient way possible.
- Javascript Frameworks : same as CMS
- Performances : making the best of efficient code in all languages; knowing how to use browsers developer tool to analyse it.
- Pre-processors : having a good knowledge of LESS, SASS/SCSS, Stylus etc, so you can produce coherent and powerful code quicker.
- PHP : understanding the very basic functions and how html templates can be called there.
- Responsive : delivering multiple formats of screens through CSS breakpoints and being aware of the most used resolutions.
- SEO : using HTML the best way possible to facilitate future SEO.
- Testing : checking fidelity vis-à-vis designs and quality of code; testing behaviours in different browsers and screen resolutions.
- Twig : understanding how templating works through Twig.
- UI Tools : basic knowledge of how to edit, comment and share existing interfaces.Mainly in Invision, Figma, Sketch and Zepelin.
- Versioning Tools : initialising, creating and resolving conflict in repos using Git, GitBash, Turtoise or GitKraken and the command lines.
- Work Environment Tools : understanding how such tools, like Docker and Npm work, and a basic knowledge of their command lines.
- Workflow & Communication Tools : mastering the basics of Jira, Confluence, Slack, Teams, Skype etc is a plus to ease communications, documentations and workloads estimations.
- W3C : aware of what a good practice is and what is not regarding HTML & CSS for a better rating of websites and web-apps.
Responsibilities and values :
The UI Developer, having both the design perspective of interfaces and the coding skills, can see what won’t be possible within projects stack of technologies just by looking at Designs.
Therefore, this developer can validate, alert, reject designs based on looks and technical functionalities. Being proactive in creative alternatives while having a good knowledge of the best choices of existing tools and libraries available is a plus. UI Developers must choose paths by keeping in mind the importance of performances and budget for projects. They must know how to estimate workloads in the best interest for them, for the ongoing project and for clients. Finally, when not analysing design or delivering his/her own code, this developer is capable of doing technical audits. In others terms, he can be critical to junior Web-designers or Front-end Developers. UI Developers can make messy pages of code into new shiny ones.
Conclusion
UI Developers do a part of what Web-Designers used to do, but we created it to define more accurately the limited scope of roles in big projects.
They are not here to sketch UI, they are not here to initialise projects frameworks or creating components and their function and services.
Their skills are purely here for the sake of optimised DOM structure and stylesheets for users and search engines to enjoy. They manage layouts, templates, styles and every aspect mentionned in this article.
This does not make them Front-End developers.
This job is having more value and visibility over time in big tech companies in Europe, especially in France, despite the fact that there is no foreign term for it, for now.
