Folio Style Guide by Kaitlin R

folio

Branding Book KAITLIN RATHWELL - SAE 1013

Table of Contents

Basic Branding

Website Design

Technical

Introduction 1 Colors 3 Logo 5 Word Mark 7 Symbol mark 9 Mascot 11 Colorways 15 Do’s 17 Dont’s 19 Typography 21 Application 25

Moodboard Feature List Wireframes Sitemap

Cost & Timeplan 43 Database 45 User Flow 47

35 36 37 41

Introduction Folio is a web application which allows users to easily create their own online portfolio websites. The idea is to get users up and running as quickly as possible with absolutely no coding required. We provide a wide selection of beautiful open-source single page templates to choose from. The user must simply select a design and add projects - the rest is taken care of by Folio. This is done using GitHub Pages, a free hosting service from GitHub. Users can simply log in to Folio using their existing GitHub accounts, no registration required. Once logged in, users can create a portfolio and add projects to it via our simple content management system. With one click their new portfolio will be deployed to GitHub and go live within minutes! Not only is Folio completely free but all the templates are open source and available for download on GitHub. Users have the ability to suggest improvements for existing templates or submit their own. Our vision is to be the go-to place for GitHub users wanting a portfolio website. We want our company to inspire other startups to give back more to the open source community.

Target Group

Our design strategy

WHO ARE FOLIO USERS?

WHAT ARE WE ALL ABOUT?

Since Folio builds on GitHub, the open source programming community, we are naturally targeting front-end web developers, web designers or programmers looking to get an awesome portfolio set up quickly. We are targeting people who have a technical background and appreciate open source projects.

We want to innovate on traditional portfolio creation, making it simple and fun. With this in mind we have chosen a modern, friendly design. We want to make a lasting impression on users, so that our brand awareness spreads through word of mouth.

Our Colors These are the brand colors that define Folio. They are meant to express a modern, fun and clean feel. The vertical bars represent the amount of color that should be generally used when designing. Each color has the CMYK amounts and equivalant web equals. PRIMARY COLORS

White is used to reflect a clean, minimal and professional look, while still not distracting from the content. White is generally used for backgrounds and contrast. Cherry signifies our creative, bold and fun side. With this color we are targeting the younger audience and adding a layer of depth that helps leave a lasting impression. Cherry should be used sparingly and in places to draw attention and emphasize things. Charcoal communicates to the more male demographic and represents the modern, technological side of Folio. This color is the preferred color for our word mark, symbol mark, header and sub headers.

White #e6e6e6 RGB: 230, 230, 230 CMYK: 12, 8, 9, 0

Cherry #f50840 RGB: 245, 8, 64 CMYK: 0, 96, 64, 0

SECONDARY COLORS

Dark Gray, Gray, Light Gray - Gray stems from the Charcoal color. These shades are to be used to enhance visual attributes and divide spaces. The Dark Gray should be used for body text.

Charcoal #464646 RGB: 70,70,70 CMYK: 64,54,52,52

Dark Gray #737373 RGB: 115, 115, 115 CMYK: 64,54,52,52

Gray #e6e6e6 RGB: 230, 230, 230 CMYK: 12, 8, 9, 0

Light Gray #f0f0f0 RGB: 240, 240, 240 CMYK: 7, 5, 6, 0

Logo OUR LOGO IS THE CENTER OF OUR BRAND

It is very important to us. Please treat it with respect and read these guidelines carefully so that you know how to use it properly. We have 3 logo types - word mark, symbol mark and our lovable robot mascot.

THERE ARE A FEW GENERAL RULES THAT SHOULD BE NOTED:

1 All logos remain the same for both web and print designs. 2 Never stray from the guidelines or abuse our logos. 3 Make sure to give enough space for each logo and take care with placement and positioning. 4 Never display the logos so small that they are not clearly visible and distinguishable.

The Word Mark THE HEART OF OUR BRAND IDENTITY

