PHASE 1 : Brand Development and UI Research

(20% of Project-4 grade)

INSTRUCTIONS:

STEP ONE

Decide what your brand will represent in a more concrete way, and create a mission and function for your fictional company/organization. This will help you establish the values of the organization, which will help inform the name of the org/co.

Organizations summarize their goals and objectives in mission and vision statements. Both of these serve different purposes for a company but are often confused with each other. While a mission statement describes what a company wants to do now, a vision statement outlines what a company wants to be in the future. Some examples can be found at: http://www.themarketingblender.com/vision-mission-statements/ 

STEP TWO

Based on the function, mission, and values, come up with the name of your brand. Keep it relatively simple.

STEP THREE

Research at least FOUR Google Fonts that would work as that basis of your company name.

STEP FOUR

Research at least FOUR Google font pairings that would work well as a combination of headings and body copy in the website. One of them can also be what you used for the company name if appropriate. AVOID SCRIPT/CURSIVE FONTS HERE. Also avoid Display fonts as body copy.

STEP FIVE

Research websites that you feel have innovative design, good usability, responsive layouts for different screen dimensions, and that are aesthetically pleasing. To know whether or not the sites you visit work on different screen sizes, use the Google Chrome Inspector mobile view tools as demonstrated in class. Also, try to choose within similar genres based on your own brand’s functional mission. For instance, if your brand will represent an online gardening plublication, be sure to choose websites that feature a lot of articles. If, however, your company is a non-profit that organizes volunteers for community service, the last thing you’d look at are magazine-styled websites.

Document at least 4 good website examples by including the following information for each:

1. name of company/organization
2. what they do
3. the URL (link address)
4. 2 screenshots of EACH site:
   • one at a normal desktop view 1280 or higher width,
   • and one that is a mobile phone view of your choice (iPhone, Android, etc.).

STEP SIX

Use the following documentation template to record everything you researched: Phase-1 UI Documentation Template.ai. Save a completed PDF version of the flie and upload to this discussion board for the Project-4/Phase-1 grade.

Phase 2 : Website Modular UI Design

50% of Project-4

---

First, the Layout Requirements

To keep this relatively simple, we will design this site as a single-page scrolling website.

PAGE COMPONENTS

The page layout should include the following sections:

• Header
  1. Site ID : Company name and logo
  2. (Social media in header or footer)
  3. Navigation : (to major content sections below)
• Content area:
  1. Who we are (Mission/vision/philosophy statement)
  2. Team information (who works there). You can download these files to use if you want.
  3. Services
  4. Contact information
  5. OPTIONAL: Add a google map to your contact section.
  6. Section that uses merchandising for a purpose (support us, show your pride, support the cause, sign up to become a member and get a bag or shirt, get your gear – etc.)
• Footer
  1. Copyright
  2. (Social media in header or footer)

---

Developing the Design System

ONE – artboard

First, you will design a Desktop view of 1280 or higher in Adobe XD as your initial artboard.

TWO – create color assets

You will be required to stick to ONE of the color palettes that you developed for your mark in Project-3.

To get these colors, you will open your Illustrator file and copy your Pantone swatch vector objects to create those colors as RGB color assets in your XD file. When you copy them, you will make a “sticker sheet” layout in XD that will serve as a sort of style sheet area for common palettes, type, and artwork.

THREE – create symbol assets

Mark/Logo : Next, you will copy your final mark choice and paste into a new Illustrator file and save it as an SVG file. Be sure to first delete ALL unnecessary objects from the Layers panel in Illustrator, including guides, hidden objects, and duplicated objects that are redundant. Now you can drag that SVG into your layout to create a reusable symbol from it (or copy the icon and paste it into XD).

Pattern : Do the same for your pattern if you plan to use a pattern.

Merch : Do the same for your merchandising objects.

Icons : Pull any other similar icons that you might want to use into the file like this as well. You can make your own, or you can download Creative Commons icons at https://thenounproject.com/ . If you are so inclined, you can also do free tutorials on how to make icons efficiently at http://introtoicons.com/ (icon lessons are NOT required).

EXAMPLE STICKER SHEETS:

Sticker Sheet Example 1   ///   Sticker Sheet Example 2

