Art Coding Design Style Guide
Overview
Site Purpose
This is a personal portfolio of my work. I will show galleries for my work in Art | Coding | Design
Target Audience
My target audience is small businesses. This site will be for new business or those looking to rebrand an existing business. It will be for the owners or managers of these types of businesses. Typically they will be between the ages of 30 and 65 living in the US.
Layout
Sitemap
Wireframes
Photoshop Design
Download the Art Coding Design Photoshop design fileBranding
Website Logo
Color Palette
These colors are contemparary bright and easily mixed and matched together. The cool teals are paired nicely with the complementary burgandy while the yellow brings a bright pop to the mix.
Dark Teal
#016670
1, 102, 112
Light Teal
#9FEDD7
159, 237, 215
Burgundy
#613033
97, 48, 51
Yellow
#FBE180
251, 225, 128
Typography
I am using Lato, a sans-serif, as the body font manly to match the font in the logo. In contrast, I will be using Cinzel, a serif, as the Header font.
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
- Item 1
- Item 2
- Item 3
Links
Link style 1Link style 2
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 images, textures, or other borrowed assets
- Gallery Layout W3 School I used the gallery layout concept on this W3 School page.
- Scale on Hover W3 School I used scale on hover concept on this W3 School page.