{"id":81,"date":"2021-04-03T07:14:43","date_gmt":"2021-04-03T07:14:43","guid":{"rendered":"https:\/\/michellejleedesign.com\/portfolio\/?post_type=project&p=81"},"modified":"2023-04-27T08:38:15","modified_gmt":"2023-04-27T08:38:15","slug":"3ws-of-covid-website","status":"publish","type":"project","link":"https:\/\/michellejleedesign.com\/portfolio\/project\/3ws-of-covid-website\/","title":{"rendered":"3Ws of Covid Website"},"content":{"rendered":"

[et_pb_section fb_built=”1″ _builder_version=”4.16″ _module_preset=”default” custom_margin_tablet=”” custom_margin_phone=”||||false|false” custom_margin_last_edited=”on|phone” custom_padding=”0px||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”4.16″ _module_preset=”default” width=”100%” custom_margin=”0px||0px||true|false” custom_padding=”50px|0px|50px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_blurb title=”3 Ws of Covid Website” image=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3w-landingpage.png” alt=”3ws-covid Landing Page” content_max_width=”1080px” _builder_version=”4.16″ _module_preset=”default” header_level=”h1″ header_font=”Raleway|700|||||||” module_alignment=”left” custom_margin=”||||false|false” custom_padding_tablet=”” custom_padding_phone=”|10px||10px|false|true” custom_padding_last_edited=”on|phone” body_font_size_tablet=”” body_font_size_phone=”14px” body_font_size_last_edited=”on|phone” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Challenge: To create an informative website with child-friendly graphics and in-depth information and links about Covid-19.<\/p>\n

[\/et_pb_blurb][et_pb_button button_url=”https:\/\/michelle-j-lee-designs.github.io\/3ws_covid\/” url_new_window=”on” button_text=”Click to Website” button_alignment=”center” _builder_version=”4.18.0″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,2_3″ use_custom_gutter=”on” gutter_width=”1″ _builder_version=”4.16″ _module_preset=”default” width=”100%” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_blurb title=”Preliminary Sketches” _builder_version=”4.16″ _module_preset=”default” header_level=”h1″ custom_margin=”|||50px|false|false” custom_margin_tablet=”” custom_margin_phone=”|||15px|false|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Main Goals: to incorporate cute, friendly graphics with informative details on covid-19 safety protocols. Aimed towards both adult and child users.<\/p>\n

– Graphics are interactive in some form – Main audience are children<\/p>\n

– Use the CDC website as reference for facts and guidelines. Information on site is aimed for Adult users.<\/p>\n

– Want to experiment javascript with a Hamburger Menu as navigation for website<\/p>\n

[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”2_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/05\/Photo-May-01-2-45-09-PM-scaled.jpg” title_text=”Photo May 01, 2 45 09 PM” align=”center” _builder_version=”4.16″ _module_preset=”default” width=”65%” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding_last_edited=”on|phone” _builder_version=”4.16″ _module_preset=”default” width=”100%” custom_margin=”0px|50px|0px|50px|true|true” custom_margin_tablet=”” custom_margin_phone=”0px|0px|0px|0px|true|true” custom_margin_last_edited=”on|phone” custom_padding=”0px||0px||true|false” custom_padding_tablet=”” custom_padding_phone=”0px|10px|0px|10px|true|true” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ use_custom_gutter=”on” gutter_width=”1″ make_equal=”on” _builder_version=”4.16″ _module_preset=”default” width=”100%” max_width=”1860px” custom_margin=”0px|25px|0px|25px|true|true” custom_margin_tablet=”” custom_margin_phone=”|0px||0px|true|true” custom_margin_last_edited=”on|phone” custom_padding=”0px||0px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_blurb title=”Wireframes” _builder_version=”4.16″ _module_preset=”default” header_level=”h1″ custom_margin=”25px|15px|25px|15px|true|true” custom_padding=”0px|||||” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

The layout of each page is simple.<\/p>\n

WASH, WEAR, and WAIT pages will not be so long that the user has to scroll. Just enough information for adults to read, but the interactive graphi is within the intitial top page.<\/p>\n

More Information will require scrolling as it contains 12 images in the gallery. Only, title and link to CDC page, maybe a brief summary of category.<\/p>\n

[\/et_pb_blurb][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/Wash-Page.png” alt=”3ws Covid -wash your hands page wireframe” title_text=”Wash Page” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” custom_margin=”|||1px||” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/Landing-Page.png” alt=”3ws Covid -landing page wireframe” title_text=”Landing Page” show_in_lightbox=”on” force_fullwidth=”on” _builder_version=”4.16″ _module_preset=”default” custom_padding=”|0px||||” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/Wait-Page.png” alt=”3ws Covid – wait (social distance) page wireframe” title_text=”Wait Page” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/Wear-Page.png” alt=”3ws Covid -wear a mask page wireframe” title_text=”Wear Page” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/More-Info-Page.png” alt=”3ws Covid – more information wireframe” title_text=”More Info Page” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”2_5,3_5″ use_custom_gutter=”on” gutter_width=”2″ make_equal=”on” _builder_version=”4.16″ _module_preset=”default” width=”100%” max_width=”1800px” custom_margin=”0px||0px|50px|true|false” custom_margin_tablet=”” custom_margin_phone=”|||0px|true|false” custom_margin_last_edited=”on|phone” custom_padding=”0px|10px|0px|10px|true|true” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”2_5″ _builder_version=”4.16″ _module_preset=”default” custom_padding=”|25px|||false|false” border_color_all=”#51618C” border_width_right=”3px” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.16″ _module_preset=”default” header_font=”Raleway||||||||” header_font_size=”37px” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Color Themes<\/h1>\n

[\/et_pb_text][et_pb_blurb image=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws-covid_color-11.png” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Blue and Yellow represent colors of trust and safety, which is may be helpful to reassure users as they read and browse through the site<\/p>\n

[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”3_5″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Graphics<\/h1>\n

[\/et_pb_text][et_pb_blurb image=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws_graphic.png” alt=”3ws Covid – graphics” content_max_width=”920px” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Illustrated graphics with solid matte colors. Appealling to kids while convey the message to practice safety.<\/p>\n

Graphics tested and kid approved!<\/p>\n

[\/et_pb_blurb][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ make_equal=”on” _builder_version=”4.16″ _module_preset=”default” width=”100%” max_width=”1800px” custom_margin=”0px||0px|50px|true|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.16″ _module_preset=”default” header_font=”Raleway||||||||” header_font_size=”37px” custom_padding=”50px||50px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Problems and Solutions<\/h1>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ use_custom_gutter=”on” gutter_width=”1″ make_equal=”on” custom_padding_last_edited=”on|desktop” _builder_version=”4.16″ _module_preset=”default” width=”100%” max_width=”1860px” custom_margin=”0px|25px|0px|25px|true|true” custom_margin_tablet=”” custom_margin_phone=”|0px||0px|true|true” custom_margin_last_edited=”on|phone” custom_padding=”0px||0px|10px|true|false” custom_padding_tablet=”” custom_padding_phone=”0px||0px|10px|true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_blurb title=”Wear A Mask Animation” image=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/mask.gif” alt=”3ws Covid – Wear Mast animation gif” image_icon_width=”80%” _builder_version=”4.16″ _module_preset=”default” header_level=”h1″ header_font=”|600|||||||” header_line_height=”1.7em” border_width_right=”3px” border_color_right=”#51618C” image_max_width=”80%” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Problem:<\/h3>\n

I orginally used absolute display css to overlay the mask over the face. However, the animation of the mask’s movement was ny syncing, especially the\u00a0 screen switched from desktop to moble view.<\/p>\n

Solution:<\/h3>\n

I converted the graphic in to an animated gif file, made in Adobe Photoshop, and then timed the animation through css3.<\/p>\n

[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”Raleway|700|||||||” text_orientation=”center” custom_margin=”0px||||false|false” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|desktop” border_width_all_tablet=”” border_width_all_phone=”” border_width_all_last_edited=”on|phone” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Before<\/h1>\n

[\/et_pb_text][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/links-gallery.png” title_text=”links-gallery” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” custom_margin=”|||10px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][et_pb_blurb title=”More Information Page – Overlay and Visible Text” content_max_width=”650px” _builder_version=”4.16″ _module_preset=”default” header_level=”h1″ header_font=”|600|||||||” custom_margin=”25px|||10px|false|false” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Problem:<\/h3>\n

I put a white background with a 50% opacity behind the text within each box category.\u00a0 The textbox looked out of place against the background image.<\/p>\n

The background image only captured the middle of the image and everything else was cut off, which called the images’ relativity to the category into question.<\/p>\n

Solution:<\/h3>\n

The text was changed to white against a full black overlay of the background image through CSS3 and I resized the images so they would fit better within the style box.<\/p>\n

[\/et_pb_blurb][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.16″ _module_preset=”default” text_font=”Raleway|700|||||||” text_orientation=”center” custom_margin_tablet=”” custom_margin_phone=”15px||15px||true|false” custom_margin_last_edited=”on|phone” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

After<\/h1>\n

[\/et_pb_text][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/more-information.png” title_text=”more-information” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” custom_padding=”|20px||20px|false|true” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ make_equal=”on” _builder_version=”4.16″ _module_preset=”default” width=”100%” max_width=”1800px” custom_margin=”0px||0px|50px|true|false” custom_padding=”0px||0px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.16″ _module_preset=”default” header_font=”Raleway||||||||” header_font_size=”37px” custom_padding=”50px||50px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”]<\/p>\n

Mockups<\/h1>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ use_custom_gutter=”on” gutter_width=”1″ make_equal=”on” _builder_version=”4.16″ _module_preset=”default” width=”100%” module_alignment=”center” custom_margin=”0px||0px||true|false” custom_padding=”0px|20px|0px|20px|true|true” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws-mockup-landing.png” title_text=”3ws-mockup-landing” show_in_lightbox=”on” force_fullwidth=”on” _builder_version=”4.16″ _module_preset=”default” custom_margin=”||||false|false” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws-mockup-navmenu-e1617511778672.png” alt=”3ws Covid – Navigation” title_text=”3ws-mockup-navmenu” show_in_lightbox=”on” align=”center” _builder_version=”4.16″ _module_preset=”default” width=”92%” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_3″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws-mockup-moreinfo.png” alt=”3ws Covid – More Information Page Mockup” title_text=”3ws-mockup-moreinfo” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.16″ _module_preset=”default” custom_margin=”||||true|false” custom_padding=”25px||25px||true|false” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws-mockup-3pages-1.png” alt=”3ws Covid – 3 pages: Wait, Wear, Wash” title_text=”3ws-mockup-3pages” show_in_lightbox=”on” align=”center” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws-mockup-mobile-1.png” alt=”3Ws Covid Mobile Mockups” title_text=”3ws-mockup-mobile-1″ show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_image src=”https:\/\/michellejleedesign.com\/portfolio\/wp-content\/uploads\/2021\/04\/3ws-mockup-mobile-2.png” alt=”3Ws Covid – Mobile Mockup” title_text=”3ws-mockup-mobile-2″ show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

Challenge: To create an informative website with child-friendly graphics and in-depth information and links about Covid-19.Main Goals: to incorporate cute, friendly graphics with informative details on covid-19 safety protocols. Aimed towards both adult and child users. – Graphics are interactive in some form – Main audience are children – Use the CDC website as reference […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"project_category":[],"project_tag":[],"class_list":["post-81","project","type-project","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/project\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/types\/project"}],"author":[{"embeddable":true,"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":21,"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/project\/81\/revisions"}],"predecessor-version":[{"id":662,"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/project\/81\/revisions\/662"}],"wp:attachment":[{"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/project_category?post=81"},{"taxonomy":"project_tag","embeddable":true,"href":"https:\/\/michellejleedesign.com\/portfolio\/wp-json\/wp\/v2\/project_tag?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}