1.0Overviewso, basically...

The design team at Norris Design wanted development assistance and advice for their new site. Providing expert input along the way, I built a modular WordPress site, matching designs and allowing for significant page reconfiguration for future pages (without requiring a bloated page builder plugin).

Services

Details

  • Partnered with design team to code their designs into reality.
  • Provided expert advice from a dev’s perspective on many features.
  • Built on WordPress with many modular options for building new pages.
Screenshot of website development for Norris Design

2.0Testimonialspeople are talking

refresh 'em!

After wrapping up the Norris Design project, MR H. said:

I would recommend Aquamarine to anyone who wants to create a website that’s extraordinary.

Thanks MR! I’m inclined to agree, but I may be biased.

MR H. was commenting on some slick animation demos when she noted:

Sweet! The new expansions are so smooth — looks like Ginger Rogers and Fred Astaire dancing one of their best routines! Thanks, Tomas.

You’re welcome! Great artwork is recognizable in any form.

3.0Special Highlightslet me draw your attention to...

3.1Animating Squares

One of Norris Design’s primary goals for the website was to show off their creative work, so they wanted project filtering to be attention-grabbing. They wanted projects to animate slickly into view as they loaded, and they wanted a quick view expansion feature that reshuffled non-expanded projects to fill the available space. No problem!

I used plugins called Isotope and Masonry to create this functionality, and pitched a snappy, code intensive option as well as a cost-saving, more traditional option that Norris Design ultimately chose (saving money’s always a good thing if the features are still solid.)

3.2Animating More Squares

Norris Design also wanted a unique grid effect on the Ideas page that housed their blogs. Going off some basic preliminary designs, I ended up creating something that looked fine, but restricted the grid sizes they could use and didn’t match the flexibility they’d been hoping for.

I offered to rebuild the feature at no cost since I’d misunderstood how the feature was meant to work. I was able to reuse the Masonry plugin from the Work pages to recreate the grid, allowing for a huge amount of flexibility in grid shapes and sizes to match the design’s original intent.

WordPress backend demo animation

3.3So. Many. Heroes.

Norris Design had many ideas on interactive ways to engage users viewing their projects. There are plugins out there, but none provided the unique combination of features Norris Design wanted. So, I built a hero creator to add media to the top of project pages with lots of options.

The result allows for images, Vimeo videos, before/after dragable image overlays, and virtual reality interactive maps, any of which can be mixed-and-matched within sliders, auto-sliding with arrows or with thumbnail carousel navigation. And there’s a full screen video option for a grand impact on the home page. So. Many. Options!

Lots of options means lots of complexity, so I took care to ensure the WordPress back-end editor made creating these heroes easy, distilling this complexity into logical groups with simple controls.

4.0Technicalfor the geeks

4.1Drawers

I’d worked with developers who created a sort of sliding drawer effect under a grid of images to provide information on each individual grid item, but I knew they had some issues on mobile screens. Rather than reverse engineering and trying to improve upon this existing code, I decided to develop the feature completely from scratch.

The logic is somewhat interesting: once you click an image in the grid, the script starts checking each following image until it notices one that’s beginning a new row. It then generates a “drawer” and populates it with hidden information from the originally-clicked grid image, inserting it above the new row. This allows the feature to work with any grid configuration (two across, three across, four across, etc.) even on mobile screens, fixing the issues I’d had with existing options.