Designing Your Frontend
So you have made an API, but now it is time to create your frontend and you don’t know where to start?
I am going to share my process for creating a more polished frontend while I had very little knowledge initially about HTML and CSS. A little bit about me: I have a background in Graphic Design and received my degree in 2010.
Step One: Brainstorm
This is probably a no-brainer (pun intended). When I first have an idea about a project I think about who is the user, what would the user want? If I am designing for me specifically I determine what I would be looking for if this product already existed. My preference is usually clean, uncluttered, user-friendly in a common sense kind of way such as no repeated actions or extra steps for things that could be done in one.
Step Two: Research
With this in mind I usually search and see if this product already exists and if so what are its competitors? What do I like about their design, what could/should be changed for a better user experience? Basically I ask a lot of questions when I brainstorm. In the end I have a few words that describe the feel of the product along with what design implementations should be worked in.
Now that I have my list of words and a few design solutions/improvements I search for sites that match my list of words and have the look I am interested in. I think about the grid, placement of elements, color theme, and font choices, keeping screenshots and images for later reference. Please keep in mind accessibility for those who are color blind or visually impaired when making choices. There are dedicated tools and sites available to check website accessibility.
Step Three: Rough Sketch
I personally prefer to do it the old fashioned way with a notebook, pencil, and ruler and draw out my wire frame, but there are many sites that are free that can help someone who is newer to designing create a great site. These can be as simple or complex as you’d like. Here is an example of a simple design created on Wireframe.CC:
Step Four: Optional Mockup
Here is a more thorough mockup I made below. It was a wire frame, but with the online software almost all allow images, text, and colors to be added. This allows for the whole design to be seen. I would suggest this for people who cannot visualize things in their head. A list of sites I would recommend are Figma, InVision, and Draw.io.
Step Five: Start Coding
Now that you have an idea of design, colors, images, and fonts it is time to use HTML and CSS to make it come alive. Since HTML and CSS were new to me for this project I relied heavily on online tutorials on W3school.com and other sites. Here is the end result for my MVP (most viable product):
As with everything else I make, I will continue styling and adding features. This is just the MVP and always remember to think about scalability!
