Star Trek Universe is an online eCommerce site focused on the universe of Star Trek; there are no high-street stores. There is a wealth of merchandise associated with the original series and the many spin offs that followed. Merchandise will include toys, board-games, stationary, DVDs, collectables, etc.


Objectives

 

The objective of the web site is to promote and sell Star Trek related merchandise to a wide audience around the world. Space exporation (in any form) often appeals to the younger generation, enabling their imaginations to reach far into the universe of space. Star Trek Universe wants to capitalize on this “exploration” through the universe of Star Trek.


Front End Development

Being Responsive

With so many different platforms available these days, it is no longer a case of 1-size-fits-all. Being responsive means the web site has been designed/implemented to provide a good user experience on all different platforms: mobile, tablet and desktop.

Foundation Framework

Star Trek Universe’s web site was built using the Foundation 6 framework to ensure it renders appropriately on all platforms.

Within the <head> section of the .html file, links are added for Foundation (and other CSS styling):

<link rel=”stylesheet” href=”css/foundation.css”>

<link rel=”stylesheet” href=”css/foundation-icons.css”>

<link rel=”stylesheet” href=”css/fontStyles.css”>

<link rel=”stylesheet” href=”css/stUniverseStyles.css”>

Object Placement

Due to the different display sizes/windows, it may be necessary to change the order in which components are displayed. On the Star Trek Universe web site, when viewed on a tablet or desktop, the footer displays two columns of data versus one column of data on a mobile device.

To change the order of the displayed components, such that the Star Trek emblem logo is displayed under the social media icons (on a mobile device), the push/pull commands were used.

<div id=”footerText” class=”columns small-12 medium-6 medium-push-6″>>

<!– Social Media icons –>

<div class=”columns small-12″>

<ul class=”menu expanded small-centered”>

<li>

<a href=”http://twitter.com/” target=”new”>

<i class=”fontIcons noPadding fi-social-twitter socialMediaWhite”></i>

</a>

</li>

<li>

<a href=”http://facebook.com/” target=”new”>

<i class=”fontIcons noPadding fi-social-facebook socialMediaWhite”></i>

</a>

</li>

</ul>

</div> <!– End: Social Media icons –>

</div> <!– End: Right hand side of the footer display –>

 

<div class=”columns small-12 medium-6 medium-pull-6″>

<img class=”footerLogo” src=”images/logoSTInsignia.png” alt=”Star Trek Universe Logo” title=”Star Trek Universe Logo”>

</div> <!– End: Left hand side of the footer display –>

CSS Styling

Foundation provides the baseline styles defined within the foundation.css file (imported in the <head> section of the .html file). Some of Foundation’s generic styles were overwritten so that the web site includes the client’s own branding (colours and styling).

Selectable Image Styling

The “Product Line” section (located at the bottom of the “Product” page) has some unique styling:

  • Images are displayed at 65% opacity.
  • When hovered over, the image is enlarged and displays at 100% opacity.

The “Special Features” section (located on the “Home” page) using the same styling concept.

Image code…

<div class=”columns small-12 medium-3″>

<p class=”text-center”>

<a href=””>

<img class=”productDisplayBox reduceOpacity” src=”images/regulaSpaceLab.jpg” alt=”Regular I Space Station” title=”Regular I Space Station”>

</a>

</p>

</div>

CSS Styling…

.productDisplayBox

{

margin: 0% 0%;

text-align: center;

}

.productDisplayBox:hover

{

transform: scale(1.2, 1.2);

box-shadow: 5px 5px 3px #020f33;

opacity: 1;

}

.reduceOpacity

{

opacity: 0.65;

}

Call To Action Buttons

To incoporate client branding into the web site, the “Call To Action” buttons display as red with white text but change to white with red text when the mouse is placed over the button. This styling is achieved through basic CSS.

Button code…

<p class=”nestedSectionPadding”>

