I’m busy with the first of 3 study streams, on my journey to becoming a Full Stack Web Developer. Stream 1 is all Front End (the pretty stuff that you actually see on your screen when you visit a website). So naturally at the end of Stream 1 we all need to submit a project that showcases these Front End skills that we have learned. I have really dreaded this part of the learning journey. I am no good at coming up with ideas for ‘fake’ projects / websites that no one actually needs. I certainly don’t want to just use the suggested idea from the course – a band website. Partly because this just has no appeal for me, so I know I won’t put as much effort in as I would something that was close to my heart. Since my grade is dependant on the work I do, I need to give it my all. The other reason is that I don’t want to just use the idea they give – I want to put more thought into it. I want to make it my own.
Code Institute is kind enough to showcase previous submissions though – partly to recognise great work, and partly to inspire those of us who are still on the journey. Thankfully I’m not the only one who didn’t just light up at the ‘band page’ idea. Having run the details past my mentor to confirm that they meet the crucial requirements, I am doing a business site.
To really do this properly, I need to plan the site before I start coding. I need to decide what pages there will be, and what kind of information and media (photos, videos etc) will be on each page. I need to figure out a pleasing and practical layout for each page, and I need to work out how the pages will flow from one to the next, so that people can navigate around the site.
We’re introduced to a great tool, called Balsamiq, on this course. My trial membership has expired though – moving half way across the world will really put a big pause in things. So I had to make another plan. I started with pen and paper, which is always recommended. I found this far more enjoyable than I expected. I’m a horrible perfectionist, and get caught up in making every line and angle exactly to scale, blah blah blah. Which is not at all what is important at this stage of the project. It really stalls the creative process. So yay me for not being an annoying perfectionist this week!
I also found (in my Adobe Creative Cloud subscription) an amazing little program called Experience Design. OMG but did this get me excited?! Yes, I just OMG’d at you like a silly teenager – but that’s exactly how I felt when I realised what XD can do. So now I have a wire frame mockup of the rough scribbles that I made in my notebook. At the moment its still only the mockup for how the site will look on a phone screen (I used an iPhone SE as the base layout) but its a start. And that alone is the most enormous relief.

Adobe Xd mockup: The blue lines show how the pages link to each other.

As much as I always understood, in theory, the importance of sketching, wire framing, and prototyping first, last week this came home to me in a very real way. I tested out the mockup on the computer, and it all worked fine. So then I used the nifty option they give you of actually testing it on your phone!! All my menu items were too small and close together – I couldn’t touch them precisely enough with my fingertips to be able to navigate the site. So I went back to the drawing board and fixed it.
From what I understand, XD can do a whole lot more than this. But as a developer I am just using the very first stages of the tool, as I need to write all the code and functionality myself. I have a few more chapters on the coursework to get through though (AngularJS coming up). So between now and the October submission date, I should have lots more to tell you as my skills, and my web pages, grow.

... & more

Back to Top