Tag: front-end development

A Technical Approach to Getting Your Design Team On The Same Page

Jenn Clore

I usually base a lot of my design decisions on what I feel looks good. Since I’m still a web design student, I’ve been lucky enough to get away with this methodology for now. I don’t know how I’ve come to these conclusions; maybe my right brain rules the show? But for some more analytical people, they need a more technical approach when it comes to web design.

Priyanka Godbole wrote an article entitled, “A Framework for Creating a Predictable and Harmonious Spacing System for Faster Design-Dev Handoff“ that answers the question of, ‘How can we over complicate a spacing issue so that everyone is on the same page.’ This is not a quote in her article, but rather my own point of view after reading it. Granted, I’m saying this because I didn’t fully understand her approach to solving her spacing issue. However, that is what I was able to gather after reading it.

When designing and developing a UI with a team, consistency and spacing become an issue. In Godbole’s case, she was developing an internal database system in which the design parties involved were not following any guidelines in spacing. As a result, extra padding, margins, and other inconsistent spacing were becoming an issue. Using a lot of hypothesis testing, multiples of 8 and 14, grids, intervals and geometry, her team was able to pick values that worked for the project and agreed to adhere to them.

While I didn’t understand most of her strategy on how she and her team calculated the code, I do understand the need to have guidelines in place to keep the experience consistent across all screen sizes and uses.  Nathan Curtis wrote an article on a similar theme, but more user-friendly content in, “Space in Design Systems”. Curtis and his team struggled over consistent spacing and felt limited with the HTML box model. His article brings up a good point: “Most collaborators can’t see space, a primary reason it’s so arbitrarily applied.” This is true in most cases, I believe. If you are working with a team of technical and nontechnical backgrounds, design definitions can differ. Curtis’s team created a model of S – XL which equals a certain pixel range to define specific elements within the UI coding.

Both articles stressed the importance of designing for consistency. When creating a methodical system of margins and padding, it shrinks the gap between designer and developer. From my own personal experience, I understand how there can be a disconnect between designers and developers on what looks good. A designer may be designing for user experience based on consumer research or other strategies, but a developer may be creating the backend magic that makes all of the features and elements in the code run efficiently and effectively. The developer is not concerned with the overall color and spacing structure. The designer may be wishing for something outside of the limitations of what the system can do. I think the key in both articles is to create agreed upon guidelines on how the finalized product should look and perform. How you get to the conclusions that your team agrees on is a whole other journey.

Guidelines for Great Product Designs

Jenn Clore

If beauty is in the eye of the beholder, then how can you, as a web designer, create a product that is perceived as beautiful to your target audience? In a recent lesson in my web design course, I read an article that discussed six product design principles. These principles help streamline the design process to create end-products that are more simple, efficient, and pleasing to the user.

After reading the article, I believe there are five key elements that can make me a better product creator of websites:

  • User-Friendliness – Elon Musk said, “Any product that needs a manual to work is broken”. There are always little sayings that basically all say the same thing, “Keep It Simple, Stupid” or “Less Is More”. If a website becomes too complicated to serve a simple function, whether that function is to elicit a phone call, or prompt a user to make a purchase, these bottom line functions should be so obvious and simple to understand the intention of the website.
  • Multi-Purpose – The Smashing magazine article spoke about the “lagniappe”, which is French for “an extra bonus or gift”. A good website gives the visitor a reason to keep returning. For example, a roofing company may showcase their products on the website, but an added bonus for a visitor could be a page for homeowner tips and “hacks” for home improvement, or a page of resources for other reputable contracting companies in the area.
  • Form and Color – Colors, typography, and fonts all create an experience that the designers intend the user to feel. I believe that the psychology of the design choices made on a website is very important in the success of a website. If the font comes off as too strong when the designer is trying to portray elegance, then the website would not have the desired effect. The same could be said about poorly chosen colors. Would a website for an ice cream shop work as well with bright primary colors as it would with soft pastel colors? It all depends on the image the designer is trying to project.
  • Approachable Innovation – Remember when QR codes were all the rage? It was trendy for a moment and then faded out fast. My issue with a QR code was that it required the user to have a QR reader app already downloaded on their phone in order to access the information behind the QR code. Wouldn’t it have been easier to just give the user a website address to begin with? A unique or innovative website sticks in a person’s mind longer than a cookie-cutter design, but it shouldn’t sacrifice a good user experience.
  • Simplicity – Saving the best for last, although this goes hand and hand with user-friendliness. A simplistic design immediately answers the question that the visitor had which lead them to the website in the first place. A good product does what it was intended to do without complicated bells and whistles. Features should enhance the product but not take away from it. The same thing applies to website design.