Stoverpix Projects

Take a closer look at a few of our projects

Abilitypath

Abilitypath

Abilitypath Logo

Graybird Foundation worked with the Gatepath.org Nonprofit Website to rebrand as Abilitypath along with the fundraising website AbilitypathAuxiliary. Stoverpix partnered with Graybird to make that vision a reality with a cohesive web strategy bringing together six different web entities in an intuitive web experience that includes customized navigation dropdowns, a robust Events Calendar, easy to manage People section, Custom forms, News & Article blogs, Artist galleries, and much more.

As with all Stoverpix websites, a library of video tutorials where included so anybody with little wordpress experience can easily add new content or make edits with ease and confidence. And of coarse all content re-configures beautifully to any device.

Experience the Site
Abilitypath Website

About Abilitypath

AbilityPath has been a cornerstone of our community for 100 years, providing a lifespan of support services to individuals with special needs and developmental disabilities in the greater Bay Area. Our mission is to empower people with special needs to achieve their full potential through innovative, inclusive programs and community partnerships. With educational, therapeutic, vocational, and family support services, we are distinctive in providing support to an individual throughout their lifetime. We collaborate with businesses, third-party providers, local nonprofits, and various organizations to bring the highest quality services to the children, youth, and adults in our programs. Together, we are creating a world where people of all abilities are fully accepted, respected, and included in all aspects of life – in the classroom, the workplace, and in our communities. Join us in “Turning Disabilities into Possibilities.”

Michael Collopy Photography Website

Michael Collopy Photography Website

Michael Collopy Photography Logo

Stoverpix worked with Graybird Foundation to launch a new, simply elegant and responsive website for Michael Collopy Photography. Michael has photographed many of the most iconic, important and famous people of our time, including the Dalai Lama, Steven Spielberg, Mother Teresa, Mick Jagger, Steve Jobs, President Obama and many more. The question is… who hasn’t he photographed.

The goal was to create a simple and elegant interface which features the photographs and faces of those who have fought for civil rights, improved working conditions, created the riffs that elevate our mood, served the marginalized.

Enough said…

Experience the Site
See More
GSYO Home Screen

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.

Love Me Sexy Mix

by Mark Stover

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

Golden State Youth Orchestra Website

Golden State Youth Orchestra Website

Golden State Youth Orchestra Logo

Stoverpix worked with Graybird Foundation to launch a new, modern and responsive website for Golden State Youth Orchestra — formerly El Camino Youth Symphony and migrate the content from the previous dated CRM platform into WordPress and leverage the power and page building capabilities of the DIVI theme. 

As an event driven learning organization we leveraged the Events Manager plugin to achieve very specialized event pages, listings and Feature event rows with precision across devices like on the homepage. Stoverpix created easy to use templates (custom library modules) to quickly and easily implement and manage complex design structures via one post id change and a few image swops. Less than 1 minute to change an event row to a new event.

Notable features of the website include:

  • Easy to update/manage Ken Burns style hero banner optimized for all devices.
  • Homepage events feature rows with built-in, auto optimized features which completely reformats content for mobile devices. Try it out… just make your browser window narrow to experience.
  • Custom WooCommerce Store integrated with events as well as Tchotchkes as well as performance ticket purchases.
  • Integration with the existing CRM to retain membership data with existing members.
  • Customized event listing pages by all events, ensemble, location, date, etc…
  • Customized people section for Board, Conductors, Coaches, and Staff etc…
  • Social sharing sticky sidebar to share any page to every shareable Social Network
  • Easy to browse tabbed Audition Requirements tool for quick referencing information about all the ensambles.
  • Branded Media player
  • Alumni section with praise and stories back to 1963 and form for Alumni to interactively post their personal experiences.
Visit the GSYO Website
Read More
GSYO Home Screen
GSYO Home Screen

About GSYO

