Iristorm Design

Website

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

Iristorm Design logo

Logo Design

The Iristorm 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 result of visually merging an eye and a lightning bolt together.

The inspiration behind this logo came from little doodles I used to draw in notebooks as a kid, and many those doodles were eyeballs and lightning bolts. (I don’t know why, but I just liked to draw those things.)

Iristorm Design home page

Web Design

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.

Basing off 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 websit’s overall color scheme.

Web Development

I fully hand-coded the website with HTML, CSS, and PHP, plus a little jQuery. I used the SASS-based grid system Susy to establish the web pages’ layout.

The Iristorm Design website is fully responsive to viewport widths. 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 JavaScript and jQuery plugins, including:

  • Modernizr – Detects whether or not the user’s web browser supports certain cutting-edge features, and if not, provide a way for the developer to make an alternative solution. For this website, I’ve set up Modernizr to detect support for flexbox and SVGs.
  • Picturefill – Old versions of web browsers don’t natively support the code for HTML 5 responsive images. Picturefill allows these old browsers to understand that code.
  • Responsive Nav by Viljamis – Adds basic functionality for an expandable and collapsible menu (visible on narrow viewports).
  • jQuery Smooth Scroll by Karl Swedberg – This is for the tall home page of this site. When the user clicks on one of the section links in the navigation menu bar, instead of the page suddenly jerking down to that section of the page (as is the default behavior of web browsers), this plugin makes the page slide down smoothly instead.
  • AOS (Animate On Scroll) – Makes elements animate on the page when they scroll into view in the user’s browser. JavaScript sets the triggers while CSS does the animations.
  • Magnific Popup – Lets the user click (or tap) on an image, and a larger view of the image pops up over the page. This is used for some images on some portfolio pages.
  • Google Analytics – An advanced online tool that provides data to website managers about which pages of the site visitors tend to go to, how long visitors stay on the page, where in the world the visitors are browsing from, etc.