SIZING

Represented by a simple lowercase typeface called Raleway in Heavy weight the word mark is bold, memorable and timeless. The word mark is flexible enough to be used stand-alone or combined with the symbol mark or mascot for both web and print materials.

To make sure our logo is always clear and crisp never display the word mark smaller than 16px for web or 12pt for print. It should never be displayed smaller than what is shown below.

i i

The word mark should never be placed in busy, cluttered areas to protect its integrity and enhance the visual impression. As a general rule of thumb you can use the „i“ thickness in the logo as a guide to make sure you have a minimum white space around it.

i i ifolio Minimum whitespace rule: Thickness of the logo „i“

folio 16px 12pt

CONFIGURATIONS

The wordmark may be combined with the symbol mark in 2 ways. Either Horizonal or Vertical. Although both the symbol mark and word mark can be used stand alone, we prefer that they are displayed together as much as possible.

folio

The Symbol Mark

25% of the height for padding

BASICS

The symbol mark is a simple flat representation of our “Foli“ mascot’s head. It should be generally combined with the word mark . However, it may be used stand alone normally for print materials. It is important to give the symbol plenty of spacing. As a guide, use 25% of the height as a measurment for the minimum white space.

25%

25% of the height for padding

When vertically combined with the word mark make sure the word folio does not reach past the guide shown to the right.

25%

folio

SIZING GUIDLINES

A minimum size rule of 16px or 5mm is set for the symbol mark to keep detail. However there are no set guidlines for the maximum print size of the symbol mark. When designing print material the symbol may be used in large and creative ways so long as it is still clearly distinguishable.

When horizontally positioned with the word mark make sure it lines up with the bottom of the cheek of the robot as seen to the right.

25% of the height for padding

25%

FAVICON

Minimum size 16px by 16px placed on a dark background.

Our Maskot BEEP BLURP BRRRRZP BEEP

Our maskot is called “Foli”. On one hand he is used to represent how modern and fun we are. On the other hand he is symetrical and carefully designed to show the care and love put into the product. He is a huge part of the brand and should never be abused or misused. Foli has two versions - colored and outlined. The colored version can be used for both print materials and web. The outline should only be used for print material. Like our other logos it’s important to give Foli enough room to breathe. As a guideline, use Foli’s antenna as a rule of thumb. Also, never display Foli smaller than shown below! He should always be clear and crisp.

35 mm 132px

30 mm 113 px

FOLIâ&#x20AC;&#x2DC;S PERSONALITY

Foli is a quirky, friendly robot and has many different looks. He can be dressed up, styled and animate. Here are a couple of examples.

FOLI FOR PRINT

As you can see Foliâ&#x20AC;&#x2122;s outlined version has no maximum size restrictions. However it should never be displayed so small that the lines blur together. The outlined version should only be used for print materials.

Logo Colorways NEGATIVE AND GREY VERSIONS

To the right you can see our negative black and white examples along with greyscale versions. COLOR RULES

The word mark and symbol mark should be used the same when it comes to color. The basic charcoal gray should be used on any white or light gray backgrounds and pictures. Dark backgrounds should be used with white logos, this includes the primary cherry colored backgrounds. As an exception the word and symbol mark can be cherry red on white backgrounds. But if in doubt stick to the standard charcoal grey as much as possible. By following these basic rules you will ensure that our logo colors stay true to our brand. Never use any other colors or gradients of any type.

Logo Doâ&#x20AC;&#x2122;s 1 Do use a combination of our word mark and symbol mark either horizonally or vertically positioned. Make sure to refer to each markâ&#x20AC;&#x2122;s section to confirm sizing. 2 Do use the symbol mark for print materials such as business cards, paper, envelopes, t-shirts etc. Make sure you use the proper white space. 3 Again, do use the combination of word + symbol. Especially for stickers, tshirts and other merchandise. 4 Foli can be used alongside our word mark. Make sure proper whitespace is provided. 5 As great as Foli looks with our word mark he prefers to stand alone. Never change his colors or stretch or skew Foli. 6 Folis outline is great for print materials and can be positioned in artistic and creative ways. Think big and bold.



folio



folio

Logo Dont’s

folio 



folio



1 Never place any of Folio’s logos on busy, colorful backgrounds! If a background is used it must be grayscale and not hinder the logo’s visibility in any way. 2 Never stretch or skew any of the logos! 3 Always use the standard branding colors and never apply outlines. 4 Foli should never be placed upside down or on his side. He doesn’t like that! 5 Do not apply color or style overlays to Foli. 6 Foli’s outline should always have a transparent fill color!

Typography HEADER AND BODY TEXT

Source Sans Pro is our primary font used for headers and body text in both web and print. This open source google font represents our brand well. Thin, clean and modern. It is nicely paired with Monteserrat. Only use colors suggested in our color guide and never add drop shadows or outlines.

Aa 21

Source Sans Pro A B C D E G H I J K L M N O P R S T U V X Y a b c d e f g h j k l m n o q r s t u v w x y z 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( ) _ + = ?

SUBHEADER

Montserrat is another sans-serif font and should be used for subheaders, menu items, buttons etc. It should always be all caps and bold. The prefered color is our secondary Dark Gray color.

MONTSERRAT

A B C D E G H I J K L M N O P R S T U V X Y a b c d e f g h j k l m n o q r s t u v w x y z 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( ) _ + = ?

EXAMPLE TEXT

Here are some examples of how to properly use our fonts, with different background colors to give you a feel of how it looks.

38px - 60px 28pt - 45pt 14px 11pt 16px 12pt

HEADER

Source Sans Pro Extra Light SUBHEADER

Montserrat Bold All-Caps BODY TEXT

Source Sans Pro Light

The Quick Brown Fox JUMPED OVER THE LAZY DOG

Eum ludus clita saepe eu, voluptua consetetur voluptatibus at mel. Quo ut malis vivendo delicatissimi, idque diceret dissentias ne est, equidem.

The Quick Brown Fox

JUMPED OVER THE LAZY DOG

Eum ludus clita saepe eu, voluptua consetetur voluptatibus at mel. Quo ut malis vivendo delicatissimi, idque diceret dissentias ne est, equidem

Application

Mood Board MENU

BUTTON

Welcome I AM A PARAGRAH SUBHEADER

BUTTON

  

Modern

CLEAN

BUTTON

Eum ludus clita saepe eu, voluptua consetetur voluptatibus at mel. Quo ut malis vivendo delicatissimi, idque diceret dissentias ne est, equidem mediocrem ad usu. Consul phaedrum deseruisse est cu. Ei his fierent mentitum quaestio, nominati volutpat ad his.

fun techy

The Website FEATURES

1 Responsive, open-source portfolio templates. 2 Open-Source template library available on GitHub 3 Simple login using GitHub, no Folio registration required. 4 Content management system where users can create and manage their portfolios. 5 Advanced users can edit their portfolio directly from GitHub and still use our CMS afterwards.

MOBILE DESIGN

The entire website including the CMS will be responsive, implemented using Bootstrap and media-queries. Functionality will be not be restricted in comparison to the desktop version. Button, input and text sizes will be optimized. Animations, parallax or any other costly effects will be removed for mobile to improve performance.

Frontend Wireframes x

desktop

HOME PAGE

The homepage consists of 4 main sections and 3 menu links. The menu links are Learn, Contribute and Template Gallery. The mobile version contains all the same content but with smaller images and a nicer structure for small screens.

Learn

Contribute

Template Gallery

mobile

Welcome to Folio

1 Get Started

Get Started

SECTION 1

Section one is the landing section and explains what Folio is and how it works. The get started button takes the user to the template gallery.

Awesome Templates

View Library

SECTION 2

