IristormDesign.com

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.

Logo Design

Iristorm Design logo
The logo of Iristorm Design

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.

Web Design

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.

Screenshot
The intro section of the home page

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).

Screenshot
The Services section of the home page. (The cloudy background appears bluer here because the home page’s background gradually changes color going down.)

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.

Fonts

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.)

Web Development

I hand-coded the website myself with HTML, CSS (compiled from SCSS), JavaScript (excluding some third-party JavaScript libraries), and PHP.

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.

Screenshot
Just one example of responsive web design in action on this site. The layout of the “Contact Me” section on the home page, including the fields in the contact form itself, changes significantly depending on the current width of the browser viewport.

Some of the JavaScript I coded includes the behavior of the accordions (open/close boxes) in the About Me section of the home page, and making the site navigation menu functional with not only mouse clicks and finger taps but also keyboard accessibility.

Certain elements in each section on the home page visually transition into view as the user scrolls through the page. This is done through the JavaScript library AOS (Animate On Scroll).

Most pages of my portfolio items on this site contain images within links, which users can click on to bring up larger images over a darkened background. This is achieved through the JavaScript library GLightbox. To speed up the overall loading time of other pages, I made GLightbox load only on the specific pages where it’s needed.

Lazy-Loading

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.

On the IristormDesign.com home page, the lazy-loading functionality comes from the JavaScript library Lazysizes. On secondary pages, the native HTML attribute “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.

Screenshot
My workspace in Visual Studio Code

Other Third-Party Assets

This website uses other JavaScript libraries, APIs (application programming interfaces), and other assets not yet mentioned, including:

Website Performance

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

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

Similarly, an audit by Google Lighthouse reports that IristormDesign.com achieves excellent performance, accessibility, best practices, and SEO.

Google Lighthouse report of IristormDesign.com

Old Versions of the Site

The site originally employed jQuery, which is a JavaScript library that’s been in popular use by web developers for a long time, but in recent years has been becoming redundant thanks to the release of more advanced versions of JavaScript. I’ve since converted all code in jQuery to vanilla JavaScript and removed the whole jQuery library, which has helped slightly quicken the loading time of pages on this 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.

Similar Projects

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