Link Search Menu Expand Document
HumaniTech VIP Crop Pricing

User Interface Mockups / Front-end web development

The following page has been contributed by Alan Matias.

Preliminary Note

Before starting any prototyping or design mockups, it is paramount to do user research and understand the problem at hand, why you are solving this problem, what needs and pains users experience, and opportunities to innovate.

In doing any design work or innovation, I always follow the user-centered designed process. It has 6 steps:

  1. Understand
  2. Define
  3. Sketch
  4. Decide
  5. Prototype
  6. Validate

These steps are explained further on [Google’s Design Sprint Website]. (https://designsprintkit.withgoogle.com/methodology/overview)

Understand / Define

To understand the problem, I went through past midterm presentations to see who the stakeholders where, what the problem was, and what constraints there were. After this, we created a use-case model and I created a short user stories spreadsheet.

Sketch / Decide

In starting to visualize what the app might look like, I used some ideation tips in Google’s Design Sprint Website, which include doing “Crazy-eights” and storyboarding. After coming up with as many ideas as I could, I consulted the team and decided on a few good attributes of the UI.

Next, I had to create a digital sketch. I did this in Adobe Xd, as I had already had experience with that software, but Figma is also a great resource. Figma is better for online collaboration, however I feel that Adobe Xd is more powerful and intuitive. After creating a few different options for both mobile and web design, I consulted with my team again to see what features should stay and iterated again.

Prototype

Next, I had to move on to creating the actual webpage, which involves HTML,CSS, andJS. There are many tutorials on how to make a webpage, but I especially like w3 schools for any web development help. I also used Bootstrap, which is like a pre-built CSS library that helps create layouts and things like navigation bars, forms, titles, buttons, etc in a pretty format just by adding a certain class name to that element.