Key Web Concepts: Project Brief



Yüklə 43,57 Kb.
tarix21.06.2018
ölçüsü43,57 Kb.
#50334



Key Web Concepts: Project Brief

Client: NYSCA - New York State Children’s Alliance

09-06-17




Dear Steven,


The site for NYSCA will be a responsive Wordpress CMS with a few custom templates that this brief will elaborate on. The following is the site map/structure:
Home

About

What We Do

Board of Directors

Our Team

What We Do

Results

Careers

Child Advocacy Centers

About CACs

Find a Center

Get Involved

Join Us

Recommendations

Policy

Resources

Find Help

Board Resources

Events

Blog

Donate

Contact
Member Login
*Plugins we’ll use are Ninja Forms, Constant Contact and Better Anchor Links

Notes to consider about certain PSDs:




  1. nysca-home.psd

    1. Full Page Menu Takeover

      1. Please unhide OPEN MENU in layers panel to see how full page takeover menu looks. Unhide OPEN MENU HOVER in layers panel to see how navigation items look on hover in open menu. Inspiration for this came from https://emersonstone.com/ .

    2. Field for external link to PayPal account

    3. Top Image Page Load

      1. On page load can we make background image fade in first then have text and button appear shortly after (like the way The Lead Center site loads).

    4. Full Width Homepage Image

      1. Image

      2. Title

      3. Text

      4. Link Text

      5. Link

