Hope For Life
Responsive Design Process
In 2010 I helped build a nonprofit school/orphanage in Haiti. The website needed a lot of adjustments to help gather more support and donations from online do-gooders.
Sketching out my ideas for placement of different elements on the screen helped me to visualize the possible issues for visual hierarchy, balance, UX, space, and organization.
Sitemap sketch
Sketching out the sitemap helps to organize what information needs to be within each tab. As I designed each tab I could check my site map to know how much content to fit in there.
Gathering assets
Using the grids I could clean up my ideas into a much more detailed and clear design that could help with continuity, and familiarity across the responsive layouts. The assets I had already created needed a few changes but having them already handy made the process more efficient.
Since mobile phones are the device most used to access the internet I started my responsive design from mobile and then moved on up the ladder to desktop.
Mood boards
Creating mood boards helped me visualize and get a feel for what colors, images, and typography would work well for a Haitian orphanage/school. I researched colors and photos that symbolized hope, love, honesty and so forth. It needed to be attractive and engaging but not overwhelming. The dire situation these children faced in Haiti also needed to be felt. I chose grey to be a neutral color that might hint at the dire situation, yellow to symbolize hope for a brighter future with help, green for growth and honesty, red for eye catching visual hierarchy for the most urgent callouts on the screen.
Surface Comps
Starting with the mobile phone once again I made surface comps to see how all these colors worked together to create an appropriate mood and effective call for help. Then worked the surface comps over to tablet and desktop screens.
Final Touches
To make the typography stand out more clearly I created scrims to work over the top portion of photographs.
Conclusion
The end result was a well designed website that had the appropriate organization, layout, design, color and mood to fit the projects needs and desires. Using sketch was very effective for keeping the details in line with a grid and keeping consistency across all pages.