Golden State Youth Orchestra (GSYO) previously El Camino Youth Symphony (ECYS) is a 501(c)(3) nonprofit organization founded in 1963 by William Galbraith, a young maestro who envisioned an orchestra that would give youth musicians the opportunity to perform challenging standard professional repertoire.

In 1965, Robert Sayre, then principal cellist with the San Francisco Symphony, became one of the first professional musicians to perform with GSYO. Since then, GSYO has continued to invite artists of international stature to perform as guest soloists with our highest level ensemble Senior Symphony. 

Feature Screenshots

Event Ticket Page
GSYO Tickets Page
Store Page
GSYO Store Page
Programs Overview Page
GSYO Programs Page
Ensemble Page
GSYO Ensemble Page
Ensemble Event List Page
Ensemble Event List Page

Berkeley Symphony Orchestra Website

Berkeley Symphony Orchestra Website

Berkeley Symphony Logo

Stoverpix worked with Graybird Foundation to launch a new modern and responsive website for Berkeley Symphony Orchestra with a requirement to automize the flow of data from their ticketing vendor to the calendar but still allow the ability to add more content like videos, Venue information, nearby dining, parking, expanded artist info, composer bios and more. 

I use the Events Manager plugin as my go-to calendar plugin because of the ability to style the content in any way I can imagine—also there is no yearly fee for the plugin which is important for non-profits. It’s super easy to manage the templates around whatever html/css code you want as a wrapper so there is no limit to how you style the content.

Notable features of the website include:

  • Ken Burns style hero banner
  • Homepage events feature rows with built-in, auto optimized features which completely reformat content for mobile optimization. Try it out… just make your browser window narrow to experience.
  • Easy auto-import content from ticketing partner to events section
  • Total control to build upon the auto imported content for event pages
  • Customized event listing pages
  • Customized people section for composers, artists, staff and more.
  • Partner dining section as well as easy to manage Season Sponsor module
  • Social sharing sticky sidebar to share any page.
  • Popup subscribe feature which only deploys once after scroll to bottom of page so as not to be overly obnoxious.
  • Special musicians login section
Visit the Berkeley Symphony Website
Read More
Elegant Responsive Coding
Graybird Foundation Website
Graybird Foundation Website

Foundation for a College Education Website

Foundation for a College Education Website

Golden State Youth Orchestra Logo

Stoverpix worked with Graybird Foundation to launch a new, modern and responsive website for Foundation for a College Education with all new simplified and and concise content using a new design by Mark Chaillie.  The homepage design has a special challenge by specifying the navigation bar to be on the bottom of a fullscreen hero banner which scrolls up and sticks to the top after scrolling down to the lower portion content. 

One way to get more engagement with the website is to create a robust event calendar for all classes and other events for all the different meetings, tutoring sessions, testing, field trips and more for 22 different groups.

Notable features of the website include:

  • Easy to update interactive, fullscreen hero banner
  • Homepage rows with visually engaging parallax effects which elegantly reformat for different devices 
  • Social sharing sidebar to easily share any page on the site across all social networks.
  • Full month calendar with option to view by any category like tutoring  
  • Customized event listing pages by all events, category, location, date, etc…
  • Customized Team section for Staff Members and Board Members which auto generates when adding new members
  • Google Translator to change the language to Spanish (or technically most any language)
  • Special top level pages with photo grid linking to content in that section
  • Easy to implement testimonials on various pages.
Visit the FCE Website
Read More
Fullscreen Top Portion Homepage
FCE Home Screen
Lower Portion Homepage
FCE Home Lower Screen

About FCE

Foundation for a College Education’s mission is to increase the number of students of color from East Palo Alto and similar communities who graduate from a four-year college or university.

The vision of FCE is to create a community where higher education is attainable. By engaging both students and parents in our work, we aim to create a community of learners who are armed with the right tools and information. Together, they play a pivotal role in sharing this information with other families about how best to take advantage of school resources and navigate the college admissions process, thus catalyzing change in the larger community.

