As part of my school’s course, one of it’s assignments is to implement the frontend of a mobile-responsive website.
I didn’t want to dive straight into the design as it was important to sort out the requirements of the website and it’s intended goals, audience, etc.
For a head-start on exactly how and where to begin, I am going to refer to Brad Frost’s guide when he redesigned the Pittsburgh Food Bank, haha. For one, it’s a nonprofit as well. Secondly, he laid out his timeline and steps very clearly on his website on the whats and whatnot to do.
Let’s go!
My first step is to-
Decide what should be prioritized for the website — because we want to know what should be the most prominent menu items, I did some URL mapping.
URL mapping — as the site has has existing Get Involved, About , and Our Services Page, I will keep those as the main pages to redesign, alongside the home page.
They have a Donation subheader, but I noticed that it was a static page with just an embed donation form in pdf. To make the Donate Now CTA more outstanding, I have decided to dedicate a separate page to it as well as a section as part of the home page (more on that below).
The final mapping of URLs look like
/donate-now
/about-us
/our-services
/get-involved
The next step — doing wireframes with style guides and content layout in mind.
For this, I am using Axure to prototype (but I have done until the index.html page only, due to lack of time :( ).
For the index home page, I featured 3 main thumbnails from each section: News, Our Services, and Events for equal showtime and to reflect updated content, as I felt that dedicating the home page to one main section would be pretty unfair.
For the Donate Page, I added a Donate button in the home page as a CTA. This is then redirected to the Donate Page where users can just fill in their desired donation amount.
That is just about what I had managed to do within the past 2 weeks or so, from deciding what to redesign, looking through references, and determining what layouts to adopt.
What I’d learnt:
That it is really important to plan in modular steps. What I mean is things like page structures, what components are appropriate, and the styling of the components should be planned early on. Otherwise, you would end up like me who decided to change the fonts of the body at the last minute.
This has been a good practice for me as I learn more about web design principles and semantics as well.
Feedback welcome! More on github.com/jlin95/Lab1Assignment.
