Page 11 – Design and Code

Brainstorm Product Features Quickly Using the 5W1H Framework

What if you’re asked to propose to a prospective client a new feature for their existing product. You’ve never worked with this client before, and you’ll need to finish all this in a short period of time. How will you handle this challenge?

Recently, the design team I’m in was tasked with something similar. I proposed the idea of using the 5W1H framework to the team and moderated the brainstorming session. It turned out to be an effective one and helped us come up with some interesting new product features.

Please, Don’t Replace the Bar with the Drawer

The bottom navigation bar in Material Design, which I will call the bar, also known as the tab bar on iOS, is the area at the bottom of the screen that allows the user to quickly switch between sections of an app. The navigation drawer, which I will call the drawer, is typically a side sheet that displays different app sections and is triggered by tapping the hamburger menu icon.

Both the bar and the drawer can be used for navigation purposes. Many apps nowadays seem to get rid of the bar and rely purely on the drawer, especially on Android. Without careful consideration however, this can lead to usability problems.

A bottom navigation bar in Material Design

Interaction Design

Get Rid of Dropdowns

In a project, we may be tempted to use dropdowns to give the user a bunch of options to choose from. These options could be countries, languages, genres etc in a form or a setting page. After all, that’s what we are used to seeing in a lot of apps and websites, right?

Design in General

Is It Working? — A Simple Question to Keep in Mind when Critiquing a Design during Interviews

Recently, I was participating in a few designer interviews. After the first round, candidates would be given a design exercise which they would need to complete and present to us remotely in the second round. We would then look at the design, ask them questions and provide feedback during their presentations.

From interviewers’ perspective, understanding a candidate’s design could be challenging. Candidates usually need to go through many screens in a short period of time. Maybe the candidate is not so good at explaining the rationale behind his or her design. Sometimes there could be problems with the connection which lead to poor audio or video. In these circumstances, how can we critique a design effectively and provide the candidate with valuable feedback?

Coding

An Elegant Way to Break the Bootstrap Container

Carousels are a popular UI element. Unlike other elements that are often constrained by the main view, they often occupy the entire width of a page (the viewport), as can be seen from the following examples.