Guides: Website Guide

---

The website will breakdown based off of the users screen size. The specs below are what we have designed to.
・ 320 px — Mobile portrait
・ 480 px — Mobile landscape
・ 600 px — Small tablet
・ 768 px — Tablet portrait
・ 1024 px — Tablet landscape/Netbook
・ 1280 px - Tablet landscape/Netbook

Responsive example of how we expect the images to scale and breakdown can be seen at this link. Click Here

---

Template Information & Modules

We have built 13 templates which are attached. The idea is to have this website be flexible with the ability to easily change the layouts when needed. To do so we have created the layouts with the idea that "Modules" we will call them here can easily be moved around in any page.

MODULES

Click Here: For the full view of all modules and names. Any one of these modules should be able to be taken and placed onto a page.
http://crownpeak.technology/UI-Website-Guide/guide/File-Modules/

---

MENU

---

CONSISTANT ITEMS:

All pages have the same top menu and footer menu.
・ Top Menu
・ Bottom Footer
All pages have modular based layouts.

---

Template Links & PSD's

---

Below are the links for each page along with the responsive aspects of each.
Login: http://crownpeak.technology/UI-Website-Guide/guide/
Username: crownpeak
Password: admin

Note: Grey boxes represent imagery

---

Template Extra Details

---

LIGHTBOX NOTIFICATION

http://crownpeak.technology/UI-Website-Guide/guide/File-14/1.1.html
This notification window will open when triggered by our CMS. This window will contain either messages or actions we ask the user for.

LIGHTBOX FORM

http://crownpeak.technology/UI-Website-Guide/guide/File-14/1.2.html
This lightbox window will open when a user clicks the contact form or any link that triggers a form. The window will contain the form fields for users to complete and submit. A success or failure message will display after interaction is completed.

LIGHTBOX CASE STUDIES

http://crownpeak.technology/UI-Website-Guide/guide/File-14/1.3.html
This lightbox window will open when a user clicks a feature or case study. The window will allow the user to view more information about a project or to scroll through images of the projects. The user will have the ability to share the project through social connections or simply navigate to the next project as needed.

SLIDESHOW

http://crownpeak.technology/UI-Website-Guide/guide/File-14/1.4.html
The slideshow will have two ways of navigating. 1) Left and Right arrows anchored to the left or right of the screen will allow the user to move to the next slide. 2) Thumbnail/Information tabs at the bottom of the slideshow will allow the user to move to the next slide. When moving to the next slide we will want the ability to select from two interaction styles. Fade or SlideUp.

CODED FRAMEWORK

We have coded 13 templates which are attached. The website pages are responsive using simple single CSS and JS files for fast loading content. All content can be downloaded in a zipped file by clicking here.

CMS PRODUCT PROTOTYPE

Page 1.1 - Desktop

---

View of 1440-by-900 [ Regular ] resolution at 72 (ppi)

Page 1.2 - Tablet

---

1024-by-768 [ Regular ] resolution at 72 (ppi)

Page 1.3 - Mobile

---

568-by-320 [ Regular ] resolution at 72 (ppi)

Page 2.1 - Desktop

---

View of 1440-by-900 [ Regular ] resolution at 72 (ppi)

Page 2.2 - Tablet

---

1024-by-768 [ Regular ] resolution at 72 (ppi)

Page 2.3 - Mobile

---

568-by-320 [ Regular ] resolution at 72 (ppi)