"Help brands grow organically and solve business problems with our digital products and strategies".
"To create a more successful, genuine and entertaining way to run a digital marketing agency."
Many times in website projects, there isn't an established branding yet, that's why in this case I included the process I went through to create the visual identity of Darkwhale Studios. Branding is critical in getting the audience engaged in the site, generating leads and creating new customers, which is why is so important make a good first impression and efficiently represent the brand's voice.
The first thing we did was identify concepts and ideas related to the nature of the crypto, technology, youth culture and whales, to create a brand identity that reflects the name of the brand, the target audience and the industry we're aiming for. I searched for images that represented those concepts and added them to the branding moodboard. We also took colors from those images, to get a possible idea of which colors would fit our identity better.
The logo had to be simple and abstract, but also original. It had to broadcast the idea of the Darkwhale Studios brand and to encapsulate its essence. We decided to add an element of a whale, since it was in the name, and also because in crypto spaces, a whale is an organization that holds a large amount of cryptocurrency, allowing them to make a great impact on the markets.
Here are some intermediate ideas and high fidelity sketches we made during our discovery:
Before defining the logo, we decided on a color palette based on the moodboard discovery, so we could pinpoint which colors would represent our brand and have a good impact on our audience. Some colors from the photographies of the moodboard were chosen, but sometimes real-life colors can be a bit dull for the web, so I adjusted them to make them brighter and more saturated so there was a proper contrast between them:
Ultimately, we chose the middle top option from the logo discovery image, since it was simple and stylish version without being too abstract, and we changed the orientation of the icon in order to give it a better balance once placed beside the logotype:
Afterwards I defined the three main states of the logo, which would be the main logo integrated by the logomark and the logotype, in a horizontal format; the logotype which would only include the name and the slogan; and the logomark, which would only be the icon and could be used for smaller formats like favicons or social media avatars. All this different states would have assigned colors that they could be used on either dark or light backgrounds.
I defined two fonts as the main and the secondary one. The former is called Mattone, a wide display font whose curves and straight cuts makes it stylish and attention grabbing. This font has a personality of its own, which makes it great for main headings that are for attracting our audience with bold statements. The secondary one is Manrope, which is a modern sans-serif font family with different weights, which would work for smaller headings in its heaviest weights and for paragraphs on its lighter weight. This fonts is very easy to read for long paragraphs, which makes it great for websites.
Finally, we created abstract graphics that were similar to our logo concept - geometrical and clean shapes - so we could create a visual language associated to our brand and keep consistency within it, using them across our web platforms and graphic materials.
For bigger projects this is the stage in which I normally create user flows, to get a better understanding on how much pages would we need to get done and how would they connect between them, but since we were starting with just a landing project, I felt it was okay to jump straight into wireframes. This helped me ensure the content and elements of the website were positioned correctly before starting the actual high fidelity prototypes. This could also help me start receiving feedback faster from the client and avoid making mistakes on the final stages of the process.
Below are the final wireframes that helped me visualize the "skeleton" of my site, from which the final form would be built upon.
A design system is the documentation I use to organize the visual language previously done for the brand, but it also has UI components such as buttons, forms and headers, with each of their different variants and states. Since I make this library of elements right on Figma, it helps me immensely once I start creating the actual interface, because I don't have to waste time thinking "what button I should create here?" I just grab the pre established button from my library, place it where I want and select the variant I want in the design panel. Besides saving time, this can help the client's design team expand their website or create other digital products without needing my help to do so, all while maintaining consistency with their brand.
With the design system library and the wireframes stablished and approved, I continued to design the final product, both the mobile version (mobile-first always!) and the desktop one.
The process of creating a new brand from 0 always feels exciting to me, since I get to have creative freedom without constraints or limitations from previous design guides. It's also a great challenge because you have to study your market and back your decisions with solid reasons, so at the end it there's not total freedom, but that's even better, because the result is almost always a brand that fits into its niche, meets expectations from both the target audience and the clients/stakeholders, and appears seamlessly integrated on every channel of communication. All this forms the basis for the brand’s further growth and development, breeds trust and the desire to engage with it.
If you liked this project, you can check it out live here, made using Webflow :)
If you like what you see and want to work together, get in touch!