Stoverpix Projects — Design

Take a closer look at a few of our projects

Ingenuity Product Interface Interactive Mockup

Ingenuity Product Interface Interactive Engineering Spec

Interactive Product

This is an engineering spec which not only shows the design and asset placement and animation, but supplies the engineer with all the actual vactor assets required to build it out. NOTE: this is a tool optimized for a larger screen so text here is smaller than on final implementation.

SEMI-PRO Video Widget Prototype

SEMI-PRO Video Widget Prototype

Widget

This widget allowed users to download music and video assets in order to create their remix and blend their own SEMI-PRO music video trailer and win prizes. I created this as a Hi-fi mock-up for how it would look and function and delivered the raw .fla assets to engineering where they broke it into separate components which where translated into a reusable template architecture. This was the first of many projects to leverage that architecture. It’s like a micro-site on your social networking page.

NOTE: This was created when Adobe Flash was still a technology used for interactive media.
Below is a video demonstrating the interactive qualities.

Socius Group Website

Socius Group Website

Socius Group Logo

Goal:

Stoverpix worked with the Socius Group team to update the entire brand to better represent the personal, bold, yet fun and friendly approach they take with clients and projects. One of the first orders of business was to develop a style guide with updated logo, color palette, font usage and icon style. We then used that to define the website. It was very important that the website be easily updated with very little technical expertise. Stoverpix chose the WordPress DIVI theme to achieve that. 

Features:

  • Updated logo
  • Easy to implement styling across the entire site
  • Easy to update content that automatically formats for all devices
  • Fun Icon set which pops to help enhance the message
  • A library of easy to implement tiled backgrounds to add character to simple text messages
  • Easy to update Testimonial carousel slider
  • Popover Team member pages
  • Optimize SEO
Socius Group Home Screen

Logo Update


 

Original Logo:

Conceptually this logo is working well with the 2 mirrored shapes making an S but feels a bit too generic and corporate.  

Redesigned Logo:

By adding the red dot in the middle we tie the picture symbol in with the “i” in the text—and giving it a 15° tilt we add a bit of personality or attitude missing from the original.

Who We Are Page
Team Member Popover
Mobile Menu Dropdown
Contact Us Form

Cyren Phishing Cyber Threat Report

Cyren Phishing Cyber Threat Report

Golden State Youth Orchestra Logo

Cyren’s cloud-delivered security services protect over 600 million web and email users against Internet threats. Cyren entrusted Stoverpix to design and produce their Phishing Cyber Threat Report for 2016. This is a 26 page report which is a deep-dive into the intricacies of the inner workings of phishing, the history of phishing, and and how Cyren can protect clients from being a target of the Phishing attacks. Stoverpix is responsible for all aspects of design, production, output, and overall visual conception of an infographic, many custom charts and everything creative.

GSYO Home Screen

Reach for Home Website in SquareSpace

Reach for Home Website in SquareSpace

Reach for Home — Housing for People. Skills for Life.

Reach for Home (formerly North Sonoma County Services) worked with Graybird Foundation to create a new brand to more accurately represents the services rendered to the surprisingly large number of homeless in this normally perceived affluent community—which according to the 2016 Sonoma County Homelessness Census and Survey, nearly 3,000 adults and children live without housing. Three times higher than the national rate of homelessness.

SquareSpace was chosen as the website framework to facilitate ease of management for a generally non-technical staff and take advantage of the tightly integrated donation and commerce tool offerings. However there are design challenges within the SquareSpace infrastructure in that none of the template offerings accommodated all the design requirements we envisioned. StoverPiX did an extensive evaluation of all SquareSpace templates and settled on the Adirondack theme for it’s strong commerce features and secondary navigation options. Custom code was written by StoverPiX to enhance the theme and achieve the design requirements the theme was not designed for. See the bottom of this page for specifics.

Surviving Skokie Movie Website

About Reach for Home


The purpose of the Reach for Home programs is to provide opportunities and support for clients to work toward self-sufficiency, independence and permanent housing. Clients team with a case manager to help access resources and services that will help them make necessary changes in their lives. Furthermore, our program offers clients the opportunity to gain self-confidence and to become self-sufficient.

How We Hacked (Enhanced) the SquareSpace Template


SquareSpace can be a slightly frustrating environment if you are a designer intent on having your design be explicit to your vision. Luckily they do allow you to re-style the CSS to a surprisingly large degree, and if you really want to get geeky, you can enter developer mode and rework the entire template—or create your own custom template. Below are a few shared CSS code snippets you can copy/paste which may be helpful for those interested in adding similar features to SquareSpace.

Reach for Home CSS Editor
Modern full-width content area

Adirondack does not have an option for full-width content. In the case of the homepage, I made the entire page full width and the rest of the site is constrained to the standard 1180px but is never boxed in. This is becoming more and more required as screen resolutions get higher and expectations to have content fill the browser is more prevalent. It really is more of the modern design norm these days. Here is the code…. It was actually surprisingly simple in the end:

/*---make site non-boxed---*/
.outer-wrapper {
 width: 100%;   /*---make outer container width 100%---*/
}
#header {
 width: 100%;   /*---do the same with the header---*/
 padding: 12px 0;
}
.main-content-wrapper {   /*---constrain the content width only--optional---*/
 max-width: 1180px;
 margin: auto;
}
/*---banner adjustments---*/
.main-image-wrapper { /*---you need to also set the banner area to 100% width---*/
  top: 22px;
  width: 100%;
  max-width:100%;
  background-color:#000;   /*---make background black for black overlay effect---*/
} 
.main-image-wrapper img{
  opacity:.7;    /*---making the image 70% opacity shows 30% black under---*/
}

That’s all there is to it.

 

Colored row

This is one of the most frustrating things about SquareSpace. How to make a colored row in a page. Sure you can do it with a Single-Page template, but not with a Multi-Page template like Adirondack. The forums have some fairly obtuse solutions, but I this solution is much simpler.

  • Use the page CSS editor and not the site CSS editor. See the Advanced tab PAGE HEADER CODE INJECTION in the page panel. This eliminates having your row code effect other pages in the site and makes it much easier to target the row you want to color.
  • You MUST separate your row from all other rows. This is achieved by adding a full-width divider. SquareSpace will see these as new rows and can be targeted as such. Note that it may require a little trial and error as SqSp code can vary depending on template and how you created the page.
  • Inspect your code in chrome or similar and find the class for that row. This may be different than my example.
  • Add your custom code like below.
<style>  /*--wrap your css--*/
 .sqs-row:nth-child(2) {  /*--this is the second row in the page--*/
 background-color: #eee;  /*--add your color--*/
 margin:30px -40%;   /*--extend your row out beyond the browser--*/
 padding:30px 40%;   /*--bring the content back to normal--*/
}
 .sqs-row:nth-child(2) {   /*--if you want to add other padding and margin, do it separately--*/
 margin-bottom: -75px;
 padding-bottom: 60px;
}
</style>

 

 

Adding Title to the banner area

This is only a problem in Adirondack, as it by default adds your Page Title and Description below the banner area. I almost didn’t use the Adirondack template for this reason, but I did not want to give up the built-in secondary nav bar.  Most templates are fine, but this may be a helpful example to you for controlling the banner text—and very useful for Adirondack.

/* --- Add Title Description to Banner ---*/
.page-titles--descriptions .collection-title-desc {   /*-- find the class for this --*/
 background-color: transparent;   /*-- remove any background color --*/
 margin-top: -300px;   /*-- move it all up into position - trial and error --*/
 height: 80px;   /*-- I set the total height just so it's consistent when line breaks --*/
 margin-bottom: 160px;   /*-- set where you want the page content to begin --*/
} 
/*---banner title shadow---*/
h1.page-title {
 text-shadow: 2px 2px 2px rgba(0,0,0,.5);  /*-- sure... why not add a little shadow to make the text pop --*/
 }

 

Make a DONATE button in the top nav

This again is an Adirondack problem. Many SqSp templates do have this option built in. This took some effort as other elements in the navigation are also affected.

/* --- Donate Button ---*/
.nav-wrapper ul li:last-child a {  /*--- target last item in nav ---*/
 border: 1px solid #56a17e;   /*--- all this is styling the button ---*/
 border-radius: 4px;
 background-color:#56a17e;
 color: #ffffff !important;
 padding: 12px 22px 8px;
 margin-bottom: -6px;
 margin-left: 12px;
}
.nav-wrapper ul li:last-child a:hover {
 background-color: #79d1a8;  /*--- hover color ---*/
}
.nav-wrapper ul li .folder-child-wrapper:last-child a {  /*--- remove style from the last-child dropdowns ---*/
 border: 0;
 border-radius: 0;
 background-color: transparent;
 padding: 0;
 margin-bottom: 0;
 margin-left: 0;
}
.nav-wrapper ul li .folder-child-wrapper:last-child a:hover {
 color: #577c92 !important;  /*--- including this ---*/
}

 

Other "Enhancements"

There were obviously many other custom enhancements made—not to mention all the responsive code. Here are a few other enhancements made to the site:

  • Dropdown navigation styling
  • Completely redesigned News widgets, posts and section
  • Custom Events section styling
  • Secondary navigation styling
  • Banner area with 70% opacity over black
  • Custom Gallery slider for homepage hero area
  • Customized Store
  • Custom FAQ accordion widget added.

Sorry, no code included for these enhancements. Feel free to contact me for more info.

Interactive Cisco Product Tour

Interactive Cisco Product Tour

Widget

Cisco was struggling with their existing vendor to retool a static environment based product demo created with Adobe Flash to be dynamic via .xml for globalization. Cisco hired StoverPix to rebuild the demo from the bottom up. Many of the raw graphic assets where not available and had to be recreated by StoverPix in Adobe Illustrator.

NOTE: This was created when Adobe Flash was still a technology used for interactive media.
Below is a video demonstrating the interactive qualities.

What was Involved

Product Icon Development
Documentation for Editing

Cyren Botnet Cyber Threat Report

Cyren Botnet Cyber Threat Report

Cyren Logo

Cyren called on Stoverpix to design and produce a 28 page quarterly report about Botnet security. The report features many custom graphics to help illustrate the Botnet story, including 10 custom charts and 2 infographics. The infographics are also saved as standalone documents which are used for lead generation. The report is translated into two other languages and formatted in both Letter and A4 sizing.

At a Glance:

  • Cover design
  • 28 pages
  • 10 Custom Charts
  • 2 infographics
  • Screenshot integration
  • Editorial style images
Cyren Botnet Cyber Threat Report

About Cyren


Cyren’s cloud-delivered security services protect over 600 million web and email users against Internet threats. Cyren delivers this threat intelligence from the cloud in real time, wherever and whenever it’s needed – blocking over 130 million threats and detecting thousands of new, never-before-seen malicious files, URLs, IP addresses, and phishing sites.

Sample Report Pages


MTV Mockup Prototype Widget

MTV Mockup Prototype Widget

Widget

A mockup to get buy-off for an MTV widget which was managed via .XML data (as all the widgets where). It was easily updated every week with new content and it would automatically update to all the shared widgets across facebook and other social networks. I had to make this function as real as possible before we could even get started on engineering.

MTV Mockup Prototype Widget

NOTE: This was created when Adobe Flash was still a technology used for interactive media.
Below is a video demonstrating the interactive qualities.

Marvel Trivia Widget Prototype

Marvel Trivia Widget Prototype

Widget

This is actually an engineering spec which not only shows the design and asset placement and animation, but supplies the engineer with the suggested .xml schema that drives it. The .xml would be saved for every individual user to keep track of the progress.

NOTE: This was created when Adobe Flash was still a technology used for interactive media.
Below is a video demonstrating the interactive qualities.

Surviving Skokie Movie Website

Surviving Skokie Movie Website

Stoverpix worked with Graybird Foundation to redesign the Skokie website to fulfill the marketing strategies of securing funding and make the film available to the largest possible audience. The site was previously built on the WIX platform which can be somewhat restrictive in terms of achieving some custom design goals. We took the best of what was already created and updated the overall look and feel, leverage responsive features in WIX, and added content to tell more of a story which includes features like:

  • Jack Adler page with extensive information about the star of the film
  • Praise section to post comments about the film
  • News/Events section where website visitors can view the calendar and coverage
  • Image gallery from Surviving Skokie festival screenings and events
  • Redesigned DONATE button and contributions page to easily seek contributions

 

Surviving Skokie Movie Website — Jack Adler Page

About Surviving Skokie


Surviving Skokie is an award winning documentary by former Skokie resident Eli Adler about the provocative events of the 1970s, their aftermath, his family’s horrific experience of the Shoah, and a journey with his father to confront long-suppressed memories.

Eli Adler—a California-based professional cinematographer – started a quest to create his own movie and uncover details of his father, Jack Adler’s, painful past during the Holocaust. Inspired by a Chicago Tribune article and the 2009 opening of the Illinois Holocaust Museum & Education Center, the award-winning documentary is a ten-year labor of love.

Pin It on Pinterest

Share This