As I mentioned in my previous blog post, my comfort zone tends to be more in the backend of projects – making applications interact with the database and other things “behind the scenes”. When I started out in Computer Science, I loved the idea of making cool websites and thought I would have an eye for it, but I found it was much harder than I anticipated to arrange things on the web page in way that looks nice and modern – this is a skill I am working on improving to be a more well-rounded developer.

I’ve found some tools along the way that make this process easier, and one of my favorites I’ve found is taking the time to design wireframes! Per medium.com, “A wireframe is a layout of a product that demonstrates what interface elements will exist on key pages.” Wireframes are part of the beginning design process and give you an opportunity to plan how elements will be organized on the web page in advance of jumping into coding.

You might remember I volunteered to do the majority of frontend work for our Capstone project this term. After discussing requirements with my teammates, I set out to design a wireframe for each of the web pages. I used a free website called Whimsical, which worked nicely because it was intuitive and had a variety of icons and other elements to make the pages come together easily and look professional. By taking the time to design wireframes in advance of jumping into coding, I was able to consider how items should be arranged on the webpage and it forced me to consider how I would incorporate all of the requirements for the project. In addition, my teammates were able to review the wireframes and provide their feedback which will prevent us from having to rework the pages later.

I’ve been working on making the wireframes come to life for the project and will share more about another neat tool I found in my next post – stay tuned!