Iristorm Design is the website for my freelance web and graphic design business, and of course, I created my own website.
The logo of Iristorm Design is the graphical fusion of two drawings—a human eye and a lightning bolt—together resulting as an eye with its iris and pupil in the shape of a lightning bolt.
My inspiration behind this came from the type of things I often scribbled in notebooks as a kid, two of them being lightning bolts (the cartoony kind) and eyeballs.
The made-up name “Iristorm” is a portmanteau of “iris” and “storm” which are words associated with the logo’s two combined visual elements.
I created the logo in Adobe Illustrator. It’s entirely vector based, and here on the website it’s been rendered as an SVG image. Simply put, this means that the image of the logo can be enlarged or shrunk to any size and it won’t degrade in quality.
The website’s color scheme is mainly yellow and purple, with tinges of orange and blue. The yellow comes from the color of the logo’s iris, and the purple is a complementary color to the yellow and evokes a mysterious, fantasy vibe. I used the web-based color wheel tool Paletton to devise the color scheme in a quasi-mathematical way.
Based on the stormy theme from the Iristorm Design logo, I gave the website a background image of storm clouds. This image comes from a stock photo that originally depicted light gray clouds, but I manipulated it to color the clouds purple and blue using a gradient shading effect in Adobe Photoshop.
Every page of IristormDesign.com has a layered background. The lowermost layer is the image of the storm clouds. The next layer up is a solid-color gradient background, which reduces the contrast of the details of the cloud image below in order to make the overlaying text more legible. On the home page, which is a long web page, the solid-color layer fades from dark purple to dark blue and back to dark purple for the sake of visual variation.
Icons in the Services Section
In the Services section of the home page, each of the eight subheadings has a graphic icon beside it. I designed all of these icons in Adobe Illustrator, with the exception of the icon of the WordPress logo (although I’ve modified its colors from the original).
For visual consistency, I made all the icons use the Iristorm color scheme. They include a yellow-to-orange gradient, a purple-to-blue gradient, plus black and white. The “white” comes from the same color as the regular text on the website, which isn’t pure white but actually an extremely pale blue.
Although I created the icons in separate Illustrator documents, I’ve combined them all onto an SVG sprite sheet image, then have them rendered on the web page using the SVG
<use> element. The benefit of using a sprite sheet is that it reduces the number of HTTP requests from several (one for each of the eight icons) to just one (the singular sprite sheet image), thus helping reduce the page’s overall loading speed.
Almost all of the text displayed on this site uses web-loaded typefaces provided by the Google Fonts API.
The “Iristorm Design” title and the site headings use the font Philosopher, which I chose because it has a kind of fantasy vibe like the rest of the site’s design. The site’s body text uses the font PT Sans, which I chose because the basic shape of the typeface’s letters looks similar to Philosopher’s, while also being a little more legible at smaller font sizes due to its simpler sans-serif styling.
Some of the small icons in use throughout the site—such as the three-line “hamburger” icon in the mobile navigation menu, or the curved left-pointing arrow by certain links—use customized icon fonts from IcoMoon. (I’m considering replacing the icon fonts with SVG images, which I may do in the future.)
Using CSS media queries, I’ve made IristormDesign.com with a fully responsive layout based on the size of the viewport of the user’s web browser. This lets the site’s pages look good on desktop computers and on smartphones and on anything in between.
The home page of IristormDesign.com is long and contains lots of images. A potential disadvantage of this sort of web page is that its total file size becomes too obese. This would typically cause a bad user experience, especially for users on slow or data-limited internet services, because the web browser would normally load all the images on the page at once, even the ones far off screen, resulting in longer perceived loading times.
I’ve alleviated that problem on this site by applying a technique known as “lazy loading,” which is to make images and other elements on a page download only just before the moment they get scrolled into view in the user’s browser.
loading” is used instead. I decided to apply Lazysizes on only the home page because the HTML
loading attribute currently isn’t supported by enough web browsers, and the home page is the page that needs lazy-loading the most.
Other Third-Party Assets
- Normalize.css: A CSS template that sets default properties on many HTML elements to ensure consistent styling among different web browsers.
- Cloudflare: A CDN (content delivery network) which caches the website’s files onto several proxy servers located throughout the world, which improves loading time and reliability of web pages. Cloudflare also provides basic SSL/TLS security.
- Google ReCAPTCHA: Blocks annoying spam-bots that fill out and try to send the website’s contact forms. (No, I am not interested in purchasing your Russian penis enlargement pills.)
- Google Analytics: Provides data to me, as the manager of the website, about how visitors browse the site.
According to an analysis by WebPageTest, IristormDesign.com aces all six categories in loading speed!
Similarly, an audit by Google Lighthouse reports that IristormDesign.com achieves excellent performance, accessibility, best practices, and SEO.
Old Versions of the Site
Formerly, IristormDesign.com had used the floats-based grid system “Susy” to set up layouts on pages. I later replaced it with the native CSS
grid property once it gained widespread support among browsers.
To read about some other websites I created, see Symbiomech Industries, The Mom’s Guide to San Diego, or Zicronsoft.