Designing Web apps and Web UIs for software developers

When designing Web apps, software developers are often asked to come up with ideas on how to revamp and modernize the existing Web presence -- not because it is their core skill, but often because it can be expensive and time-consuming to hire the professional design talent.

As anyone in the Web development industry knows, mastering the UI design process can take years of research and practice. However, it is within the grasp of software developers to contribute positively to the design of Web apps and testing of Web UIs, so long as they can adopt a few simple tips, said Tracy Osborn, founder of WeddingLovely and LimeDaring, and author of Hello Web App, at the Fluent Conference in San Francisco.

Osborn said she believes most developers are more than capable enough to develop user interfaces and subsequently test out their concepts by taking advantage of a few simple principles. These principles will also streamline the development lifecycle when embraced by developers working with a design team. At a high level, Osborn said she advocates thinking through the end-user experience, reducing clutter and stealing UI design patterns from other sites.

Osborn started out as a designer with an idea for creating a better wedding-planning experience. Initially, she spent a lot of time looking for a technical co-founder to launch the WeddingLovely website. After a frustrating hunt for a developer with the right mindset, she learned how to code instead. This experience resulted in the Hello Web App series of books aimed at teaching designers how to code.

In the process, she began noticing how developers could become better designers. Many developers start off with the notion of just hiring design talent. But this still requires understanding basic design principles in clearly communicating the core ideas behind the application to designers. "As developers, you are going to have to jump into design one way or another," Osborn said.

Focus on how designing Web apps works

Design is not just what a site looks and feels like. It is more important to think through how it works. If users are not achieving their goals, then the developers are not doing what they are intending to do.

"Worry first about how it is working. Try and figure out the critical thing that needs to happen. Don't worry too much at the start about putting a physical skin on things," Osborn said.

Pay attention to clutter

There are many different types of clutter that distract users from their intentions. There is the obvious kind of clutter of too many boxes, graphics and disparate information presented on a page. But other types of clutter include a hodgepodge of fonts and poorly structured content. Osborn cited GoDaddy as an example of what not to do on a website. Complex design guidelines, such as using a grid, limiting the number of components, adding white space and limiting the number of fonts, are really about cutting the clutter. When The New York Times reduced the number of colors and added more white space, users spent dramatically more time on the site.

It's also important to think about content clutter when designing Web apps. This means simplifying headlines by making them as short as possible. The headlines should also focus on the benefits of the underlying content, rather than the details. It's also important to simplify paragraphs and break things into bulleted or numbered lists. "People on the Web are skimmers. If you break paragraphs into bullets, your content will be less cluttered and better for users," Osborn said.

Borrow and use

Designing the UI from scratch is time-consuming and requires a lot of forethought. A much better approach is to find a UI design pattern and customize it for the website. In most cases, the designs are not copyrighted and the fonts are freely available. "If you design something on a blank page with Photoshop, it is like trying to develop a new app with the use of Google or Stack Overflow ... Don't copy. But emulation is OK," Osborn said.

Don't copy. But emulation is OK.

Tracy Osborn,
founder of WeddingLovely

Developers can start by creating a list of attractive websites. There are also plenty of resources for perusing layouts, fonts and colors in one place:

• Bootstrap provides free themes and templates.
• ColourLovers is a community to exploring colors, palettes and patterns.
• Typewolf makes it simple to explore different font types.

It is important not to get frustrated in the beginning of designing Web apps, Osborn said. She often starts the design process producing a horrendous design. But then, there is a magical moment when everything clicks. The key to good design is to dwell in the design process until this happens. "Remember to practice. The more you practice, the better a designer you will be," she concluded.

What Web app design and testing tips do you have? Let us know.

Next Steps:

Mobile UI app design helps heart

Why AWS is in need of a UI face-lift

Is Lightning UI still lit?