Iristorm Design

Website, logo, and other graphics

Iristorm Design is the website for my freelance web and graphic design business, and of course, I created my own website.

Iristorm Design logo
The Iristorm eye logo

Logo Design

The Iristorm Design logo is an abstract eye with its iris and pupil shaped like a lightning bolt. The logo, which I created in Adobe Illustrator, is the visual result of visually merging an eye and a lightning bolt together. The inspiration behind the design of this logo came from little doodles I used to draw in notebooks as a kid, and many those doodles were eyeballs and lightning bolts.

Web Design

Iristorm Design home page
A zoomed-out view of the whole home page of

The home page of the Iristorm Design website is divided into six sections: Intro, Portfolio, Services, Testimonials, About Me, and Contact Me. Since each of these sections were fairly small, I decided to put all of them on a single long home page rather than on separate smaller pages.

Based on the “stormy” element of the Iristorm logo, I gave the website a background of storm clouds. The website’s color scheme is mainly yellow and purple; the yellow comes from the logo’s lightning-bolt-shaped iris, and the purple is a complementary color to the yellow and adds to the mysterious feel from the logo.

Each subheading in the Services section of the Iristorm Design homepage is represented by an icon beside it. All eight service icons use a uniform yellow/purple/white color scheme, matching the website’s overall color scheme.

Web Development

I fully hand-coded the website with HTML, CSS, and PHP, plus a little JavaScript. Formerly, I had used the SASS-based grid system Susy to set up the web pages’ layout, but I later converted it to the recently released native CSS grid layout system.

The Iristorm Design website is fully responsive to browser viewport widths, so the layout contracts or expands based on the available space. At narrow viewports, the main navigation menu collapses into a single drop-down “Menu” button.

This website utilizes various code libraries and services, including:

Website Performance

According to an analysis by WebPageTest, aces all six categories in loading speed!

Results from on Iristorm Design
Click to see images in larger size

Similarly, an audit by Google Lighthouse reports that achieves excellent performance, accessibility, best practices, and search engine optimization.

Google Lighthouse report of

Similar Projects

To read about some other websites I created, see Symbiomech Industries, The Mom’s Guide to San Diego, or Zicronsoft.