Your agency has made the decision to allow Spark Logix Studios to develop your client’s web presence. If your group is providing mockup artwork to use, this will serve as your guide in understanding best practices for design preparation for development with Spark.

Complete & Customized Framework

Spark Logix Studios has spent years creating and is constantly refining Respondo, our WordPress Framework. This Framework is the base of our web design projects. It’s been thoroughly tested, is fully responsive and infinitely expandable. If you have a design preference, the framework will modify (by design) your requested needs.

Be bold in your design requests, use high quality images and provide detailed information if you know exactly what you need. We take mobile and other devices into mind when developing every website (it’s a high priority for us). Many of the guidelines here are to not only help with better user experience but also device mobility.

Default Grid System

This scaffolding takes its cues from Twitter Bootstrap. The default Bootstrap grid system utilizes 12 columns. The grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. We’ve also added an additional 5 column option and the ability to add columns within columns.

Default Grid System Respondo WordPress Framework
See Grid in Action

Responsive Adjustments

The Respondo Framework by Spark Logix Studios supports a handful of media queries to help make your projects adaptive on different devices and screen resolutions. When creating a design please take note of the 1170px standard width (unless using a full width layout). Please take note:

Standard Device Sizes

Website Structure

There are a few standard elements throughout the website that you’ll need to specify (these include the header, body and footer). These elements within our framework respond to devices (pre-planned) and are built in a way to allow great user experience. You can showcase exactly what you require, here you’ll find a guideline. We’re also open to custom modifications in order to specify exact design needs.

Header

The header is actually comprised of a PreHeader and Header. There are several layout options we recommend. The examples listed below should assist you in knowing a few best practices for the header’s layout.

PreHeader: (Menu Right – Content Left) Header: Plain Text Menu (Logo Left – Menu Right)

Logo Left - Menu Right with PreHeader

PreHeader: (Menu Right – Content Left) Header: Plain Text Menu (Logo Right – Menu Left)

Logo Right - Menu Left & PreHeader

Full Width Menu – Logo Left Aligned (no PreHeader)

Full Width Menu - Logo Left Aligned

Basic Button Menu (Logo Left – Menu Right)

Basic Button Menu Right - Logo Left Aligned

Plain Text Menu (Logo Right – Menu Left) + Call to Action

Call to Action Added to Header

Full Width Header Menu Right Aligned – Logo Right Aligned – eCommerce Cart in Header, Search Box Left Justified in Header

Full Width Menu Right

Recap: For the header don’t be shy to use a combination of these layouts, whatever best suits your needed user experience. You may want the PreHeader fixed (sticks to the top of the page when the user is scrolling), or maybe you want the header fixed, the choice is yours.

Simple Mobile Layouts (Header)

These layouts are automatic, they adjust as the screen size changes (from desktop to tablet to mobile). Knowing which colors you’d like for these elements is very useful.

Mobile Header with Call to Action

Mobile Header with Call to Action

Mobile Header + PreHeader

Mobile Header + PreHeader

Footer

The footer is actually comprised of a PreFooter and Footer. There are several column layout options available for the PreFooter. The examples listed below should assist you in knowing a few best practices for the footer’s layout.

PreFooter: 1/4 – 1/4 – 1/2 (Nearly all content requested within each column is just fine) – Footer: Details Left – Menu Right

3 Column PreFooter with Footer

3 Column PreFooter (no footer)

3 Column PreFooter

All PreFooter Layout Options

PreFooter Layout Options

Body

Each page will be unique, however for the best user experience we recommend sticking to a specific amount of styled pages. What we mean: if you have 2 different types of pages you would have two base designs that all those pages follow the design cues from. The information presented below will give you an idea of what we’ll need to know. Each design you present will then be converted to a shortcode. A shortcode allows us (or you) to easily recreate the designs on pages (without having to know HTML or CSS).

Full Width & Parallax

Control the background image, background color, text color, link colors and hovers, full width content + control of container padding in pixels, or use of standard padding size. With the background image you can control it for fixed or scrolling (you can also control placement of repeating patterns).

Sizing of the background image can vary. We typically recommend 1700px wide (and the height will depend on the content and if it’s a parallax transition when scrolling).

Full Width Parallax
View Parallax in Action

Slider Options

While we don’t recommend using a slider in most situations (including “above the fold” on the homepage) – many studies have been conducted that show only 1% of visitors to a site click on the slider – we do think there are some instances where a slider may be of use. Please click on the link to visualize options for slider use.

Slider Example
View Slider Options

View All Variations

There are so many variations to get you inspired on your upcoming design so we’ve created a Framework Demo website. Please take a look and get inspired for your next website design project.

See Shortcodes in Action
Learn About How Shortcodes Work
Demo the Framework

Gathering Web Design Inspiration

Spark Logix Studios has developed a Framework that takes your designs and transforms them into a fully responsive WordPress website ready for the future. Your submitted designs WILL become shortcodes for you to easily manage the website for years to come.

When designing the site mockup, we encourage you to use these sites for inspiration:

Respondo Framework
Awwwards
Web Design Inspiration
Web Creme

Get Creative

Visit our Website Design Questionnaire if Spark Logix Studios is designing the website.

Important Notes

  • Width of the Website is 1170px, which includes: Header, Body, Footer
  • 1170px Body Width Exception for Full Width Elements (Indicated in Design Work)
  • Grid System must be followed exactly (no exceptions for framework and responsive reasons)
  • All Images must be 72dpi (transparent images must be .png and must not have a background color when saved)
  • We prefer minimum image width to be 370px (Reason: mobile devices, the image will be very small if it’s not at least 370px wide.)
  • Spark Logix Studios handles all responsive elements (extra PSDs or Mockups for multiple devices are not required)
  • Full Width Images may repeat if they are a seamless pattern.
  • Full Width Images: recommended size: 1700px or larger (does not include repeat patterns)
  • Full Width Images should be .jpg files (Reduce file size as much as you’re willing – smaller file sizes load faster.)

Leave a Reply

Your email address will not be published. Required fields are marked *