Section two explains in more detail what Folio is and how it works. Each section contains a large call to action button. SECTION 3

Section three is a mini gallery showing the top 4 user portfolios. Each image links to that portfolios website. SECTION 4

Section four contains Terms Of Use, FAQ, Support, Sitemap and social media links.

Awesome Templates

View Library

GitHub Pages

Top Portfolios

About

GitHub Pages

desktop Learn

1 TEMPLATE GALLERY

The gallery page is fairly simple, with a gallery of images that infinitely scroll. On hover the image reveals the template name. The user can filter the displayed templates using the view all, newest or popular options. Again, the mobile version will contain all the same info, links, buttons but optimized for smaller screens. This is the same for the Template View Page below.

Contribute

Template Gallery

Template Gallery Newest

Minimal

Popular

desktop Learn

Contribute

2 TEMPLATE VIEW

Again the template view is very simple and clean. The user has a nice large preview image of the theme and details about it.

Template Gallery

mobile

Template Gallery

mobile

<- Back to gallery

Theme Name

Use this template

Theme Name

About

Use this template

About

Backend Wireframes FOLIO‘S CONTENT MANAGEMENT SYSTEM

There are 3 main pages in the backend. The Overview page, the Projects page and the Add/Edit projects page. A link to each page is always available so the user can move effortlessly between the three. 1 THE OVERVIEW PAGE

This page contains a large preview image of their current template. Each time a user adds or edits a project the preview is updated. Beside the preview are editable details about the user’s portfolio including the portfolio title, username, email, url, amount of posts, version, color and social media links. If the user has added/edited posts or updated any portfolio details the „Deploy my Portfolio“ button will be activated from this page. 2 THE PROJECTS PAGE

This page shows a list of all the current projects that the user has added and associated details. From here the user can add new projects, delete current ones or edits/reorganize them. 3 ADD/EDIT PROJECTS

This page is fairly simple, made up of input and text boxes that allow the user to add or edit their projects.

desktop Overview

Details

Projects

Templates

mobile

Logout

Welcome to Folioâ&#x20AC;&#x2DC;s CMS

Deploy!

About

desktop

About

Overview

Details

Projects

Templates

mobile

Logout

Add new project

3 Deploy! Deploy!

About

desktop Overview

Details

Projects

Current Projects

Templates

mobile

About

Logout

Current Projects

New +

2 About About

Sitemap x

desktop

HOME desktop

GITHUB LOGIN

desktop

BACKEND HOME CONTRIBUTE

TEMPLATE GALLERY

desktop

VIEW PROJECTS

PROJECTS

desktop

ADD PROJECT

TEMPLATE GALLERY

desktop

x desktop

TEMPLATE

desktop

GITHUB LOGIN

desktop

EDIT PROJECT

desktop

FOOTER

FAQ

TERMS OF SRVICE

desktop

FAQ

SUPPORT

desktop

SUPPORT

SITEMAP

desktop

SITEMAP

Cost and Time planning

MARCH

Concept Design Front-End

APRIL

MAY

JUNE

4 Weeks 5 Weeks 6 Weeks 10 Weeks

Back-End

6 Weeks

Testing Management

Continuous March 25th - August 9th

JULY

AUGUST

SEPTEMBER

TIME

Concept

HOURS

HOURLY RATE

COST

March 17 - April 14

$100

$6000

March 28 - May 5

$100

$7000

April 15 - June 16

$100

$7000

May 15 - Sept 8

$100

$8000

May 25 - Sept 8

$100

$4000

Research/Requirements Gathering Project Planning Sitemap Wireframes

Design Branding/CI Design Webdesign

Front-End HTML/CSS/JS Mobile/Responsive SEO

Back-End PHP MVC SYSTEM Database setup Server Setup

Testing Testing system Bugfixes Cross-Browser Testing

Total: $32,000.00

Database Structure The database structure is fairly simple and straightforward with only three tables. TEMPLATES TABLE

The templates table is used to store all of the template library’s templates info. REPOSITORIES TABLE

When a user creates a portfolio, a repository entry with that user’s user_id is added. The template_id connects that table to it’s corresponding Template row. The user‘s repository version is used to check if they are using an old version. The color column specifies which color version of that template they are using. The data column is used to save the users project data in json format. The sha column is used to create commits to that users GitHub repository and the path is the GitHub Pages path. USERS TABLE

Fairly standard except we do not store any user passwords or tokens in the database for increased security.



TEMPLATES

 template_id



REPOSITORIES

USERS

INT UNIQUE

 id

name

VARCHAR(50)



user_id

INT UNIQUE

github_id

INT

version

INT

 template_id

INT UNIQUE

username

VARCHAR(80)

description

TEXT

version

INT

nickname

VARCHAR(50)

preview_img

TEXT

color

VARCHAR(25)

VARCHAR(100)

created_at

TIMESTAMP

data

TEXT

avatar

TEXT

updated_at

TIMESTAMP

sha

INT

advanced_user

INT

path

VARCHAR(100)

created_at

TIMESTAMP

created_at

TIMESTAMP

updated_at

TIMESTAMP

updated_at

TIMESTAMP

INT UNIQUE

 user_id

INT UNIQUE

Flow Charts Redirected to Backend Yes

Home

Is the user logged in?

Returns To Folio - New User Created

Redirected to Github Authorization Page

Redirected To Backend

Yes

No User Clicks Login To Github

New user?

Redirected to Backend

Backend

Yes

No Is the user logged into their GitHub account?

Redirected to Github Login Page

Continues to Backend

The user arrives at Folio’s homepage. If the user is logged in they are redirected to the backend CMS. If the user is not logged in they click the “Login with GitHub” button. A request is sent to GitHub to check if the user has already authenticated Folio. If the user is already authenticated and logged into their GitHub account, they are automatically redirected to the backend with no stops. However, if they are a new user and have not yet authenticaed Folio through GitHub they must first do so. After they have authenticated Folio, GitHub redirects them back to the Folio website with user details. A new account is then created for that user and they are forwarded on to the backend. The user must only authenticate Folio on GitHub once. Afterwards, the user must only re-login if they are logged out of GitHub.

TEMPLATE SELECTION FLOW FOR NEW USERS

The user arrives on Folio‘s hompage. From here they can either login or go to the template gallery and chose a template. If they decide to login first the server will check to see if they have a template selected and if not they will receive a prompt suggesting they go to the template gallery. Since they cannot add projects or deploy a portfolio without a template design they will then go to the template gallery. They select a design and click “use this design”. Since the user has already logged in they will simply be returned to the backend overview section where they will see a preview of their newly selected template and continue from there. However, if the user decides to select a template without first logging in, they must then login once they‘ve clicked “use this design”. Then they will land on the overview page showing a preview of the template that they selected.

Continue to Backend Overview Yes

User Clicks Login

Backend

Does the user have a Template Selected?

No Home

User Clicks Template Gallery

Suggest User Select Template

Selects A Template

Is The User Logged In?

Yes

Continue to Backend

Send Git Pull Request Yes

Backend

Render Preview & Prepare Data

Overview

Yes

Is user an Advanced User?

No Retrieve User Repo Info From Databank

Is Template Version UpToDate?

Update Version

BACKEND SERVER FLOW FOR EXISTING USERS

Once the user has logged in, the server checks the database to see if that user is an â&#x20AC;&#x153;Advanced Userâ&#x20AC;?. If the user is an advanced user, the server must then retreive their custom data from GitHub. The server makes a pull request and verifies the users data. If the data is ok it renders a preview of their template and posts the template details. From there the user can add/edit projects and deploy their portfolio once finished. If the user is not an advanced user their portfolio data is simply retrieved from the database. With that data, a preview is rendered and all the template details are displayed on the overview page.