Trying Out New Technology

As a software developer, we’re using new technologies all the time. Different frameworks, new tools, sometimes entirely new stacks. Since I’m in a safe incubator of school, I think now is the perfect time to start on diving headfirst into new technology while I create and write my projects.

For my first project of Mod 2, I am tasked with creating a website about comedians. The basic functionality is displaying data based on some certain query parameters, making some basic calculations using active record, and gaining experience with MVC and databases.

That’s all well and good, but I also happen to be completely obsessed with UX design. A fantastic backend is great, and a good UI is necessary, but if the user experience is terrible, no one is going to want to use your product, which can be a real boon, especially if what you have can really benefit people (and we all hope that the work we do benefits others).

So, to that effect, I chose to try my hand with a wireframing tool called Balsamiq, so I could play around in real time with a trial-and-error approach to how a user would interact with this website such that they find the experience useful and *want to keep coming back*. I chose Balsamiq because it's extremely easy to use and doesn’t have any dependencies such as Sketch, I may be idealistic, but I’m not made of time. Then hopefully I can sooner or later approach being able actually to build what I design (a long way off) but I prefer to have a context to my work beyond throwing spaghetti on the wall and seeing what sticks.

I chose to focus on two design principles: aesthetic and simplicity.

My first impressions upon opening Balsamiq were those of “this looks really, and I mean, REALLY silly. Am I going to be able to make anything on here that doesn’t look like a doodle of a 6-year-old?”

Those impressions were quickly replaced by total delight at how fast I was able to start putting things together. The interface is so usable, even for complete and total beginners. I found a browser interface and was off to the races. I already knew the theme of my website was dark (and I mean DARK) comedy, and I knew what I needed. Black background, grey font, and bold photos. So, I threw some icons on to represent pictures and started messing around with the layout. I also knew I wanted the user to experience having to make as few decisions as possible and have a visually appealing experience.

Then the magic happened.

I found (again, quite easily) that I could replace those placeholders with actual pictures. And I could customize the text however I wanted. I could put icons in to represent popular websites that would be able to integrate nicely with mine by accessing their API. This is dream designing at its best.

Although I haven’t been able to figure out how I am going to get all the content on the main page that I need to render without it looking like a crowded mess, I think I found a really great place to start with. The best part? Start to finish, this took an hour. And I feel that I have a good grasp of this new technology. I was even able to build in visual cues to myself as far as how to write my HTML l (don’t forget the title) as well as write out routes in the address bar to build more visual cues to myself of what exactly I want to see when I am visiting a particular route. Anything that I can use for myself while I’m at Turing to lesson my brain tax is a welcome tool. An encouraging first experience of diving right into the deep end!

The only feature I wish Balsamiq had at this point is a snap editor that you could toggle on and off to help line up images, but they provide such good live measuring tools that its a minor complaint.

They say the best way to start when you want to create great design is to not make shitty design. And I think I’ve taken a good first step in that direction.



I like to write :)

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store