JessJodoin / ecommerce-pattern-library

A term-long project redesigning an ecommerce website focusing on making a pattern library.
https://elated-joliot-4d9f2c.netlify.com/pattern-library/#brand
0 stars 0 forks source link

PEW PEW: Ecommerce website + pattern library


A Star Wars themed merchandise site that jedi and sith alike can buy various apparel, accessories, and collectibles. Will you follow the light or be consumed by the dark?

Helpful Links

  1. PEW PEW website
  2. Netlify pattern library
  3. UX design

Branding


PEW PEW is a Star Wars themed ecommerce website. The brand is fun, energetic, and out of this world. Keeping a simple colour scheme acrosss the website will allow the colourful products to take focus. Whether you're a young padawan or a sith Lord, this site should be simple and easy to navigate allowing you to spend your hard-earned credits on our fantastic collection of products.

Photogaphy used on the website should consist of dark images of stars and galaxies to keep with the theme. The colourful imagery is to only be used for product shots.

Logo

The PEW PEW logo was created to emulate the style of the Star Wars logo. It is simple, block lettering with extended top bar on the first letter and bottom bar on the last letter (as seen in the Star Wars logo). This makes the design of the logo easily recognizable as being Star Wars related.

Colours

The colours used are mainly dark colours, such as black and charcoal grey, as to imply the darkness of space and the galaxy. To add accents into the website, bright blue and red are used to represent jedi and sith. Also, neutral greys are acceptable to create contrast.

Typography

Verdana was chosen as it is a strong, bold sans-serif that is easily readable. This typeface was also chosen as it is a standard font available on all devices, meaning that all users will view the site exactly how it was designed. Varying weights and cases are to be used throughout to display hierarchy.


Installation

The pattern library is a Jekyll & Patternbot based application, so it requires Ruby to be installed.

☛ Follow these instructions to get Ruby & Bundler installed

  1. Navigate to the correct folder in Terminal. Use GitHub Desktop’s Repository > Open in Terminal command.
  2. Type the following command bundle install

Starting the server

The pattern library is a Jekyll & Patternbot based application that requires a running Terminal instance.

  1. Navigate to the correct folder in Terminal. Use GitHub Desktop’s Repository > Open in Termal command.
  2. Type the following command: bundle exec jekyll serve
  3. View the functional website at: http://localhost:4000
  4. View the pattern library at: http://localhost:4000/pattern-library/