Summary
This project is a mix of graphic design and web design. While a straightforward project, it required me to reach deeper into my toolbox and utilize not only my knowledge of graphic design, but UX/UI design, CSS, and HTML as well.
As with most design projects, the first attempt isn't always your best, and strong communication with the client is absolutely necessary to avoid any pitfalls. Such was the case for the logo design in this project. Below I showcase 2.5 versions of the logo and share its development process.
Role
Graphic and Web Designer
Timeline
2 weeks
Deliverables
-
High-fidelity wireframe
-
Digital illustrations
-
Logo design
-
Business card mockups
-
WordPress implementation
-
Improved webpage SEO
The Landing Page
The landing page was simple - I was given information to be included in the website's header and body paragraphs. My client granted some freedom in determining the layout for the page's content, but was specific about using digital illustrations/graphics to compliment the copy on the page.
Given the quick turnaround required for the project, I did not have the time to create my own illustrations. Instead, I licensed artwork from blush.design and modified it to meet Sky Rise High's needs.
I used Figma for the wireframe, and for the landing page used custom HTML tags and anchors, CSS, and Flexbox to recreate the wireframe in WordPress.
The Logo Design
Initially, the Skyscraper, or "sky rise," was an important piece of imagery for the agency's brand. However, my client opted for a monogram using the company's initials rather than a symbol for the logo. For the first version, I tried representing the structure of a skyscraper within the monogram. Following a meeting and design critique, my client decided a simpler, more straightforward approach was best.
Logo v1
As an example of a design getting away from me, I struggled to represent a skyscraper in the monogram logo while keeping each letter clear and recognizable. In particular, the "r" lost its identity.
Instead of immediately trying a new approach, I used the monogram in business card mockups to give my client a visual context for their branding. This then facilitated our discussion on what my client thought was working with the logo and what they disliked, giving me valuable feedback on how to proceed.
Logo v2 and v2.5
From meeting with my client, the main takeaway was the logo needed to be simplified with an emphasis on symmetry. I presented two versions:
The first emphasizes the "s" with a pop of color, while the "r" and "h" are one fluid shape. Already, this posed the potential issue of the "r" being interpreted as an "n".
The second utilizes the "r" hook's angle for the tail and head of the "s", bringing greater unity to the monogram and emphasizing each letter individually. This version was chosen as the final iteration of the logo, with a gradient applied to each letter per my client's preference.
Both versions are showcased below in mockups.
