Scleroderma Education Project Website Visual Design (Re-design)

Milestone 2: Wireframe – Primary Content 5/6/2017 Wireframe with Annotations of layout for SEP’s Sub-Pages. Wireframe(s) is based on the Wordpress theme Avada. Wireframes

- Patient Education - Clinician Resources - Research Studies

Author: Shanada Lea W.

Visual Sitemap for SEP Homepage

------------------------------------------------------------------------------------------------------------------------------------------

Heading/Logo

Share Links (icons)

Global Navigation (with dropdown menu for sublinks)

Home Patient Education Clinicians Resources (New) Research News and Announcements Donate

Content / Links – Primary (based on primary audience and key messages)

Patient Education The Guide for New and Future Patients Scleroderma FAQ Additional Information & Articles

Clinician Resources FAQ Research / Links to Articles Survey Results Donate

Research Studies “to be developed” Survey Results

Content / Links – Secondary (based on secondary audience and key messages)

Current News / Announcements – viewed as Posts

Current Article – viewed as Posts

Footer Contact Info

Contact Form

Donate button and Social Links

Global Navigation

Wireframe with Annotations: Patient Education

------------------------------------------------------------------------------------------------------------------------------------------

1

2 3

4

Annotations: Patient Education

------------------------------------------------------------------------------------------------------------------------------------------ Wireframe for SEP Patient Education page is using WordPress theme Avada’s using its Page – Side Navigation Template layout with a few modifications using themes element Any elements used by the Avada theme will be bold / italic,

1) Page Header Pre-design that comes with the page template. On right side, an hierarchy tree of sitemap to give user understanding where they

are within the site. 2) Active Sublink

Using Avada’s element Flip Box; The active sublink flip box animation is inactive

3) Inactive Sublink Using Avada’s element Flip Box; User mouseover, box flip over giving a brief info with link to page;

4) Side Navigation (Right side) Side Navigation pre design in page template. Displays links for Active sublink of Patient Education page Below side navigation is print buttons using Avada’s Button elements for users

to print a pdf version of Active Sublink content.

Wireframe without Annotations: Patient Education

------------------------------------------------------------------------------------------------------------------------------------------

Wireframe with Annotations: Clinician Resources

------------------------------------------------------------------------------------------------------------------------------------------

1

2

3

4 5

Annotations: Clinician Resources

------------------------------------------------------------------------------------------------------------------------------------------ Wireframe for SEP Clinician Resources page is using WordPress theme Avada’s using its Page – Dual Sidebar Page layout Any elements used by the Avada theme will be bold / italic,

1) Page Header Pre-design that comes with the page template. On right side, an hierarchy tree of sitemap to give user understanding where they

are within the site. 2) Page’s Sublink – Left side bar

Sublinks of Clinician Resources page 3) Recent Articles / Research

Below sublinks placing Avada’s Blog elements to show recent articles or resources using blog features with date and title as link

4) Page Content - Middle Display content for active sublink of Clinician Resources sublinks. Image is optional

5) .Donate Section – Right Side Bar

Sidebar to always feature the Donation section

Display as an banner image with clickable link to a Donate Page

Wireframe without Annotations: Clinician Resources

-----------------------------------------------------------------------------------------------------------------------------------------

Wireframe with Annotations: Research Studies (in Progress) | News & Announcements

------------------------------------------------------------------------------------------------------------------------------------------

1

2

3

Annotations: Research Studies | News & Announcements

------------------------------------------------------------------------------------------------------------------------------------------ Wireframe for SEP Clinician Resources page is using WordPress theme Avada’s using its Blog – Medium Image Layouts – Medium Right Sidebar layout Any elements used by the Avada theme will be bold / italic,

1) Page Header Pre-design that comes with the page template. On right side, an hierarchy tree of sitemap to give user understanding where they

are within the site. 2) Left side bar

List of Research Articles, media, etc shown as Blog posts using Avada’s Blog Elements with Date, Image (Options), title, and introduction

3) Right side Bar Sublinks shown as categories; pre-design layout of Blog template

Wireframe without Annotations: Research Studies (in Progress) | News & Announcements

-----------------------------------------------------------------------------------------------------------------------------------------