1 - 4 have varying line thicknesses. Thicker to thinner as you scroll down. I know you all feel pretty good about this version, but an idea came to me (5) as I was playing around with the line widths and I want to share it. I'm really feeling the boldness of 5. The negative space in the form of a circle is more interesting to me and it feels more defined at smaller scales. I'm looking forward to hearing your thoughts : )
Below is an animated gif file of the icons. This is how I'm imagining you would use the icons for display on the website. They would animate onto the screen and stop on the last frame without animating off of the screen.
Refresh your browser to start the animation over, or click the image to isolate and play the animation.
This is a looping video of the icons animating on and off of the screen to give you a better sense of the motion for each icon.
I'm imagining this style (animating on and off the screen) to be used for youtube videos and social media posts as a title screen or segue between content.
Use the full screen button to isolate the video and fit it to the screen size of your device.
I kept the backgrounds out of these animations since you requested black and white. As we continue to explore and refine the color pallet for the site I will upload white animated icons with color backgrounds.
Below are the updated icon backgrounds. I shifted the hue of the blue, changed the highlight colors for Journal and Events, and shaded each background.
Here are the latest round of revisions to the icons. I added different highlight colors to the blue and green gradient and saturated all of the colors to make it a bit more vibrant. I removed the overlapping shape outlines around the icon. I reworked the background as well, drawing from the original drafts but making the pattern a bit more arrow like.
The top version is using the font Serenity. The bottom version is using the font Classico.
I haven't starting working on the logo yet, as I want to finalize the icons before we shift the focus to the logo.
Here are some additional drafts with revisions based on the feedback from the last meeting. I reworked the journal icon to include an additional water line and a sun. I also added overlapping shapes to serve as containers for the icons. The backgrounds for each icon now have different hand-drawn textures as well. I shifted and desaturated the colors towards a muted earth tone palette.
Once we are all satisfied with the appearance of the icons I will start animating them.
Fonts // I still prefer Serenity Bold, which is the font used above, but below you will find some other font options. If you click on the images and scroll over them the name of the font will appear.
The icons are designed to have a hand-drawn appearance. I intended to communicate tangibility and human expression with the design. To me this feels aligned with the qualities of a concerned citizen cooperative. I feel like the appearance and overall aesthetics of The Shakti Journal should have the feeling of a well crafted hand made protest sign. With that in mind, I chose to make symbols of the natural elements/objects representing each portal rather than using photorealistic images. I drew inspiration from Pagan, Hindu and Southwestern geometric patterns and iconography.
I spent some time playing around with logo ideas for this presentation. A sans-serif typeface feels much better to me than the existing serif font you are using. Sans-serif fonts have a modern quality. They feel youthful and minimalistic. It complements the simplistic hand drawn shapes in this version of the logo.
Below you will find a static version of the mobile homepage and a video of the animated journal icon.
This video file is looped to give you a better sense of the animation. On the website, I'm envisioning an initial animation to reveal the icons. Following the intro animation for each icon the home page becomes static. For videos and other social media applications it will make more sense to animate the icons on and off of the screen to transition to other content.