Logo & Palette
The organization's current logo was provided and we created a color palette based on the colors present in the logo.
More on the usage of the color palette later.
Wireframing
The first step was to start with a few wireframes to capture the most important sections of the website as per the requirements.
Designing without color or real images is great at this stage since everyone gets to concentrate on the layouts and structures.
Design Mockup
The second step in the design process was to create a mockup based on the approved wireframes.
Stock images and the color palette was finally used.
Design Process
The website is designed completely with the help of Adobe XD, and drafts of the design were shared with the team via XD seamlessly. It also helped to capture review comments.
The Mission Section
The organization works under five main tenets, and we decided to signify each with a unique color from the palette which was created from the logo.
A number of ideas were bounced around to incorporate this, and finally selected the above layout.
The Final Design
Finally, once the mockups were approved we began to develop the site incorporating a few suggestions.
The site is powered by Wordpress, using a custom layout engine. Wordpress helps with the content management and ease of customization.