To Set Up for Web Design Success, Follow This Developer’s 3 Rules

Web developers wear many hats these days – UI designer, UX engineer, SEO expert, and API designer, to name a few.

Going into building a website with this idea in mind will help set you up for success, Philadelphia-based web developer Hannah Pinkos said during the very first Technical training for women – a guided tour of Full Stack conference produced by Trolley Solutions October 18.

Pinkos hosted a conference on best practices for modern web development, and while the most basic details of what your tech stack looks like, the programming languages ​​you’ll use, and your end goals will be different, she offered some advice on what to do before jumping into the code.

1. Make a plan

Making a detailed plan for how and why a site will be used is key to getting off to a good start, Pinkos said. A sitemap is a good way to describe how all the pages on a website will link, the order in which a user will click on them, and why each page is important.

A style guide that outlines the intended color palette and fonts for the site goes one step further, allowing the web developer to understand when and how colors are used, and see if there are any themes that can be kept throughout. .

It’s also helpful to create a prototype of the site or app you’re developing, Pinkos said. This includes creating wireframes showing where everything is on the site, both on desktop and mobile versions. Interactive prototypes are a plus, and sharing them with members of your development team is great user testing for functionality – those not deeply involved in building a project may have an easier time finding bugs .

Pinkos said there have been times when she was building a prototype and hit a dead end or hit a snag. This is easier to realize in the planning stages than deep in development.

“I overlooked this important feature and realized I had to go back to the drawing board,” she said.

Hannah Pinkos introduces style guides in web development. (Event screenshot)

2. Be consistent

Web developers should familiarize themselves with established web design standards and stick to them, Pinkos said. She quoted a quote from Picasso – “good designers copy, great designers steal” – to emphasize that quality web development builds on existing work and standards.

Don’t surprise your users, she says. Look at what competitors are doing and mark sites that you think are performing well. Reinventing the wheel usually doesn’t help: if the feature bar is usually on the left side of a screen, users will expect to see it there, so don’t put it on the left.

“We’re lucky there are a lot of people who have built great apps before us and we don’t have to build everything from scratch,” Pinkos said.

3. Know your users

Finally, before you jump into building your site or app, think about who your users are. Pinkos pulled national data to show the audience breakdown of most websites: just over half is from mobile, 45% is from desktop, and a tiny percentage is from other screens like a smart fridge. Surprisingly, she says, current phone users are split 50-50 between iPhone and Android, although it seems iPhone usage is ubiquitous.

And one important factor that all web designers should keep in mind is that technologists often have different tools than their users. Their skill level, devices, or understanding of technology will likely be different, and the way they interact with the page will differ from that of a designer.

“They probably look different from you, they probably don’t have a 4k monitor, they might not even have HD,” Pinkos said.