Feature Screenshots

Top Level Page
Top Level Page
Full Calendar Page
Full Calendar Page
Event Category Page
Event Category Page
Single Event Page
Single Event Page
Team Page
Team Page

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
Visit the Socius Group Website
Read More
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.

See the full PDF
See More
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.

Visit the Reach for Home Website
Read More
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
See the Report
Read More
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

 

Visit the Surviving Skokie Website
Read More
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.

LifeMoves Website

LifeMoves Website

LifeMoves Logo

LifeMoves is formerly InnVision Shelter Network. LifeMoves programs combat homelessness by teaching comprehensive life skills that help clients achieve long-term self-sufficiency, and effectively break the cycle of homelessness. Stoverpix was hired to produce the the website via designs supplied by BrewLife of San Francisco. The entire site had to be rebranded and included a few complex functionality like the Locations tool which integrates Google maps with content pages in a custom interface.

Visit Website
LifeMoves Website

NAMI San Mateo County Website

,

NAMI San Mateo County Website

NAMI San Mateo County

Stoverpix was charged with interpreting the marketing strategies of graybirdfoundation.org into page designs which would facilitate the existing NAMI SMC content. The site was built in WordPress and all content was ported into the new site, reorganized per GBF specs so the content was simpler to browse, and made easier to update for the NAMI staff.

Visit the NAMI Website
Read More
NAMI San Mateo County Website

About NAMI San Mateo County

National Alliance on Mental Illness (NAMI) San Mateo County (SMC), was founded in 1974 as the Parents of Adult Schizophrenics.  The organization was subsequently renamed the Alliance for the Mentally Ill of San Mateo County, until its reformation in 1979 as the National Alliance on Mental Illness. NAMI SMC is a non-profit 501(c)(3) exempt organization governed by a dedicated volunteer Board of Directors.   The Board is comprised of family members who have a loved one with a mental illness and other interested parties involved in the local mental health community. As an independently operating nonprofit, NAMI San Mateo County receives no funding from NAMI National nor NAMI California.

Sample Website Pages

Graybird Foundation Nonprofit Website

,

Graybird Foundation Nonprofit Website

Graybird Foundation — A nonprofit website for nonprofits

Graybird Foundation called on Stoverpix to build a website for the nonprofit LifeMoves (previously InnVision Shelter Network) after another vendor pulled out at the last hour. The project was delivered on-time, in-spite of the many custom requirements and fluid content changes along the way. From that, a partnership was born.  After partnering on several other projects, it was time to design and build a nonprofit website for Graybird Foundation.  The idea was to keep it simple, modern, clean and easy to update.

Tasks:

  • Content mapping / Flow
  • Wireframes
  • Static design of major pages for approval
  • Site build per design
  • Maintenance
Visit the Graybird Website
Read More
Graybird Foundation Nonprofit Website

About Graybird Foundation

Graybird Foundation donates marketing expertise and services to community, education and fine arts nonprofits in the San Francisco Bay Area.  GBF teams with their valued clients to identify, scope and deliver a bold marketing move. Stoverpix has partnered with Graybird Foundation to realize that mission by designing client nonprofit websites, developing creative and producing the web experience and all graphic assets.

Graybird/Stoverpix Clients

Berkeley Symphony Orchestra Website
Learn More
Reach for Home Website
Learn More
Golden State Youth Orchestra Website
Learn More
Foundation for a College Education Website
Learn More
Surviving Skokie Website
Learn More

BEA IT2IT Audience Microsite

, ,

BEA IT2IT Audience Microsite

BEA Logo

For the IT audience we took more of a blog approach. This is an audience which tends to really like to get into the weeds, so lot’s of content which updates regularly was the approach we took. Keep in mind that in 2006 we were much more width constrained so just zoom in on your browser if you start feeling claustrophobic.

Visit the archived IT2IT Website
Read More
BEA IT2IT Audience Website

Pin It on Pinterest

Share This