Over the past few months (Since September), I've been working on a new website for my cadet unit. Our current one leaves much to be desired, especially when it comes to using it on mobile devices, so I'd decided to create a new website using a mobile-first approach.
I decided to build the new website on top of WordPress, a popular Content-Management-System (CMS). Since I was building a new site anyways, I thought I'd go all the way and create the design and code myself, completely from scratch. Now, I've had experience building WordPress themes and plugins before (that's my job, after all), but those projects were generally building on top of someone else's work, be it design or code or both. This project would be the 'first' site I've built completely by myself, from starting with a design prototype to delivering a finished product.
I decided to build the new website on top of WordPress, a popular Content-Management-System (CMS). Since I was building a new site anyways, I thought I'd go all the way and create the design and code myself, completely from scratch. Now, I've had experience building WordPress themes and plugins before (that's my job, after all), but those projects were generally building on top of someone else's work, be it design or code or both. This project would be the 'first' site I've built completely by myself, from starting with a design prototype to delivering a finished product.
Excited to start work on the project, the design mockup stage consisted of mostly a general structure of how I wanted the mobile version to look. From there, I got started building the plain HTML prototype of the new site. As I worked on it, I hashed out more of what bits of the design I did and didn't like.
By the end of the HTML mockup phase, I had the structure and overall design figured out (the results of which are available below) and I was ready to move onto the active development phase.
By the end of the HTML mockup phase, I had the structure and overall design figured out (the results of which are available below) and I was ready to move onto the active development phase.
Now that I was able to easily add in demo content to the site as I worked on it in this phase, I was able to refine the design even further, continually making adjustments to bring the site closer to what I envisioned it as. Of course, there are still many small tweaks to be made, and continual improvements / additions that will occur as the site is run, but I'm currently just a few small items away from finishing it up enough to put into live production. The current design is below: