CONTINUE Scrolling to view Proposal

C
O
L
O
R


CREATIVE
PROPOSAL
C
O
L
O
R

Adding a touch of Color to ColorCreative

OCTANE HOUSE is a creative marketing agency that has been serving the digital landscape across multiple verticals for just under a decade.

We embrace the forever evolving landscape of technology and offer a fresh taste of innovation and filter it through our seasoned lens of  media & tech. Offering creative solutions to complex problems.

OBJECTIVES
OBJECTIVES
01
Objective: Grading Dashboard

Grading Dashboard

Grading Dashboard will give volunteers and staff the ability to log in create accounts and have their dashboards auto-populate with qualified applications. The ability to filter apps based on discipline and other tags, and go back and adjust grades before deadlines if needed. The dashboard will showcase how many applications you’ve reviewed and the grade given. The capability of hiding confidential information of applicants for the first 2 rounds of the review process for privacy and fairness. The dashboard will have tier access so only users with certain credentials will have access to “full view”. The dashboard will have a private leaderboard feed updating in real-time based on cumulative scoring.

02
Objective: FYP Program Dashboard

FYP Program Dashboard

The FYP program portal will give cohort and mentors lifetime access to program details and resources even after graduating. This portal will serve as an online community where everyone will be able to view a Master Calendar that a program director can seamlessly update and edit, program news, upcoming events, personal profile pages with cohort/mentors prior work, awards, bio, etc. The cohort will have the ability to submit questions to a bulletin board that can later be answered and serves as a future resource for other cohort members.

03
Objective: Front facing Website + App Submission

Front facing Website + App Submission

Design and develop a centralized website under Color Creative to host the entire FYP program portal, grading dashboard hub for volunteers and staff, and application submission intake.
The main website will serve as the location where individuals can learn more about the program, apply, and view the FYP brands inception and journey.

Impress cohort, mentors & more

on their first visit.

How we carry ourselves and conduct our lives on a day-to-day says a lot about us and how people interact with us. Same goes for our digital footprint.
Your online presence today means more than it ever has and this could make the difference in attracting talent. We encourage clients to show their story vs telling it. Without reading a single word on the screen we want visitors to say "WOW" and be highly impressed.
Color creative, being a company that aids in educating creators in professional development ought to have a hub where visitors can feel impact see how minority talent is represent in the most glamorous way possible.
‍

Experiences⬇

that

Stand out

Where function

meets

design.

We've engineered enterprise sites with global reach.
Collaborated with the industries most talented.

The first & last development team you'll need

We get it right the right the first time so you don't have to pay the price down the line... 🥲

Scale the brand.
Scale the business.
Scale the device!

Majority of web traffic comes from mobile devices, yet, many brands fail to put their customers first in building a friendly user interface. We value the mobile development because it matters!
Getting it right the right the first time so you don't have to pay the price down the line... 🥲

Creating an online Ecommerce store is a great way to build brand and engage

it's all

in

the app

The first & last development team you'll need

We get it right the right the first time so you don't have to pay the price down the line... 🥲

We'll help you see it through 👌🏾

The foundation and structure of the FYPP site is quite complex which is why we develop keeping you in mind. Commonly, companies will build out extensive web programs and online systems leaving clients lost and unable to make basic edits and update their sites. We build the sites that empower our client's to take the wheel.
This site will have an extensive backend to sustain and reuse year after year. We'll build out a seamless, user-friendly CMS dashboard for anyone on your team to easily edit and manage the site. As a bonus, at the end of the project, we’ll create a screen recorded “how to”  walkthrough video that the Color Creative team can use as a resource. 

Accessing the Editor
Multi-user collaboration
The Tool Bar
On-page editing
Replacing images
Editing buttons & Links
CMS-Creating and managing Content
Managing page settings
Viewing and publishing changes
Ooops I made a mistake
✍️ Simplifying the complexities so your team can focus on what matters!
⬇EXAMPLE⬇ *
*Don't worry we'll create a walkthrough video because who wants to read the boring stuff 😏

Access the Editor from the live site

You can access the Editor from your website by adding /?edit to the end of your website URL in the browser address bar.

‍example: yourwebsite.com/?edit
‍
You will be prompted to login with your user name and password.
‍
When you return to the site later, you may see the “Edit site” button in the lower right corner, which you can click to hop into Editor mode.

webflow editor login

Access the Editor through Webflow’s interface

If your are in the Webflow dashboard you can access the editor from the Project menu in the dashboard. Click the ellipses (...) at the bottom-right corner of your project thumbnail and choose Editor in the menu.

webflow editor from dashboard

Remember to stay out of the designer as you can break the website by trying to edit in this work mode. If you accidentally end up in the Designer mode you can access the editor in the menu in the Designer.

Look for the "W" in the upper left corner and click the menu and you can find the Editor button.

webflow editor access from designer

You can also access the Editor in the top toolbar in the Project settings

webflow editor access from project settings

Switch between Editor mode and Live site mode

When you open the Editor, you'll be able to explore the site in preview mode or "live site" mode. To switch to Edit mode, click the "Edit site" button at the lower right of the page.Go "Back to live site" when you want to see the site in preview mode.
‍
Let your Collaborators know that they will need to set their browser to accept cookies from all third parties to use the Editor — otherwise, they may see an error message when trying to log in to the Editor.

✍️

Multi-user collaboration

The Editor allows multiple people to edit static and dynamic content at the same time.

Only one person can work in the Designer at the same time but multiple people can work in the Editor at the same time. If two people are editing the same content at the same time, the last edits "win," so you'll still want to coordinate editing times with your teammates.

If you or your collaborators see an error message when trying to log into the Editor, try one of the following fixes:

Check that your browser accepts cookies, and if not, turn that on

Log out of the Editor, clear your browser's cache, then log back in

‍Log in to the Editor via an incognito-mode window
‍
‍Try logging in via a different browser

Try sending a new collaborator invitation to your content Editor and ask them to use an incognito window to create their new account

If none of those work, please contact support

✍️

Understanding the Editor Toolbar

When you access the Editor, you’ll see your live website with the Editor toolbar (the gray bar) collapsed at the bottom of your screen. Through this toolbar, you can access the various Editor panels to manage page settings, dynamic content or collections, forms, and your Editor account. You can also see and publish the changes you make through the Editor.

webflow editor toolbar at bottom of pagephoto credit: webflow university

The Editor toolbar features the following tabs and icons:

Menu - Use this menu to go to the Dashboard, your Project Settings, or the Designer. This button features the Webflow logo. You can replace this with your own logo, or your client's, on our Pro plan.

Pages - opens the Pages Panel, which lists your site’s static pages and dynamic Collection pages. From here, you can browse for a page, click to view the live page and manage the settings of any page.

Collections - opens the Collections Panel, which lists all your Collections. Clicking on a Collection opens a new tab in the toolbar, which opens the Collection items’ panel listing of all the items in that Collection. Here, you can edit any item or create new ones. See Creating and Managing Content-CMS for more info.

Forms - opens the Forms Panel where you can see and download form submissions made on the site.

Account Settings (gear icon) - opens the Account Settings Panel where you can edit your Collaborator account info and upload a profile image.

Help & Support (life preserver icon) - opens the Help and Support Panel, where you can find answers to a few common questions about using the Editor.

Log out (half circle/arrow icon) - logs you out of the Editor after confirmation.

Saving/Saved - all changes are saved automatically in the Editor. The Saving... and Saved status at the bottom left show this.

Changelog - this shows the number of unpublished changes next to the publish button at the bottom left. Clicking the changelog reveals a list of items and pages with unpublished changes, and you can see which Collaborator made them.

Back to live site (button) — Switches from Editor mode to Live-site mode, which allows you to view your site as your site visitors will see it.

Publish (button) - allows you to publish all the changes you make when in the Editor. Remember no changes will go live until you hit the publish button.

✍️

You Can Edit Right on the Page!!!

Editing is so easy and intuitive with the Editor.  Hover over various elements and if you see a pencil icon then you can click on it and edit the text right there!

When hovering over editable text elements, you’ll see a light-gray outline around the text element and a pencil icon in the upper right. You can edit the text by clicking into the box.
‍
Remember you have to publish your site for your changes to go live.

webflow editor edit text on hover with pencil iconphoto credit: webflow university
webflow editor edit text on hover with pencil icon before and afterphoto credit: webflow university

Formatting Text

You can also format words or phrases with bold, italic, add a link or remove formatting by selecting them and choosing the formatting from the floating toolbar that appears.

webflow editor edit text formatting by highlighting textphoto credit: webflow university

For Rich Text Elements-you might see in blog or long post

For Rich text elements, you can do more: add media, photos, create lists, style, and format your text further.

webflow editor edit rich text by highlight text and formatting photo credit: webflow university
✍️

Replacing Images is Easy

You can also replace images right on the site. Just hover your cursor over the image you want to replace, then click the picture icon. This will allow you to select and upload a new image from your computer.

webflow editor edit images on hover with picture icon clickphoto credit: webflow university
✍️

You can edit buttons

To edit a button, hover your cursor over the button and click on the Settings icon that appears in the upper right.

webflow editor edit button on hover gear iconphoto credit: webflow university

You’ll see two options:
‍Edit link settings - lets you update the link of the button, you can link it to a website page, an external link, email or phone number
‍Edit text - enables you to change the button text

webflow editor edit button on hover gear icon-link or textphoto credit: webflow university
✍️

What is a CMS?

CMS stands for content management system, and as the name suggests, it's a system for managing the content of your website. It can be a collection of blog posts, team members, job postings—any you want.

Static Pages: these are pages built outside of your Collections. These may include your home, about, contact, etc.

‍Collection Pages: these are pages generated from your collections and it can be a collection of blog posts, team members, job postings—any you want.
‍
Webflow's "visual" content management system allows "non-technical" people maintain their websites and publish new content within a consistent design.

Creating and managing dynamic content

If you have Collections in your project, you can access them in the Editor through the Collections tab. The Collections Panel lists all your collections.

Clicking on a collection opens a new tab titled with the name of the collection. This tab contains all Collection items within that Collection.

This is where you could be more specific about your client's collections that are on the site. I would use more specific photos or even make a video.

webflow editor edit CMS, click collectionphoto credit: webflow university

Creating and managing dynamic content

You can edit existing items by clicking on them or creating new items by clicking the + New button and filling out the item’s various fields that was setup by your developer.

webflow editor edit CMS, click new post buttonphoto credit: webflow university

When you’re done entering content or updating fields, you can choose to:
‍
Create a new item or save an existing item. It will be staged to publish and go live on your site next time you publish it.
‍
‍Publish your item right away (without waiting for the next site-wide publish to take place).
‍
‍Save as Draft if you aren’t quite ready for the item to go on the live site.

‍Cancel to discard changes.

webflow editor edit CMS, click createphoto credit: webflow university

You can view the page for that the collection item by clicking the icon to the right of the item name. This collapses the panels to show you the page for the item you’re currently viewing right in the browser. If you’d like, you can edit it there, instead of in the panel.

webflow editor edit CMS, view collection pagephoto credit: webflow university

To go back to the Collection item's list, click the Back (←) button.

webflow editor edit CMS, leave collection pagephoto credit: webflow university

Managing content

In the Collection Panel, you can see all your Collection items and their statuses. You can delete, archive, or change the status of several items all at the same time.

To do that:
Click the Select... button
Select the items you want to manage
Choose the action you want from the top toolbar

webflow editor edit CMS, manage content click selectphoto credit: webflow university

To close the Collection tab, click the close (x) button in the top right of the tab.

webflow editor edit CMS, close collection tabphoto credit: webflow university
✍️

Managing Page Settings

From within the Pages Panel in the Editor, you can manage vital page settings like SEO meta title and description. You can also manage page password protection settings for static pages.

To access the settings of a page:
Open the Pages tab in the Editor panel
Hover your cursor over a page in the list
Click on the Settings button that appears

page settings hover over list for gear icon click to editphoto credit: webflow university

SEO Settings

SEO stands for “search engine optimization.” It’s the practice of building and improving websites in order to improve their chances of being found through search engines like Google, Bing, etc.In each page’s settings, you can create and edit the following page-specific SEO settings:

‍Meta title: A page’s title plays a very important role in its visibility and performance in search engines, both because it a) tells search engines what the page is about and b) is what search engine users will click on to reach your site. Be sure to include the types of words people use to describe your business in the title. Ideally, a page’s title should be about 55 to 60 characters long.

Example: Let's say you have a pilates studio in Santa Cruz, the title of the homepage could be “Move Pilates | Santa Cruz's Best Pilates Studio”

Meta description: The description allows you to add a little more detail about your page (about 150 characters of it). It’s important for search, but not nearly as important as the title.
The Search Result Preview sections shows you what the content you’ve entered will look like on a Google search results page. If any of your text gets cut off in the preview, you’ll want to trim your text to fit.

This is usually set up by the developer but you can change it to reflect your business.

edit SEO info in page settingsphoto credit: webflow university

Open Graph (OG) settings

Open Graph settings are very similar to SEO settings, except that they’re used by social networks like Facebook, Twitter, and LinkedIn.
‍
In most cases, you can just tick the checkbox to use the same content as your SEO title and description. But you can customize it.

By setting the Open Graph settings of your pages, you can specify which information from your pages you want to show when someone shares your page.

open graph editing with image and SEO descriptionphoto credit: webflow university

You can also search for pages by name using the search bar.

search pages in webflow editorphoto credit: webflow university
✍️

Viewing and publishing changes

After making all these changes, you will want to view them, make sure they're saved and ready to be published before clicking Publish.

The changes made in the Editor won’t be made on the live site until you either publish the edited item(s) individually or press the Publish button to publish all staged changes. You will need to confirm that you want to publish all changes before the site is actually published. The green Published button will confirm this.

publish confirmation in webflow editorphoto credit: webflow university

Viewing changes on the live site

While working in the Editor, the Editor panel covers most of your website. To collapse the Editor panel and view your website, click the View Site button at the top.

click view site to see live site in webflow editorphoto credit: webflow university
✍️

I screwed up the website now what?

From the bottom menu you can go to the project settings and then access the backups and restore the site to an earlier published version.

click project settings in menu to access backups

Click on restore on the version of the site you want it to return to.

click restore in backups to change to previous version
Color Creative. All Rights Reserved. 2022
Try "Signing in"
to Dash by clicking Apple logo
01
02
Black Pearl
All the brink of excellence.
03
Perpetuum mobile
Forward to the past.
04
Greed
Trying to know the future is also greed.
05
Innocence
Look at the innocence.
Look at the beauty in it.
06
Infinity
Not just eternity, but infinity.
WHATS NEXT?

FYP Roadmap

SEPTEMBER 26th - DECEMBER 5th 2022
Month
Today
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
🎨
UI/UX Design
Design Dashboards + Website
🎉
Build Application UI
DESIGN
🗝️
Email & Password Login
💙
Logins Dashboard
🔐
Content Gating
🗂️
SSO via OpenID Connect
Develop
🧢
Deep Form Integrations
🗺️
Mapping and Routing User IDs
💰
Authenticating Security
Merge
🏗️
Connect your favorite tools + Creating Logic Triggers
🛠️
Frontend & Backend APIs
↗️
Migrate to React Frontend
📤
Data Export
🚀
Go Live
🧪
Validate Feedback
💪
Make Improvements
📈
Scale the Program
PROGRAM
Design UI/UX forGrading Dashboards, Program Portal & Website
Develop backend systems to support
applications
Api Integrations
Find your people program is ready to launch for testing! 😎

Investment Schedule

Initial 50% upon first week of start date
Once site is complete we request final 50% 

ONLINE EXPANSION

FYP PROGRAM

Basic

$96,100
What’s included
  • Full Scope Site Build
  • CMS build with user-friendly editor access
  • Deep form software integrations
  • Multiple customized user login portals with access to lifetime gateways.
EXAMPLES
Popular

ELITE

$115,000
What’s included
  • Full Scope Site Build
  • CMS build with user-friendly editor access
  • Deep form software integrations
  • Multiple customized user login portals with access to lifetime gateways.
  • Fully developed Ecommerce Store built for future Merch sales and online digital release

    Click to view Ecommerce example

  • Branding:
    Full Brand kit with Logo files, Brand guide for press, Font files, and Color Palette
EXAMPLES

HALL OF FAME

$150,000
What’s included
  • Full Scope Site Build
  • CMS build with user-friendly editor access
  • Deep form software integrations
  • Multiple customized user login portals with access to lifetime gateways.
  • Fully developed Ecommerce Store built for future Merch sales and online digital releases

    Click to view Ecommerce example

  • Next-level interactive storytelling website that gives visitors the 'WOW' Experience
EXAMPLES

DISCOVER

Press & Hold Floating Project Bubble to Open

Overview

6-to-8 month scope boiled down to 2 months

Design and develop a centralized website under Color Creative to host the entire FYP program portal, grading dashboard hub for volunteers and staff, and application submission intake.

Click # to expand objective

01

GRADING DASHBOARD

‍Grading Dashboard with  Multi-level clearance for staff

02

PROGRAM DASHBOARD

FYP Program Dashboard for Mentors and Cohort 

03

APPLICATION WEBSITE

Public Website for applicants to learn about FYPP & Hub to Submit applications

INTRO

VISION

ObJECTIVE

Link

TIMELINE

ROADMAP

INVESTMENT

WORK

Adding a touch of Color to ColorCreative

DMD Agency is a creative consulting and development company that has been serving the digital landscape across multiple verticals.
By embodying the age mindset of technology and funneling it through a seasoned & innovative lens we are accelerating the media landscape as a whole.
We are a team multi-hyphenates utilizing our mixed backgrounds of taste, experience, and knowledge to identify gaps between culture & tech to offer unique solutions to complex problems.

‍

FIND YOUR PEOPLE
Buy my tickets
01
Virtual attendance

Join virtually from anywhere, really.

Network with other pro designers from the comfort of your own home. You don't even have to put on pants if you don't want to (but we strongly suggest that you do).

02
Live workshops

Learn & grow with live workshops.

Live design workshops allow you to see how designers work in real time, and you can learn with your peers.

03
Networking

Meet new pros from all over.

The conference also provides fun opportunities to meet other designers and discuss the latest trends in design.

Learn from the

best speakers.

This year, we're proud to have a lineup of speakers who are not only at the top of their industry, but who are also highly talented and creative. You won't be disappointed.

Speaker lineup
No items found.

Created by a talented team of designers.

Our team has been organizing and running conferences for over 20 years, and we love everything about design and marketing.

Learn about us
Learn about us

Aerotime helps you work in flow state by streamlining your meetings and making it easier to prioritize tasks.

Be more effective
and less busy

ADD EVENT TO CALENDAR

Objectives

Schedule free appointment
COLOR CREATIVE: FYP PROGRAM

Scope Overview

Design and develop a centralized website under Color Creative to host the entire FYP program portal, grading dashboard hub for volunteers and staff, and application submission intake.
SCHEDULE FREE INSPECTION
REQUEST A FREE QUOTE
DEVELOPMENT
1

GRADING DASHBOARD

Grading Dashboard will give volunteers and staff the ability to log in create accounts and have their dashboards auto-populate with qualified applications. The ability to filter apps based on discipline and other tags, and go back and adjust grades before deadlines if needed. The dashboard will showcase how many applications you’ve reviewed and the grade given. The capability of hiding confidential information of applicants for the first 2 rounds of the review process for privacy and fairness. The dashboard will have tier access so only users with certain credentials will have access to “full view”. The dashboard will have a private leaderboard feed updating in real-time based on cumulative scoring. 

2

FYP PROGRAM DASHBOARD

The FYP program portal will give cohort and mentors lifetime access to program details and resources even after graduating. This portal will serve as an online community where everyone will be able to view a Master Calendar that a program director can seamlessly update and edit, program news, upcoming events, personal profile pages with cohort/mentors prior work, awards, bio, etc. The cohort will have the ability to submit questions to a bulletin board that can later be answered and serves as a future resource for other cohort members.

3

APPLICATION SUBMISSION

Applicants will have the ability to submit personal information, links to creative work answer short form questions.

4

FRONT FACING WEBSITE

The main website will serve as the location where individuals can learn more about the program, apply, and view the FYP brands inception and journey.

Bringing the Color Creative vision to life

Work with me
About me
With over 12 years of experience, Meagan's skills as a web designer have continued to grow. And she is now considered as one of the best creatives on the world wide web.
Learn about me
Content production

Share brand content that creates trust

Get high-quality content that will resonate with and engage your target audience consistently.

Contact me
Campaign management

Launch campaigns that increase sales

With a good campaign team on your side, you'll be free to focus on other parts of your business.

Contact me
Brand consulting

Find the competitive edge you needed

Brand consulting is a major key for businesses that are looking to achieve sustainable growth.

Contact me
Depuis 2011
Applicants will have the ability to submit personal information, links to creative work answer short form questions.
  • Athlètes de haut de niveau : Martellus Bennett des Chicago Bears
  • Entraîneurs sportifs : Stéphane Waite des Chicago Hawks
  • Producteurs de film : Barrie Osborne producteur du Seigneur des anneaux et Matrix
  • Entrepreneurs : Oussama Ammar, Marc Simoncini (Meetic), Fred Mazzella (BlaBlacar), Anthony Bourbon (Feed).
David Laroche interview avec Marc Simoncini, fondateur de Meetic
Mars 2012
Grading Dashboard will give volunteers and staff the ability to log in create accounts and have their dashboards auto-populate with qualified applications. The ability to filter apps based on discipline and other tags, and go back and adjust grades before deadlines if needed. The dashboard will showcase how many applications you’ve reviewed and the grade given. The capability of hiding confidential information of applicants for the first 2 rounds of the review process for privacy and fairness. The dashboard will have tier access so only users with certain credentials will have access to “full view”. The dashboard will have a private leaderboard feed updating in real-time based on cumulative scoring. 
David Laroche nombre de vues sur sa chaine YouTube
En 2014
The FYP program portal will give cohort and mentors lifetime access to program details and resources even after graduating. This portal will serve as an online community where everyone will be able to view a Master Calendar that a program director can seamlessly update and edit, program news, upcoming events, personal profile pages with cohort/mentors prior work, awards, bio, etc. The cohort will have the ability to submit questions to a bulletin board that can later be answered and serves as a future resource for other cohort members.  
David Laroche est qualifié en 2014 dans la presse comme “prodige de la confiance en soi”.
En 2016
L’association internationale des meilleurs professionnels basée à New York lui décerne le prix de meilleur “motivational speaker” de l’année.
En 2017, David Laroche recoit le prix de meilleur “motivational speaker” de l’année.
En 2017
David Laroche obtient le VISA O-1 et est ainsi reconnu par le gouvernement américain comme possédant des compétences extraordinaires.
David Laroche décroche le visa O-1
En 2016, 2018 et 2019
David Laroche a été sélectionné à trois reprises pour des interventions pour l’organisation internationales TED.

Chaque année, il accompagne des dizaines de milliers de personnes lors d’événements “live”, organisés dans plus de 15 pays.

Reconnu pour sa détermination et son inlassable persévérance, David Laroche incarne cette génération d’entrepreneurs qui passe à l’action pour se créer une vie sur-mesure.

Son crédo: « Je ne sais pas ce qui est possible ou non, alors j’agis comme si tout est possible… »

David Laroche et l'organisation Ted Talk

OVERVIEW

Design and develop a centralized website hub under the Color Creative umbrella to host FYP program portal, grading dashboard, and application submission intake.

Sendinblue

Branding. UX/UI Design. Technology.

iPaidThat

UX/UI Design. Development.

Foodles

Branding. UX/UI Design.

Qonto

UX/UI Design. Technology.

SnapCall

UX/UI Design. Technology.

Yaago

Branding. UI/UX. Technology.

COLOR
CREATIVE
PROPOSAL

COLOR
CREATIVE
PROPOSAL

COLOR
CREATIVE
PROPOSAL

Crafted
by
DMD

THE ONLY WAY
TO PRESENT
A MOCKUP

THE ONLY WAY
TO PRESENT
A MOCKUP

Please view proposal on desktop