Steve Schlake Website Proposal

This is a case study for possible website. Working title Green Steve.

Standard 

A promotional or commercial website made up of 5-7 web pages, including:

Homepage
About page
Contact page
Services page
Popup
404 page
Header / Footer

Standard + Blog

Very similar to the Standard, only that it also includes all the designs needed for maintaining a blog.

“Standard” pages
Single post page
Archive page

Standard + Online Store

Possibly, the most demanding type of website includes:

“Standard” pages
Product pages
Cart page
Checkout page
Account page
Shipping
Credit Card Billing
Sales & Special Offers

Project Details

Steve Schlake

WEBSITE
GreenSteve.com

SERVICES

  • Web design
  • UI / UX
  • Website Build

DELIVERABLES

  • 5 – 12 Pages
  • Illustrations
  • Icons
  • Style guide
  • WordPress Build

OTHER

  • SEO
  • Analytics
  • Social Media
  • Facebook Business Page
  • Email Campaign and Flow

Sitemap

Landing Page vs. Homepage: What’s the Difference?

The most significant difference between a website homepage and a post-click landing page. The homepage focuses more on informing and empowering the visitor, while the post-click landing page focuses on persuading the visitor.

The fundamental difference between a landing page and homepage is, you design the two with completely different goals or purposes in mind:

  • The homepage of your site sets the stage
  • A landing page allows visitors to accomplish a specific goal

Landing Page

Hover to scroll and click to open image.