---

Developing the Layout

Begin drawing the sections out on the artboard.

~ ~ ~

FOUR – header

Design the header. It should have a logo, brand/site name, tagline, and navigation.

FIVE – content sections and headings

Draw each section of the content. Create a title in the first, give it a text style, save the style as a Character Style Asset, and then copy/paste (OPTION+Drag, or ATL+Drag) the title into each section. This will allow you to change the heading color, size, and font for all of them at once by editing the Character Style associated with them.

SIX – allow artboard scrolling

Extend the artboard vertically to accommodate all sections.

SEVEN – adding text boxes

Add content to each section. Remember that if you draw a text box, you can drag a plain text file (.txt) on top of the text box to fill it with predefined content if you want.

EIGHT – icons, images, and design details

Consider embellishing sections with additional icons, call-to-action buttons, and images. Remember that some sections, like “Team Members,” require images. 

Don’t forget that you can add background images to sections, that you can add a blur box on top of images, that you can add gradients to objects, and that you can adjust transparency of objects.

Also remember that you can use repeating regions for grid elements that will be the same, such as featured items like article links or the Team Members section.

NINE – the footer

Lastly, add a footer with a copyright and up arrow. You can also add other information there if you wish.

EXAMPLE WEBPAGE UI LAYOUT:

Click to view larger.

---

Outputting PDFs and Videos to Turn In

You are required to turn your work into the discussion in two formats:

1. pdf of your exported artboard
2. ~2-3 second recording of your scrolling.

Upload both directly to the corresponding Canvas discussion board.

Example 1280px Web Interface Scrolling Videos:

Scrolling Only:

1280 Functional Prototypes:

Phase 3 : Responsive UI Development Prototype

30% of Project-4 Grade

---

Where to Start

You should first duplicate your Project-4.0 Adobe XD file to use as the foundation of P4.1. After opening the newly duplicated file, do the following:

ONE – create a mobile phone artboard

Make a new artboard based off of a mobile phone template available in XD.

TWO – adjust the artboard height

Drag the artboard out to be quite long. You will likely need to continually adjust this as you add more content.

THREE – design the mobile responsive view

Begin copying items over from the Desktop layout and rescaling and rearranging as necessary to gracefully cascade to a more usable format on a smaller device. It is very likely that you will need to adjust the scale of typography and images in order for them to fit.

THE MENU : (Required) You will need to make the menu into a collapsable button to maximize real estate on a mobile phone screen. You can use a “hamburger menu” (3 stacked horizontal lines), a button that says “MENU”, or a combination of those.

***BE AWARE that if you start changing repeating regions without ungrouping them in the new layout, you will likely make accidental changes that cascade into the original Desktop view. To ungroup, right-click and select that option.

Also be aware that you will need to re-import symbols if you need to change them without changing every instance of it.

FOUR – design the nav menu overlay screen 

Once you have completed the mobile phone view, duplicate that artboard or create an empty identically-sized phone artboard. This third artboard will serve to show how the navigational menu list will slide in from a side or top. Design this nevigational list as a full-screen menu that also has the the logo located at the top, along with a button to close the menu (it can be a graphic “X” symbol, an arrow, or the word CLOSE).

FIVE – make the prototype

After making the menu screen, you can click the “Prototype” XD tab. This will allow you to select a button from one screen and drag the linking tool line to the screen where you want the button to take us. So do the following:

On the normal phone web layout screen, select the menu button, and drag the link line to the navigational list overlay screen layout you created. Select the correct behavior from the resulting popup transition menu. For instance, if your menu button was on the right side of the screen and you want the behavior of the navigational list to slide in from that side, you would select the Transition type to be “Push Left”.

Next, on the navigational menu overlay screen, click the Close button, and drag its linking line back to the original mobile screen layout. Select the opposite of the transition on the button that you chose in the last button option. So using the case above, this Close button would use the transition of “Push Right” to close the navigational menu list.

---

What to Turn In and When

After you complete the last process, export the mobile screens to a PDF, record a video of you using your prototype, and upload all pdfs and videos to this discussion board BEFORE our final critique time.

Example Responsive Web (Mobile) UI Prototype Videos: