Press "Enter" to skip to content

Midterm Update: Front-end Development Tools

This term Alec and I have been working on an updated website for Carleton Guide to Medieval Rome. I have been working with some new development tools that I am excited to share. Balsamiq is an online tool to help design a wireframe for an application (and in my case a website). To get full access to the site requires a subscription, but then allows multiple contributors to the workspace. The wireframe lays out a general look of the site and the navigation. This was an excellent tool because it has many useful built-in images that represent common things that you would have in the site. Here is one sample page from the site’s wireframe:

In this single page, I was able to utilize a sample search bar, various buttons, a map, a page scroll, and other elements all within a sample web page window. Each of the tiny red arrows is a link to another sample page within the wireframe. Once completed, it allows the viewer to click and navigate throughout as if the site is completed. This is an excellent tool for developing the user interface of an application to make sure the flow of the site makes sense before coding it all. For more complex applications, using a tool like this to develop a wireframe would be necessary to prevent an incoherent user interface.

Some downsides to this tool are that it is hard to design features that are not previously included in the site. The lack of a drawing tool made it hard to have an organic shape that I wanted, but overall I recommend this tool.

 

Another tool is called Coolors that I used to create potential color schemes. It is a free online tool that is extremely user-friendly. A randomly generated color scheme is presented with every click that follows an algorithm to be aesthetically pleasing as a whole. If you like one or more particular colors but not the whole set, you can select to “lock” any of the colors. The locked colors stay for all the future color schemes generated unless you choose to unlock them. This is an excellent feature because then all the color scheme coordinate with those color that you have locked, so once you found colors you enjoy you can quickly create multiple potential schemes. Within a color, the range of lightness to darkness can be adjusted to find the perfect shade, or you can enter a custom hexadecimal color. Here is a sample that was incorporated into one of the design options:

Some critiques of this site are that there are exactly five colors to the theme, so if you want more than that makes it difficult. And while it does have a color blindness feature, it is not automatically turned on so you have to go into settings to change that. This would not be an issue in some instances, but if you are using it for web development like I am, that is something to look out for. Overall, this was an extremely helpful tool that was especially great because it was free. I would recommend to anyone that has an idea for a theme and just needs the exact names, or is searching for inspiration.

 

With these tools combined, I have been able to do a mockup of the homepage of the site:

I look forward to continuing this project and applying these tools to future projects.

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php