THE PROCESS
Sonik started with an abundance of diverse research. First being a google survey to see preferences people have when it comes to general magazine content.
With this information I went on to further my understanding on magazines and the specific topic with a SWOT analysis, problem statement, user goals, user problems, personas, and an empathy map.
I then started visual research for the inspiration for the magazine brand and feel.
The final logo was made to emulate sound waves and as Sonik is about history and origin of gear the “loudest” is the start so the sound wave peaks at the ‘S'.’ The green colour and other branding colour elements were referenced to common electrical wires.
Then combined the wireframes and Sonik’s brand to further the loose development. With this I created a system with font and sizes for levels of hierarchy, I imported icons and colour variants. Additional made cards and auto layouts for featured articles, login page, subscription page, etc.
THE PROTOTYPE
Finally, after combining all the elements and creating a design system. I was able to apply these to individual functioning app pages. It currently consists of a login/create account page, a home page with a carousel, a saved page, and an account page. I kept layouts clean and simple to allow for easy usability and incorporated the brand identity that has a vibrant feel to make the layouts more interesting visually.
Which led me to the beginning of Sonik Magazine. I started with the logo. At this point there was experimentation with the normal ‘Sonic’ spelling as well as adding the ‘circuit’ to the end. I played witha few different electric visual effects; static and wire colours mainly.
At this point I also made a user flow diagram to outline a potential issue a user may face and the steps it would take to solve this issue and ensure everything can function accordingly.
CREATING THE PROTOTYPE
First I started by researching current existing apps and websites that functioned in a way similar to the vision I had for Sonik.
I then after I found layouts and functionalities that I found interesting on other sites; created wireframes for the rough beginnings of the Sonik app.