Hyperlative Style Guide

Overview

Site Purpose

Hyperlative is a site for dragon fans and enthusiasts. The content will include artwork and photos of dragons, facts and stories pertaining to dragons or dragonology. Shopping will also be available from this site.

Target Audience

The target audience for this site includes youth and adults who enjoy the fantasy world of dragons. Age range - users will range from 14-84. The site will appeal to men and women. Occupations will vary. Income will range from $0-$250,000. The site is mainly geared for the United States and English-speaking countries. Education - users will generally be educated and many will have college degrees. They are frequent users of the internet, as well as avid readers. Some may be involved in online gaming, role play or cosplay. Accessing the site - primarily from smart devices and tablets, though there is still a large segment using laptops and PCs.

Layout

Sitemap

Hyperlative Sitemap image

Wireframes

Hyperlative Wireframe 1 image Hyperlative Wireframe 2 image

Photoshop Design

Download the Hyperlative.net Photoshop design file

Branding

Website Logo

Hyperlative Logo image

Color Palette

The color scheme will reflect an old library, with earthtones and leathers. That will be the background. We will then bring in the natural dragon colors, reds and greens, with highlights of gold.

Dark Red

Hex: #550000
RGB: 85,0,0

Green

Hex: #6B7B15
RGB: 107,123,21

Beige

Hex: #EAF7A5
RGB: 234,247,165

Gold

Hex: #F1A745
RGB: 241,167,69

Typography

The heading typography will have an old, archaic, gothic feel to it. That means serifs. This will be contrasted with an easy-to-read typeface for the longer blocks of body copy, which would be a sans-serif.

Cooperplate Gothic Bold - Heading Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

Sample Heading

Neue Haas Grotesk Display Pro - Body Copy Font

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()_+

Lorem ipsum nonsed eicillabore essum fugit lantisit, si nis eictia num fugiam et quatquis resto eossitem quunt quae sit dolupis maio omnimo il id maio bea ipid que conseque volorem. Et facidebit vel ma doluptasitis num, ullandebit hicto beaquos tiumquis postrum cori odit eosam quiatur? Volo quid minvel earuptatem quiatur?

Mod qui quunturiam idenderro ma et ex ex ex exerum faci repel molut evelign amenduciis moloreperum qui nullupt ustrumet, sequi a pre non net is dia comnimusant isque voleseque eatur simpori beruptae quam fugit eostios quasi nulpa quatur molorero quam eventio ma venis quideri atiaturione volupiscia sime denestis et hil magnatem aliquundella cusanihit fuga. Pienia dolo tem voluptassi volor as voluptae nulla sed maximincium sapelen tiatqui busapernatus aspis as aborioreic tet recta volessu ndelit hil is explame niminve ratur? Mus andebis si adipsamus ad moluptiae cum este verupid es sequam veri tem sequi re volum doluptatque veriorepudis et, tetum as porem et que sim natiis doluptatures et, sam rehent alicipis suntio conestio ipsandam que prem idi quiasped mod maximod iatium ex et quassimin nonempo reperisci te nonsedit ut auta volorisque paribus.

Navigation

Main Navigation

Secondary Navigation

HTML Elements

Headings

h1

h2

h3

h4

h5
h6

Lists

Unordered List

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Links

Link style 1

Paragraphs

Lia sitio blabore ruptatium, to dolorum erum siniscia cor serum sinum solupti aecepe dolupta quiaturion exerum quasi ut et eatemolorem fugit, adistis ab in et dolectem venda custisint occabor esequas core mod est, anditium everes as idundae rferferferi qui re dit eaquo veliquia qui totatiam denis iniscii squatur?

Ant aliquias alis es ma proribus. Solest, officiendic tem eatibeatium re voluptas es diae eate a eostrume nis il erum facit et ex est, ipsae cum simodi tet quos ma volupta aut latur, et quamus nobis netur seritius excero voloratuscia essequaspis sequo cus, everum nissit et fugiaeperor acepedit quatiam et eum volo dicaeribus dest lab illiqua temporrum, que quam que perovidus, voluptatur, officto doluptata nempore icipsapid eatas es eum quiaspis earum que offic tem fugita voluptatinis quis as audigen derferf erition sectasitia solupta nam net quatur andis del ium re enihit aut apelist et es milit quaes ulles expliquunt volorum eictium quia iur, nis dit asped estiatem.

Figure & Figcaption

Figure image of dragon
Dragon at the door

References

Links to Web Design Examples

Links to images, textures, or other borrowed assets

All other images and assets are original work, unless noted in the content.