women veterans outreach tool design phase 1
DESCRIPTION
The Women Veterans' Outreach Tool project is a collaboration between Pine Tree Legal Services of Maine and the NuLawLab at Northeastern University's School of Law. Through my internship at the NuLawLab this semester I have been designing new web interfaces and re-structuring the existing Women Who Serve Website that will be coded in Drupal over Summer 2015.TRANSCRIPT
![Page 1: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/1.jpg)
Women VeteransOutreach Tool
NuLawLab
![Page 2: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/2.jpg)
2
A project of the NuLawLab at the Northeastern University School of Law in Boston, Massachusetts for Pine Tree Legal Services of Maine. This project is funded by the Legal Services Corporation of America.
This design guide for the Women with Military Service website is authored and designed by Applied Design Intern Alexander Armand Ribeiro Nally, a student of the Studio for Interrelated Media B.F.A. Program at the Massachusetts College of Art and Design in Boston, Massachusetts.
© NuLawLab 2015All Rights Reserved.
NuLawLabwww.nulawlab.org
![Page 3: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/3.jpg)
3
5
6
9
12
28
38
46
62
70
about the designer
design process
design needs
new homepage features
user-indicated resource search tool
legal forms search tool
resource & legal forms search results page
frequently asked questions page
style & design guides
CONTENTS
![Page 4: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/4.jpg)
4
![Page 5: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/5.jpg)
5
ALEXANDER ARMAND RIBEIRO NALLY is an undergraduate student of the Studio for Interrelated Media Bachelor of Fine Arts program at the Massachusetts College of Art and Design in Boston, Massachusetts. Their passion for social justice, law and graphic design led them to seek an internship opportunity at the NuLawLab (Northeastern University School of Law) in Boston, Massachusetts with Jules Sievert and Dan Jackson. During the months of January to May 2015, they worked for the NuLawLab as an Applied Design Intern studying Applied Research and Design Strategies, Graphic Design, Information Design, Mobile Application Development, Logo Development, Co-Design Process, Community and Client Consultation, Data Visualization and Information Visualization. Upon completion of their BFA, they aspire to attend law school in pursuit of developing more accessible paths to justice for individuals of all backgrounds, and to continue to use visual art and communication design to broaden the accessibility of existing legal and social justice resources.
SPECIAL THANKS
Kate Akkaya JD CandidateFriend and Mentor
Jules Rochielle Sievert MFACreative Director of the NuLawLab
Dan JacksonExecutive Director of the NuLawLab
Nita Sturiale MFAFaculty Advisor, Studio for Interrelated Media Department Chair
ABOUT THE DESIGNER
![Page 6: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/6.jpg)
6
THE GOAL OF THIS DOCUMENT is to brief stake-holders of the processes used to inform the visual design of this tool and give them an understanding of how this tool might function for the benefit of women veterans across the United States.
THE DESIGN PROCESS for this project employed collabora-tions across disciplines between law students, faculty, staff a design student, and women veterans. They sought to deter-mine the needs of women veterans and understand how an outreach tool for them will be successful and useful. Although various different creative exercises and group activities were used throughout the semester, ultimately it was the effects of group dynamic and client consultation with stakeholders that projected a direction for this project.
![Page 7: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/7.jpg)
7
THE GOAL OF THIS DOCUMENT is to brief stake-holders of the processes used to inform the visual design of this tool and give them an understanding of how this tool might function for the benefit of women veterans across the United States.
![Page 8: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/8.jpg)
8
![Page 9: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/9.jpg)
9
The current user interface leads users into a maze of resources. By providing a triage tool, users can be more quickly directed to the specif-ic resources they’re seeking.
By indicating what type of user someone is, the web page can show the user specific resources first to better their user experience.
In recognition of the needs for women veterans, the tool should have an always visible, accessible crisis tool with resources for women vets in need of help immediately.
To increase the emphasis of site content.
To increase user-friendliness of the site.
Redesign the navigation panel to give this tool its own visual identity that conveys more of a user experience relatable to women veterans.
Use imagery that is neutral and indicative of community rather than special women in service, with an emphasis on diverse representation.
Descriptors and links should be simplified to fewer words to give the user a more concise and direct experience. Organize as much of the web page into three categories as possible to simplify the web site’s organization.
(1) Content Navigation
(2) User Indication
(3) Crisis Line
(4) Smaller Margins
(5) Adjusted Stateside Logo
(6) Unique Visual Identity
(7) Inclusive Branding
(8) Simplified Layout Design
DEVELOPED BYN.U. Law Students Alexa Daniel, Sarah Heydemann and Rosie Nevins
DESIGN NEEDS
![Page 10: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/10.jpg)
10
WOMEN WHO SERVE
Women with Military Service
![Page 11: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/11.jpg)
11
WOMEN WHO SERVE
Women with Military Service
![Page 12: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/12.jpg)
12
http://statesidelegal.org/
![Page 13: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/13.jpg)
13
HOMEPAGERESPONSIVE MOBILE + DESKTOP
![Page 14: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/14.jpg)
14
http://statesidelegal.org/
![Page 15: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/15.jpg)
15
HOMEPAGE CRISIS TABRESPONSIVE MOBILE + DESKTOP
![Page 16: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/16.jpg)
16
http://statesidelegal.org/
![Page 17: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/17.jpg)
17
HOMEPAGERESPONSIVE MOBILE + DESKTOP
![Page 18: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/18.jpg)
18
http://statesidelegal.org/
![Page 19: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/19.jpg)
19
HOMEPAGE VIDEOS TABRESPONSIVE MOBILE + DESKTOP
![Page 20: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/20.jpg)
20
http://statesidelegal.org/
![Page 21: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/21.jpg)
21
HOMEPAGERESPONSIVE MOBILE + DESKTOP
![Page 22: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/22.jpg)
22
http://statesidelegal.org/
![Page 23: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/23.jpg)
23
HOMEPAGE LIBRARY TABRESPONSIVE MOBILE + DESKTOP
![Page 24: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/24.jpg)
24
http://statesidelegal.org/
![Page 25: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/25.jpg)
25
HOMEPAGERESPONSIVE MOBILE + DESKTOP
![Page 26: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/26.jpg)
26
http://statesidelegal.org/
![Page 27: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/27.jpg)
27
HOMEPAGE ONLINE INTAKERESPONSIVE MOBILE + DESKTOP
![Page 28: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/28.jpg)
28
http://statesidelegal.org/
![Page 29: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/29.jpg)
29
ONLINE INTAKE RESOURCESRESPONSIVE MOBILE + DESKTOP
![Page 30: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/30.jpg)
30
http://statesidelegal.org/
![Page 31: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/31.jpg)
31
ONLINE INTAKE RESOURCESRESPONSIVE MOBILE + DESKTOP
![Page 32: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/32.jpg)
32
http://statesidelegal.org/
![Page 33: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/33.jpg)
33
ONLINE INTAKE RESOURCESRESPONSIVE MOBILE + DESKTOP
![Page 34: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/34.jpg)
34
![Page 35: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/35.jpg)
35
![Page 36: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/36.jpg)
36
![Page 37: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/37.jpg)
37
![Page 38: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/38.jpg)
38
http://statesidelegal.org/
![Page 39: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/39.jpg)
39
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 40: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/40.jpg)
40
http://statesidelegal.org/
![Page 41: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/41.jpg)
41
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 42: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/42.jpg)
42
http://statesidelegal.org/
![Page 43: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/43.jpg)
43
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 44: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/44.jpg)
44
http://statesidelegal.org/
![Page 45: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/45.jpg)
45
ONLINE INTAKE LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 46: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/46.jpg)
46
http://statesidelegal.org/
![Page 47: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/47.jpg)
47
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 48: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/48.jpg)
48
http://statesidelegal.org/
![Page 49: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/49.jpg)
49
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 50: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/50.jpg)
50
http://statesidelegal.org/
![Page 51: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/51.jpg)
51
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 52: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/52.jpg)
52
http://statesidelegal.org/
![Page 53: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/53.jpg)
53
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 54: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/54.jpg)
54
http://statesidelegal.org/
![Page 55: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/55.jpg)
55
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 56: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/56.jpg)
56
http://statesidelegal.org/
![Page 57: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/57.jpg)
57
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 58: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/58.jpg)
58
http://statesidelegal.org/
![Page 59: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/59.jpg)
59
SEARCH RESULTS LEGAL FORMSRESPONSIVE MOBILE + DESKTOP
![Page 60: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/60.jpg)
60
http://statesidelegal.org/
![Page 61: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/61.jpg)
61
HOMEPAGERESPONSIVE MOBILE + DESKTOP
![Page 62: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/62.jpg)
62
http://statesidelegal.org/
![Page 63: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/63.jpg)
63
OTHER PAGES FAQSRESPONSIVE MOBILE + DESKTOP
![Page 64: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/64.jpg)
64
http://statesidelegal.org/
![Page 65: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/65.jpg)
65
OTHER PAGES FAQSRESPONSIVE MOBILE + DESKTOP
![Page 66: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/66.jpg)
66
http://statesidelegal.org/
![Page 67: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/67.jpg)
67
OTHER PAGES FAQSRESPONSIVE MOBILE + DESKTOP
![Page 68: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/68.jpg)
68
http://statesidelegal.org/
![Page 69: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/69.jpg)
69
HOMEPAGERESPONSIVE MOBILE + DESKTOP
![Page 70: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/70.jpg)
70
![Page 71: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/71.jpg)
71
primary blue
1B57AFaccent blue
4E9CC3white
FFFFFF
accent orange
F7931Eaccent red
E01722
gray
333333black
000000
USE OF COLOR
Colors for this website are used to provide high contrast to the visual field. Combined with high contrast in text point size and weight, these colors help make the website as navigable as possible visually. The palette should be as restricted as possible to prevent the web experience from becoming too muddled or confusing to navigate. Accents should be avoided unless they are going to help the user either navigate to their next step or to return to their previous location on the site.
STYLE GUIDE WEBSITE COLORS
![Page 72: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/72.jpg)
72
![Page 73: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/73.jpg)
73
lobster script 18pt
El ilibus ut aut volum, consectaspel inum cone num estia voles mossimus rest,
montserrat regular 18pt
El ilibus ut aut volum, consectaspel inum cone num estia voles mossimus rest,
montserrat bold 18pt
El ilibus ut aut volum, consectaspel inum cone num estia voles mossimus rest,
USE OF TYPOGRAPHY
All of the typefaces used for this website design are open-source and available through Google for free. The reasoning for this is to make this tool as accessible as possible and by using typefaces that do not require a licensing fee, funds can be further put toward the site’s functionality and its rollout to women veterans. Lobster is a script typeface that is clean and friendly while also looking great on websites and mobile devices. Montserrat is similar to other popular Humanist typefaces and serves also as a clean and friendly typeface that looks great on web and mobile devices.
While there should not be a strict typography guide–to allow for adjustments over time–keeping in mind that high contrast helps users navigate along a page. By using contrast in weights and sizes next to each other, the user will be able to navigate the page easily. Bold, larger headers will guide users to paragraphs or pockets of smaller text they can focus into if they are interested.
STYLE GUIDE TYPOGRAPHY
![Page 74: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/74.jpg)
74
![Page 75: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/75.jpg)
75
RESPONSIVE LAYOUTS
To ensure accessibility of this website on as many devices as possible, it is highly recommended that this website be coded with as much versatility as possible. For example taking advantage of HTML5’s ability to provide respon-sive web pages that change based upon browser width or device size. Additionally, it might be useful to employ similar tactics in developing CSS style sheets by using percentages for width sizes, text sizes et cetera. This guide displays specific dimensions for most elements on the sample pages, but so long as the visual aspect ratios are carried out, the specific pixel widths are not as important as the site’s ability to adapt to various devices. For side drawers that slide out into the center of the page, they should move left between 400-550 pixels from the right. For motions such as the web page moving leftwards to reveal videos hidden to the right, the page should move no more than 400 pixels to the left.
Suggestions of how the site might be responsive to a desktop I are included–both mobile and desktop versions of the homepage and triage menus. The visual ratios are fairly consistent between the two, the only difference is that the desktop view takes advantage of width and will add more, shorter columns to hold text as opposed to having fewer, taller columns. An emphasis on readabili-ty and accessibility is incredibly important to the future users of this site and by using responsive layouts we can ensure that most users will have sufficient web experiences regardless of their access platform or device. Aside from some minor drop shadow and transparency effects the layouts mostly have images or shapes that can be rendered through HTML, CSS and Java Script to lessen the amount of data a user would have to download to experience the site.
STYLE GUIDE PAGE LAYOUTS
![Page 76: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/76.jpg)
76
![Page 77: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/77.jpg)
77
stateside logo size154p wide x 28p high
top blue banner size and hex 792p wide x 153p high #1B57AF
women with m. service title point sizeLobster 63pt 10% multiply drop shadow
white nav bar size792p wide x 37p high, 90% transparency
nav bar text size and stylesselected text 8pt Montserrat Bold #2E3192 100% opacity
other text 8pt Montserrat Regular #3162B0 90% opacity
women vet image size792p wide x 473p high 90% opacity
transparent blue shape size and position576p wide x 215p high #1B57AF 70% opacity
transparent blue shape textheading Montserrat Bold 18p white and #F7931E
body Montserrat Regular 12p white
right side tabs/drawers43p wide x 163p highred #FF0000 80% opacitywhite 70% opacity
text size and position for side tabsMontserrat Regular 16p black or white
‘how can we...’ header text sizeMontserrat Bold 24p
‘how can we...’ inside shape text stylesMontserrat Regular 18p
dimensions of shapes180p wide x 90p high18p rounded corners90% opacity3p border #3162B0
background imagedsc_0270.jpg 80% opacityon top of white
background color for videos sidebardrawer sidebar #4D4D4D
STYLE GUIDE HOMEPAGEMOBILE
![Page 78: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/78.jpg)
78
![Page 79: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/79.jpg)
79
stateside logo size368p wide x 66p high
top blue banner size and hex 2560p x 347p #1B57AF
women with m. service title point sizeLobster 152pt 10% multiply drop shadow
white nav bar size2560p wide x 88p high, 90% transparency
nav bar text size and stylesselected text 20pt Montserrat Bold #2E3192 100% opacity
other text 20pt Montserrat Regular #3162B0 90% opacity
women vet image size2560p wide x 1176p high 90% opacity
transparent blue shape size and position1814p wide x 515p high #1B57AF 70% opacity
transparent blue shape textheading Montserrat Bold 43p white and #F7931E
body Montserrat Regular 29p white
right side tabs/drawers107p wide x 222p highred #FF0000 80% opacitywhite 70% opacity
text size and position for side tabsMontserrat Regular 38p black or white
‘how can we...’ header text sizeMontserrat Bold 58p
‘how can we...’ inside shape text stylesMontserrat Regular 43p
dimensions of shapes617p wide x 217p high18p rounded corners90% opacity8p border #3162B0
background imagedsc_0270.jpg 80% opacityon top of white
background color for videos sidebardrawer sidebar #4D4D4D
STYLE GUIDE HOMEPAGEDESKTOP
![Page 80: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/80.jpg)
80
![Page 81: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/81.jpg)
81
stateside logo sizesame as homepage
top blue banner size and hexsame as homepage
women with m. service title point sizesame as homepage
white nav bar sizesame as homepage
nav bar text size and stylessame as homepage
right side tabs/drawerssame as homepage
text size and position for side tabssame as homepage
‘search results’ box size521p wide x 261p high18p rounded corners8p outline #1B57AF
‘search results’ box textMontserrat Bold 52p white
‘seach tool results/search for other’ bar720p wide x 25p high#1B57AFMontserrat Regular, Bold 18p white
body text area531p wide x 575p high18p bottom rounded corners60% opacity white18p Montserrat Bold, Regular#1B57AF, #F7931E12p, 10p Montserrat Regular black
STYLE GUIDE SEARCH RESULTS
![Page 82: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/82.jpg)
82
![Page 83: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/83.jpg)
83
stateside logo sizesame as homepage
top blue banner size and hexsame as homepage
women with m. service title point sizesame as homepage
white nav bar sizesame as homepage
nav bar text size and stylessame as homepage
right side tabs/drawerssame as homepage
text size and position for side tabssame as homepage
‘FAQS’ box size521p wide x 261p high18p rounded corners8p outline #1B57AF
‘FAQS’ box textMontserrat Bold 52p white
‘back to homepage’ bar720p wide x 25p high#1B57AFMontserrat Bold 18p white
body text area531p wide x 575p high18p bottom rounded corners60% opacity white
18p Montserrat Bold, Regular14p Montserat Regular black
STYLE GUIDE FAQS
![Page 84: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/84.jpg)
84
![Page 85: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/85.jpg)
85
MOBILE
blue window562p wide x 882p high18p rounded corners #1B57AF
header textMontserrat Bold45p white
subheader textMontserrat Regular14p black
question/answer textMontserrat Bold11p white
gray fields225p wide x 18p high9p rounded corners #333333
white triangles9p wide x 6.5p high
back/next buttons81.5p wide x 17.5p high9p rounded corners white11p Montserrat Regular #1B57AF
crisis button486p wide x 56p high9p rounded corners #E01722
16p Montserrat Regularwhite
exit tool button105p wide x 17.5p high9p rounded corners #333333
11p Montserrat Boldwhite
DESKTOP
blue window2300p wide x 1330p high72p rounded corners #1B57AF
header textMontserrat Bold110p white
subheader textMontserrat Regular30p black
question/answer textMontserrat Bold24p white
gray fields457p wide x 42p high6.5p rounded corners #333333
white triangles19p wide x 13p high
back/next buttons369p wide x 45p high9p rounded corners white28p Montserrat Regular #1B57AF
crisis button948p wide x 109p high9p rounded corners #E01722
28p Montserrat Regularwhite
exit tool button312p wide x 52p high9p rounded corners #333333
32p Montserrat Boldwhite
STYLE GUIDE TRIAGE
![Page 86: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/86.jpg)
![Page 87: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/87.jpg)
![Page 88: Women Veterans Outreach Tool Design Phase 1](https://reader030.vdocument.in/reader030/viewer/2022020522/5790759e1a28ab6874b569fa/html5/thumbnails/88.jpg)
© 2015 NuLawLab. All Rights Reserved.