<a href=”#”><button class=”button btnCallToAction“>Read More</button></a>  

<a href=”#”><button class=”button btnCallToAction“>Add to Cart</button></a>

</p>

CSS Styling…

.btnCallToAction

{

line-height: 1;

background-color: #8e191b;

border: 1px solid #8e191b;

border-radius: 5px;

color: white;

padding: 0.65rem 1rem;

font-family: ‘Montserrat’, sans-serif;

font-size: 1rem;

text-align: center;

}

.btnCallToAction:hover

{

background-color: white;

color: #8e191b;

}

jQuery

jQuery allows the developer to control and manipulate components within the page page. Within the Star Trek Universe project, jQuery is used to hide/show containers defined within the .html file and to display enlarged images in their own window (when clicked on).

Hide/Show Components

The “Product” page displays a large image and four other smaller images (of the selected product). The main image can be replaced by any of the four smaller images by clicking on them. The .html file contains all the enlarged images but (through the use of jQuery), only one large image is displayed at a time.

$(“#thumbnailImg1”).click(function()

{

$(“#productImg1”).show();

$(“#productImg2”).hide();

$(“#productImg3”).hide();

$(“#productImg4”).hide();

});

Display Enlarged Images

As typical with eCommerce sites, many images are displayed as small versions but are enlarged when clicked on. On the product page, I used the colorbox plugin to create the same effect for the summary images.

Button code…

<a class=”thumbnailPewterShips” href=”images/pewterShipsLg.jpg” title=”Pewter Ships” alt=”Pewter Ships”><img class=”hide-for-small-only” src=”images/pewterShips.jpg” alt=”Pewter Ships” title=”Pewter Ships”></a>

CSS Styling…

$(“.thumbnailPewterShips”).colorbox({rel:’thumbnailPewterShips’, transition:”fade”});


Web Design

Wireframes

The project was initiated with the creation of a set of wireframes for each of the main platforms (desktop, tablet and mobile). This ensured a high-quality, optimal design for each platform and reduced the need to redesign key components during the mockup and/or coding phase(s).

Mockups

Once the wireframes were complete and signed off, the wireframe placeholders were replaced with images and text. As images and text were identified, the designs were tweaked to accommodate larger image sizes and text descriptions.


Design Elements

The style of the web site will be fun, interesting and educational. The web site will include space exploration facts inter-mingled with merchandise to furthe entice our visitors to make a purchase. We want to capture the “absolutely MUST have” feel from both young and “old” visitors.

Colour Scheme

The primary colour palette is made up of the three colours used within the Star Trek Universe logo.

#8F1A1D

(39, 36, 95)

#000000

(0, 0, 0)

#A1A3A6

(161, 163, 166)

Font Styles

The tone of copy throughout the web site will use an informal/family style; a tone that one might find in a conversation between two friends. The style is intended to exude “happy” and “fun”. We want people to be a part of this fun event. To speak to the tone of copy and style of conversation, the following web-safe fonts have been selected for use:

  • Headings: Orbitron
  • Body Copy Text: Monterrat


Marketing Strategy

Target Market

Due to the number of Star Trek spin-offs and various sci-fi conventions, the world of Star continues to appeal to both the younger and older generations. The web site is aimed at a wide audience spectrum:

  • Gender: Male & Female
  • Age Range: 10 through 100

Age 10 is specified as the lower end of the range more so because this is generally the age where children will start surfing the web and have better ideas on what they like, want and “absolutely MUST have”.

The web site will also include merchandise for children younger than the age of 10. It is assumed for this age bracket, most of the purchasing decisions are made by the parents.

100 is specified as the upper age range as Star Trek is timeless and, for many people, there is no upper age limit.

Tone of Copy

Descriptions of products will use an informal/family style. A tone that you would find in a conversation between friends. A more formal style will be used when displaying contractual/purchasing information, such as pricing, purchase quantity, refund policy, etc.