IristormDesign.com (Old Version)
Iristorm Design is the website for my freelance web and graphic design business, and of course, I created my own website.
Note: In May 2022, I published a redesign of the Iristorm Design website. However, this article, for now, is still about the site’s old design, much of which is no longer relevant to the current one. I plan to rewrite this article later with updated descriptions and screenshots.
Logo 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.
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.
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 had chosen 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 had chosen 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.
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 making 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.
Other Third-Party Assets
This website uses other JavaScript libraries, APIs (application programming interfaces), and other assets not yet mentioned, including:
- 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) for caching 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.
- SmoothScroll: A JavaScript library used on the home page. It makes the web browser scroll the page up or down in a transition (rather than instant jumps) when navigating between different sections on the home page from the site’s navigation menu.
- Autosize: A JavaScript library that lets text boxes (on the site’s questionnaire page) to expand vertically as more text is typed in it.
Website Performance
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
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.
Just Getting Warmed Up!
If you or your company is in need of a website or logo, consider hiring me for the job!
Similar Projects
To read about some other websites I created, see: