Csevak

Custom design and development in Adobe XD and WordPress respectively

csevak

My task for Csevak was to build their android and IOS app and their brand identity comprising logo and service name with modern aesthetics and design standards. The design was a bit of a challenge simply as 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 events/ functions.

Lastly the application 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 app design.

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 apps of various security apps and incorporated those themes along with the requirements that the board members had communicated with me.

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

The color Blue came from Ashok Chakra, national symbol in India representing wheel of duty. Blue also symbolises Calm, Trust, Professionalism and responsibility which our service was focused upon, appealing both to men and women.

Whereas, Grey represents Professionalism, Convenient, Dependability and is a responsible, Mature, safe and  serious color This color also communicate Authority & Stability.

Moreover, Green also has a symbolic value in Indian flag representing growth and development, Wealth, Stability, Influencing and a color of Call to Action

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.

Design "Atoms"

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

Components (molecules)

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

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 screen elements. These are the building blocks that would finally build all of the screens that are needed.

csevak Logo design

Share this: