Illinois Sikh Community Center

My task for ILSCC was to rebuild their website with modern aesthetics and design standards. The design was a bit of a challenge simply because this is a religious organization and their design requirements were a little bit more stringent as compared to a typical corporate design.

Other challenges for this project included the need for a custom event booking capability that would incorporate a calendar of religious events/functions.

Lastly the site design had to be very familiar in design so that it didn’t feel too complicated for users.

Wireframe

I first discussed project requirements with a board member that was able to define project requirements for what was needed in the website design.

Their first priority was helping the surrounding community understand what their religion is about and what their mission is. So I felt the homepage needed to have that information upfront.

Next they wanted a place to share religious functions events to the members of the society.

With all of that information in hand I started working on some hand drawn examples what might appeal to community members. I also looked at websites of various churches around the area and incorporated those themes along with the requirements that the board members had communicated with me.

I had a basic idea of what the website elements needed to be so started doing some research on colors.

The color of Saffron is a large part of the Sikh faith and so I wanted to see what I could do with that color specifically. Also I am a huge fan of the Material Design Standard championed by Google so I started looking through their documentation on how to incorporate certain colors together.

The final outcome was that a royal blue/saffron color combination would work best for the designs.

Design "Atoms"

With the colors in mind I started working on the “Atoms.” These atoms are what will build the components used throughout the website.
The atoms define the font, color, style of all the elements that are shown throughout the website design.

Components (molecules)

After designing the atoms. I could start designing the various components that are used throughout the site.

The components I needed to design were already evident based on the wireframes I had constructed. This step also allowed me to consolidate large parts of the site where components were similar enough that they could serve multiple purposes.

In this step I was also able to play with the colors adjusting them as needed to maintain visibility and contrast.

With all of that work, now I had the “molecules” that would now build the final page elements. These are the building blocks that would finally build all of the pages that are needed.

Illinois Sikh Community Center

Wireframe

Design "Atoms"

Components (molecules)

Share this:

Related