I recently completed a project called Company Home Page with Flexbox as part of Codecademy’s Full-Stack Engineer Career Path. The project assignment was to design and build a home landing page for a business using HTML and CSS, with an emphasis on CSS Flexbox techniques.
I chose to spin up a fictitious cybersecurity consulting business called OAKTREE to use as the basis for my website. This article covers the tools, processes and techniques I utilized to build the OAKTREE brand and landing page.
You can check out the website and Github repository of my finished project to go along with this article.
The fictitious cybersecurity consulting company that I created for this project was largely inspired by the philosophies of Dan Geer.
Geer is a security analyst, writer and CIO of In-Q-Tel, the non-profit venture arm of the CIA. He is a security industry veteran and thought leader, and places particular emphasis on designing “off-the-grid” backups to keep our critical infrastructure running when the internet goes down.
I thought it would be cool to devise a cybersecurity consulting business that specializes in these “off-the-grid” backup strategies, and thus OAKTREE (Offline Alternatives Known To Rectify Entropic Events) was born.
I first discovered Color Hunt from one of Shantanu Kumar’s awesome design videos, and it has since become my favorite tool for finding crisp and cohesive color palettes.
I felt that a clean, calm and professional color scheme would fit best with the OAKTREE brand. I used the Random feature on Color Hunt and scrolled through palettes until I found a nice blue/green/off-white combination that fit the bill.
I employed the use of DALL•E 2 to expedite my logo design process. DALL•E 2 is an artificial intelligence tool created by OpenAI that can generate images based off of written prompts.
Here is a breakdown of the process I followed to create the OAKTREE logo utilizing the amazing capabilities of DALL•E 2 and Adobe Illustrator:
1) Define the vision
I first decided on what kind of logo mark I was looking for: a simple acorn vector.
2) Enter prompts
It can take a few tries and some tinkering to come up with a prompt that yields pleasing results from DALL•E.
On my sixth prompt attempt, DALL•E generated a result that I was happy with: a simple and visually appealing image of an acorn that would fit perfectly as a logo mark for the OAKTREE brand.
3) Vectorize
This step requires access to Adobe Illustrator, but could be performed using a variety of other tools and techniques.
I imported the DALL•E generated acorn PNG file into Adobe Illustrator, then performed Image Trace to vectorize it.
I then deleted all unnecessary vector components, stylized the acorn with the brand colors, picked a font and added the OAKTREE text, and that’s all she wrote. The logo was completed from start to finish in under 20 minutes.
I used Adobe Illustrator to create a mockup of the OAKTREE landing page, working off of the color scheme and brand logo created in Part I.
I focused only on a desktop sized mockup and did not worry about the design of smaller screen sizes. I also did not create any sort of style guide and instead selected fonts, layouts and component styles on the fly to save time.
I utilized simple Google Image searches to find visually appealing photos for the first two sections of the site.
One of the requirements for this project was to include photos of company employees on the website. To accomplish this in a quick and effective manner, I again turned to artificial intelligence and leveraged a website called This Person Does Not Exist.
Created by Phil Wang, TPDNE utilizes generative AI to render hyper-realistic images of people who do not actually exist. Simply visit the website and refresh the page, and a new AI generated human will appear.
Using TPDNE, I was able to quickly gather six high quality images of people who looked like they might work for a cybersecurity consulting firm, assign them a name and title, and the task was complete. It’s a bit eerie how realistic and believable these AI generated humans can appear to be.
With the mockup design complete, I was ready to dive into the development phase. I utilized the handy Live Server plugin within VSCode to launch live previews of the landing page as I built out the HTML and CSS code.
Per the project guidelines, I relied heavily on CSS Flexbox techniques in the development of the site. I also utilized media queries to optimize the site across screen sizes.
You can view the final result of the OAKTREE landing page and check out the site’s source code on GitHub.
This project was a great opportunity to practice converting a design mockup to a developed website. Putting in the extra effort to create a fictitious brand with a highly realistic look and feel was very worthwhile. It made the project feel like a real world web developer assignment.
I continue to be amazed by AI tools like DALL•E 2 and TPDNE and find them extremely useful to incorporate into my design processes.