Note: Please include a 25% dark overlay over the photo. Image does not have to take up full height of screen. Also, as on The Lead Center site, please include parallax scrolling on top image so it seems to stay in place as bottom content covers it.

    1. Page Movement

      1. Please have each section of the page slide up into place as user scrolls down (http://parcourscanada.com/ or http://www.brooklyn.cuny.edu/web/academics/schools/mediaarts/schools/feirstein.php ) Unhide MOVEMENT folder to see the different sections of the page that should slide up on scroll. These elements then remain in place until refresh.

    2. Sticky Nav

      1. Please code sticky nav as on The Lead Center site where sticky nav only appears once user scrolls up on the page.

    3. Locations Custom Field

      1. Subtitle Text (locations)

      2. Title

      3. Text

      4. Link Text

      5. Link

      6. Image

    4. Featured Events

      1. Three featured events (not most recent) populate here with category type, featured image, title and link to full event page. The most recent featured event will be a little bit larger and include an excerpt of description text. User should be able to select the Details button or anywhere on the event square to go to the most recent event.

    5. Latest Blog

      1. Most recent blog post appears here with title, excerpt text, and link to the full blog.

    6. Newsletter

      1. Constant Contact newsletter plugin

    7. Member Login

      1. See .psds 13 and 14 to see how login and member section style. This is not a user system. Admin will still have to set up anyone who wants to become a user. Users cannot create their own accounts.

    8. Other Fields

      1. Child Abuse Hotline and Sponsor Images/Site Links.




  1. nysca-home-tablet.psd

    1. All menu items hide in hamburger menu on tablet/mobile




  1. nysca-home-mobile.psd

    1. Supporting text can hide on mobile

    2. Excerpt can hide on mobile




  1. nysca-map.psd

    1. Navigation

      1. Menu becomes size of sticky menu for this page. Sticky menu not needed as user scrolls on this page.

    2. Full Width map Page

      1. Inspiration for this comes from Airbnb.com (https://www.airbnb.com/s/homes?allow_override%5B%5D=&s_tag=sprbjh_a ). Map image and post type can be copied from NYSCA’s old site (http://nyschildrensalliance.org/cacsinny/ )

    3. Categories

      1. Client would like to be able to categorize different types of locations. Not sure how many categories they would like to have but it may be more than two. This is the key for the different categories. They are not clickable. Can admin choose the colors for the categories in the backend?

    4. Responsive Notes

      1. Like on AirBnB site, map can hide on tablet and mobile and only show the list view. List view can be two per row on tablet and one per row on mobile.

    5. Map View

      1. Hovering over a dot shows the details for that center like on old NYSCA site.

    6. List View

      1. Left hand side can scroll while right hand side remains static (like on Airbnb site). Footer hides on this page. Hovering over a block in the list view on the left should make hover state on map show up.




  1. nysca-subpage.psd

    1. Subpage Template

      1. This .psd is to show all the different options for subpages and how different elements will style.

    2. Sub Navigation

      1. For basic subpage, child pages appear in a list at the top. If there are no child pages, this bar can hide.

    3. Page Title

      1. Title

      2. Intro Text (optional)

      3. Featured Image

    4. H2 Anchors

      1. For basic subpages, can we install the Better Anchor Links plugin like on Lead Center website? This can be for Heading 2s. Unhide STICKY NAV in layers panel. Scroll down this page to see inspiration https://www.barbican.org.uk/our-story/our-building/our-architecture . After user scrolls past H2 bar, it will stick to the top of the screen. Once user reaches the bottom of the page, or tries to scroll up, the normal full navigation sticky bar will also appear.

    5. Responsive Notes

      1. On mobile, sub navigation and h2 anchors can hide. Sidebar can stack above main content. Calls to Action can stack one on top of another on mobile.

    6. Optional Sidebar

      1. Subpages can either be full width or 3/4 with sidebar. This is an example of how a sidebar will look. Client will mostly be using them for highlighting facts like this.

    7. Videos

      1. Client will be uploading videos most likely from vimeo.

    8. Page Sections

      1. For alternating headings, can light grey background appear? Or if there is another way to develop this, open to suggestions.

    9. Columns

      1. Need a way to easily create columns on subpages.

    10. Optional Calls to Action

      1. Admin can select whether to show or hide the bottom subpage calls to action.

    11. CTA 1

      1. Title

      2. Text

      3. Newsletter Signup

    12. CTA 2

      1. Image

      2. Title

      3. Text

      4. Link Text

      5. Link




  1. nysca-subpage-chart.psd

    1. Charts

      1. Client wanted us to create two pie charts for them. Will not need ability to add more as admin. Unhide HOVERS in layers panel to see special functionality for these charts. Inspiration came from http://www.nationalgeographic.com/what-the-world-eats/ . Let me know if this is possible or time consuming. If it takes too much time, they can just be static images.

    2. Responsive Notes

      1. Hovers can hide on tablet/mobile.




  1. nysca-events-overview.psd

    1. Event Post Type

      1. Category

      2. Title

      3. Excerpt

      4. Date

      5. Location

      6. Featured Image

Note: User can view the full event page either by clicking Read More or anywhere on the event box.

    1. Categories

      1. User can sort by categories here or by clicking on category on top of individual event post.

    2. Responsive Notes

      1. Categories can populate above events on tablet and mobile.

    3. Load More

      1. Load More button appears after 12 posts.




  1. nysca-events-individual.psd

    1. Register

      1. Optional button to register for events. Should be external link created by admin.

    2. Sidebar

      1. Optional sidebar with additional event details - title and text.

    3. Responsive Notes

      1. Register button can stack below title and details on mobile. Additional Events sidebar can stack below event content on mobile. Previous and Next Events can stack one on top of the other on mobile. Sticky Newsletter can hide on mobile.

    4. Previous and Next Events

      1. Show previous and next events here. User can click anywhere on box to go to it. Make sure to unhide HOVERS in layers panel to see how this looks on hover.

    5. Sticky Newsletter

      1. Inspiration here: https://medium.com/@pacavaca/not-so-essential-phone-ddcab1bb1f75




  1. nysca-blog-overview.psd

    1. Blog Categories

      1. Users can sort by category here or on category listed above actual blog post.

    2. Responsive Notes

      1. Categories can stack below “Blog” on mobile. Blogs can stack one on top of the other on mobile.

    3. Latest Blog Post

      1. Latest blog post also populates with excerpt.

    4. Blog Post Type

      1. Featured Image

      2. Category

      3. Date

      4. Title

Note: Users can view full blog post by clicking Read More link or anywhere on the box.

    1. Load More

      1. Load More populates after 12 posts




  1. nysca-blog-individual.psd

    1. Responsive Notes

      1. Other posts section can stack one on top of the other on mobile. Sticky Newsletter can hide on mobile.

    2. Other Posts

      1. Other randomized posts from the same category populate here. If there are no other posts from that category, can pull from another category. User can either click Read More or anywhere on the box to go to full article.

    3. Sticky Newsletter

      1. Same sticky newsletter from individual event pages.




  1. nysca-contact.psd

    1. Ninja Forms

      1. Can we use ninja forms and style forms this way? Inspiration comes from https://www.dtelepathy.com/contact/

    2. Responsive Notes

      1. Mailing Address/General Inquiries/For Members section can show two per row on tablet and one per row on mobile.

    3. Connect with Us CTA

      1. Title

      2. Text

      3. Facebook Link

      4. Twitter Link




  1. nysca-404.psd




  1. nysca-sign-in.psd

    1. Member Login

      1. Admin can set up users with a username and password through WordPress.




  1. nysca-member-login.psd

    1. Log Out

      1. Log Out would direct members back to the homepage.

    2. Member Login

      1. This template is to show everything member login can do. Admin can upload basic text, embed videos from vimeo, or upload .pdf’s and titles.

    3. Member Login Navigation

      1. This is the member login navigation.

    4. Responsive Notes

      1. Member Login Navigation can appear at top of the content on mobile.

    5. Log In to Log Out

      1. Log In button in footer becomes Log Out button once members are already logged in.

Yüklə 43,57 Kb.

Dostları ilə paylaş:




Verilənlər bazası müəlliflik hüququ ilə müdafiə olunur ©genderi.org 2024
rəhbərliyinə müraciət

    Ana səhifə