[dsm_scroll_image src=”https://michaelapice.com/wp-content/uploads/2020/10/gs-landing-page.jpg” title_text=”gs-landing-page” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” height=”500px” max_height=”500px” border_width_all=”1px” border_color_all=”#c1c1c1″ border_width_all_overlay=”2px” box_shadow_style=”preset3″ global_colors_info=”{}”][/dsm_scroll_image]

Home Page

Hover to scroll and click to open image.

[dsm_scroll_image src=”https://michaelapice.com/wp-content/uploads/2020/10/gs-home-page.jpg” title_text=”gs-home-page” show_in_lightbox=”on” _builder_version=”4.16″ _module_preset=”default” height=”500px” max_height=”500px” border_width_all=”1px” border_color_all=”#c1c1c1″ border_width_all_overlay=”2px” box_shadow_style=”preset3″ global_colors_info=”{}”][/dsm_scroll_image]

All Website Pages

Hover and click to open images.

[dsm_card_carousel slider_effect=”coverflow” slider_effect_coverflow_depth=”120″ pause_on_hover=”on” space_between=”50″ use_arrow_custom_position=”on” arrow_size=”20px” arrow_color=”#ffffff” arrow_background_color=”#8300e9″ dots_active_color=”#8300e9″ grab=”off” arrows_tablet=”” arrows_phone=”off” arrows_last_edited=”on|phone” arrow_custom_position_tablet=”” arrow_custom_position_phone=”15px” arrow_custom_position_last_edited=”on|tablet” arrow_size_tablet=”” arrow_size_phone=”16px” arrow_size_last_edited=”on|phone” _builder_version=”4.16″ header_font=”Montserrat|800|||||||” body_font=”Lato||||||||” custom_padding=”30px|4%|30px|4%|true|true” custom_css_main_element=”padding: 4% !important;” border_radii_arrow=”on|50px|50px|50px|50px” border_radii_card=”on|6px|6px|6px|6px” box_shadow_style_arrow=”preset2″ box_shadow_color_arrow=”rgba(131,0,233,0.3)” box_shadow_style_card=”preset2″ global_colors_info=”{}”][dsm_card_carousel_child title=”About Page” image=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-about.jpg” image_background_position=”top_left” image_background_animation=”zoom_in” image_popup=”on” image_popup_src=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-about.jpg” badge_text=”Coca Cola” button_url_new_window=”1″ _builder_version=”4.16″ background_color=”#f4f4f4″ background_enable_color=”on” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#8300e9″ button_border_color=”#8300e9″ button_border_radius=”50px” button_font=”Montserrat|700|||||||” button_alignment=”left” button_custom_padding=”10px|30px|10px|30px|true|true” box_shadow_style_button=”preset2″ box_shadow_spread_button=”-7px” box_shadow_color_button=”rgba(131,0,233,0.18)” global_colors_info=”{}” button_bg_color__hover_enabled=”off|hover” button_bg_color__hover=”#00ede1″ button_bg_enable_color__hover=”on” button_border_color__hover_enabled=”off|hover” button_border_color__hover=”#00ede1″]

The primary purpose of an about us page is to inform the reader about the company and its operations. This is a straightforward goal that nearly all businesses have to fulfill in some fashion or another. However, there are other reasons why about us pages are common fixtures on business websites.

[/dsm_card_carousel_child][dsm_card_carousel_child title=”Contact Page” image=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-contact.jpg” image_background_position=”top_left” image_background_animation=”zoom_out” image_popup=”on” image_popup_src=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-contact.jpg” badge_text=”Zoom Out” button_url_new_window=”1″ _builder_version=”4.16″ background_color=”#f4f4f4″ background_enable_color=”on” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#8300e9″ button_border_color=”#8300e9″ button_border_radius=”50px” button_font=”Montserrat|700|||||||” button_alignment=”left” button_custom_padding=”10px|30px|10px|30px|true|true” box_shadow_style_button=”preset2″ box_shadow_spread_button=”-7px” box_shadow_color_button=”rgba(131,0,233,0.18)” global_colors_info=”{}” button_bg_color__hover_enabled=”off|hover” button_bg_color__hover=”#00ede1″ button_bg_enable_color__hover=”on” button_border_color__hover_enabled=”off|hover” button_border_color__hover=”#00ede1″]

Contact us pages are often the go-to for a new visitor on a mission. It’s where they go when they have a question and truly want to speak to an individual at your organization. They exist to serve the user with the purpose of providing the user with information on how they can get in touch with you.

[/dsm_card_carousel_child][dsm_card_carousel_child title=”Resources Page” image=”https://michaelapice.com/wp-content/uploads/2020/10/gs-resources-page.jpg” image_background_position=”top_left” image_background_animation=”zoom_out” image_popup=”on” image_popup_src=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-resources.jpg” badge_text=”Zoom Out” button_url_new_window=”1″ _builder_version=”4.16″ background_color=”#f4f4f4″ background_enable_color=”on” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#8300e9″ button_border_color=”#8300e9″ button_border_radius=”50px” button_font=”Montserrat|700|||||||” button_alignment=”left” button_custom_padding=”10px|30px|10px|30px|true|true” box_shadow_style_button=”preset2″ box_shadow_spread_button=”-7px” box_shadow_color_button=”rgba(131,0,233,0.18)” global_colors_info=”{}” button_bg_color__hover_enabled=”off|hover” button_bg_color__hover=”#00ede1″ button_bg_enable_color__hover=”on” button_border_color__hover_enabled=”off|hover” button_border_color__hover=”#00ede1″]

What’s a Resource Page? That’s a page on your website dedicated to sharing the tools you’re using and/or recommending. It’s where you can freely include your affiliate links, as these are also products and services you trust.

[/dsm_card_carousel_child][dsm_card_carousel_child title=”Service Page” image=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-services.jpg” image_background_position=”top_left” image_background_animation=”zoom_out” image_popup=”on” image_popup_src=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-services.jpg” badge_text=”Zoom Out” button_url_new_window=”1″ _builder_version=”4.16″ background_color=”#f4f4f4″ background_enable_color=”on” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#8300e9″ button_border_color=”#8300e9″ button_border_radius=”50px” button_font=”Montserrat|700|||||||” button_alignment=”left” button_custom_padding=”10px|30px|10px|30px|true|true” box_shadow_style_button=”preset2″ box_shadow_spread_button=”-7px” box_shadow_color_button=”rgba(131,0,233,0.18)” global_colors_info=”{}” button_bg_color__hover_enabled=”off|hover” button_bg_color__hover=”#00ede1″ button_bg_enable_color__hover=”on” button_border_color__hover_enabled=”off|hover” button_border_color__hover=”#00ede1″]

Our services page is one of the most critical pages on your website whose purpose is to not only reveal what you offer but how your company stands out from the rest. It starts with the messaging. … If your services are visual, a variety of photography/graphics accompanying the content may help put everything together.

[/dsm_card_carousel_child][dsm_card_carousel_child title=”Shop Page” image=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-shop.jpg” image_background_position=”top_left” image_background_animation=”zoom_out” image_popup=”on” image_popup_src=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-shop.jpg” badge_text=”Zoom Out” button_url_new_window=”1″ _builder_version=”4.16″ background_color=”#f4f4f4″ background_enable_color=”on” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#8300e9″ button_border_color=”#8300e9″ button_border_radius=”50px” button_font=”Montserrat|700|||||||” button_alignment=”left” button_custom_padding=”10px|30px|10px|30px|true|true” box_shadow_style_button=”preset2″ box_shadow_spread_button=”-7px” box_shadow_color_button=”rgba(131,0,233,0.18)” global_colors_info=”{}” button_bg_color__hover_enabled=”off|hover” button_bg_color__hover=”#00ede1″ button_bg_enable_color__hover=”on” button_border_color__hover_enabled=”off|hover” button_border_color__hover=”#00ede1″]

A typical online store enables the customer to browse the firm’s range of products and services, view photos or images of the products, along with information about the product specifications, features and prices. Online stores usually enable shoppers to use “search” features to find specific models, brands or items.

[/dsm_card_carousel_child][dsm_card_carousel_child title=”Recipe Page” image=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-recipe.jpg” image_background_position=”top_left” image_background_animation=”zoom_out” image_popup=”on” image_popup_src=”https://michaelapice.com/wp-content/uploads/2020/10/dietitian-recipe.jpg” badge_text=”Zoom Out” button_url_new_window=”1″ _builder_version=”4.16″ background_color=”#f4f4f4″ background_enable_color=”on” custom_button=”on” button_text_size=”14px” button_text_color=”#ffffff” button_bg_color=”#8300e9″ button_border_color=”#8300e9″ button_border_radius=”50px” button_font=”Montserrat|700|||||||” button_alignment=”left” button_custom_padding=”10px|30px|10px|30px|true|true” box_shadow_style_button=”preset2″ box_shadow_spread_button=”-7px” box_shadow_color_button=”rgba(131,0,233,0.18)” global_colors_info=”{}” button_bg_color__hover_enabled=”off|hover” button_bg_color__hover=”#00ede1″ button_bg_enable_color__hover=”on” button_border_color__hover_enabled=”off|hover” button_border_color__hover=”#00ede1″]

It is meant to include the technical aspects of a dish while also teaching the artistic combination of flavor and texture. A recipe communicates the ingredients and procedures the chef uses to make his creations. It is this tool which allows the chef to train and replicate his skill to his staff.

[/dsm_card_carousel_child][/dsm_card_carousel]

Logo & Branding

Style Guide

Main Logo

Consisting of a word mark and an abstract mark, the logo is a so-called combination mark. The logo should be a registered trademark.

Green Steve

Business Card Front

Green Steve

Business Card Back

Color & Typography

Style Guide

Website Color Scheme

Color Style Guide

#009b0b
#FF8640
#00C50E
#ec8e36
#69fa91
#ffb081
#000000
#b27e2a
#777777
#b39c76
#999999
#dcc091

Typography

Main Font

About DM Serif Display

DM Serif Display is a high-contrast transitional face. With delicate serifs and fine detailing, the design has been shaped for use in super-sized poster settings. It is accompanied by DM Serif Text, for use in smaller point ranges.

DM Serif Display supports a Latin Extended glyph set, enabling typesetting for English and other Western European languages. It was designed by Colophon Foundry (UK), that started from the Latin portion of Adobe Source Serif Pro, by Frank Grießhammer.

The DM Serif project was commissioned by Google from Colophon, an international and award-winning type foundry based in London (UK) and Los Angeles (US) who publish and distribute high-quality retail and custom typefaces for analog and digital media. To contribute, see github.com/googlefonts/dm-fonts

CSS

1 font-family: ‘DM Serif Display’,Georgia,”Times New Roman”,serif;

Aa

DM Serif Display Semibold 32pt

DM Serif Display Regular 24pt

DM Serif Display Regular 16pt

DM Serif Display Bold 14pt

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)

Popular pairings with DM Serif Display

Roboto

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)

CSS
1 font-family: Roboto;

Roboto Condensed

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)

CSS
1 font-family: Roboto Condensed;

Roboto Slab

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)

CSS
1 font-family: Roboto Slab;

Open Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)

CSS
1 font-family: Open Sans;

Poppins

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890(,.;:?!$&*)

CSS
1 font-family: Poppins;

Social Media 

Facebook Examples

Sample Facebook Post

💥 NEW PACK: Introducing the Holistic Fitness Pack 💥⠀⠀⠀⠀⠀⠀⠀⠀⠀
-⠀⠀⠀⠀⠀⠀⠀⠀⠀
A holistic approach to fitness requires specialized formulas. Our pre- and post workout products will help transform your body and your approach to fitness AND help provide noticeable difference and improvement in your performance. 💪🏼⠀⠀

AVAILABLE NOW at Purium Health Products

620
357
198

Facebook Business Page

Make It Worth Their While

Facebook is a very effective and powerful tool to send out your message, engage and interact with your true fans. Here are some things to keep in mind:

  • Provide your clients with interesting and engaging content and ask them to join in on the conversation.
  • Ask your clients what they want from your company and encourage them to make their own choices in relation to your product and post it on your page.
  • Offer your clients and “friends” on Facebook an experience or feeling that they belong to something truly exciting.
  • Offer videos or comment on things happening in the news, business community or entertainment world and how it relates to your business. You never know what you’ll get in response and might be able to use in future marketing efforts.
WordPress Lightbox