Overview

Site Purpose

My website will be an online store promoting books that I publish for myself and my family members. The homepage will provide interactive content, such as a gallery of recently released titles and links to their indiviudal pages, author spotlights, about us, contact, and social media info. Each book page will give details about the title and may offer a form for users to submit reviews. Eventually I will add functionality to this site so that people can purchase books.

Target Audience

My target audience will be readers of fantasy, science-fiction, mystery, clean romance, and graphic novels. From my current work so far, I presume that they will be primarily women, ages 20 - 40; young mothers, college students, and other women seeking relaxation and escapism. They may have questions when visiting my site, such as

• What titles are available?
• Who are the authors?
• Where can I purchase books?
• Will White Meadow Books publish my work?
• What genres does White Meadow Books publish?
• Where is White Meadow Books located?

I will seek to answer those questions by my content.

Layout

Sitemap

Wireframes

Photoshop Design

Branding

Website Logo

Color Palette

A light, earth-toned colour scheme was chosen for this website. The primary reason for this is so the website will have a relaxing, calming atmosphere, like a cafe or a place someone would go to read and study. The main background of this site should be Light Smoke, an off-white shade that is fresh and neutral. Light Taupe, with the highlight of Dark Vanilla, will appeal to that mocha flavor I want for this site. They will serve as the primary colour of this website. Pistachio, with the highlight of British Racing Green, will serve as the secondary. The greens offer the website a clean, environmentally conscious look, as well as matching the company logo.

Typography

Cinzel with a letter spacing of .25em has been chosen as the header font for this website. It is an attractive serif font matching the company logo. The bodycopy will be Josefin Sans, a lovely vintage-style sans font, weight 300 (or light). These fonts compliment each other nicely, sans contrasting against serif, and offer a voice that is both regal and quiet.

Heading Font

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

Sample Heading

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

• Item 1
• Item 2
• Item 3

Ordered List

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

Links

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

References

Links to Web Design Examples

• Flamingo Design, Wix I got the taupe/vanilla and white smoke hex shades from Wix's Flamingo Design template. I was also inspired by this design to create parallax images and the "Welcome" strip on the homepage.

Links to images, textures, or other borrowed assets

• Github I used Nicolas Gallagher's normalize.css to clean up some browser defaults and help my design to function more smoothly.
• Pixabay I used images from Pixabay user congerdesign on the home page hero banner.
• Pixabay I used images from Pixabay user Engin_Akyurt on the home page parallax image.
• Pixabay I used images from Sophkins on the About Us parallax image.
• Pixabay I used images from Pixabay user Free-Photos on submissions parallax.
• Pixabay I used images from Pixabay user StockSnap for the Author Services page.
• Pixabay I used images from inactive user on Pixabay for the Artist parallax. Images for the quiz and social features on the homepage are also from Pixabay.
• Family The photo on the author highlight page is my grandpa and grandma on their wedding day. The images used on the artists page are copyright to Maekayla Shirley and Catie Shirley, respectively.