Code: Front-End Development

Within many companies, the use of wireframes in user experience design can be a contentious issue. People typically think of wireframes simply as artifacts designers create when generating design concepts, then later discard. Why not create a design artifact that is not disposable, but instead, one your team can convert to actual production code? Is this Holy Grail of the design process a good idea? Is it even possible? Or does the answer depend on the project, the team, and its agility? This first part in a two-part series takes an in-depth look at the process of converting wireframes to code. Read More

This is a sample chapter from Ben Coleman and Dan Goodwin’s new book Designing UX: Prototyping. 2017 SitePoint.

Chapter 7: Building HTML Prototypes

When we say HTML prototypes, we mean a Web site comprising HTML markup, CSS for presentation, and JavaScript for additional interactivity. It may be a simple HTML Web site, or a Web site that runs on a framework or content management system (CMS).

This chapter is not a detailed step-by-step guide, nor will it teach you how to use HTML, CSS, JavaScript, or frameworks. It aims to help you understand all the options for creating HTML prototypes and their benefits. You’ll find out what’s needed to get started, and gain some guidance on how to approach creating an HTML prototype. We’ll also include some real-life prototyping case studies from some of the projects we’ve worked on at fffunction.

After reading this chapter, you should be able to make an informed decision as to what approach will suit you and your project. Read More

“Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.”—Steve Jobs

With the emergence of Node-based technologies such as React and Angular have come new opportunities for both UX designers and developers to leverage design systems to enhance their application user experiences. This article aims to help those of you who are weighing the advantages and disadvantages of using design systems and component libraries for your application.

Consider the scenario of a Web application that is being designed using a Material Design style, which could be built to specifications for one device, serving one operation, or could perform significantly differently under other conditions, in another context. When you consider the variances in how user interactions function, the value of leveraging a design system starts to pay returns as front-end development teams build out component libraries at scale, yet performance teams may also find variances in the user experience that are worth researching. Read More