SlideShare une entreprise Scribd logo
1  sur  35
Télécharger pour lire hors ligne
The Beginners Guide
Table of Contents
03

What is ProSite?

04

What is Behance?

05

How do ProSite & Behance work together?

06

Get Started in 6 Easy Steps

34

See Live Examples

35

Need More Help?
What is ProSite?
ProSite is a website builder that allows you to design and fully customize your personal portfolio.
Make unlimited customizations without touching a line of code.
What is Behance?
Behance is the leading creative platform, and is where you will upload your projects.
Your work will appear in the Behance galleries, giving you exposure to millions of visitors
who come to Behance to discover creative work.
How ProSite & Behance Work Together
Your Behance projects sync with your ProSite, so you only have to update your work in one place to
enjoy all the benefits of Behance’s exposure and to have your own customized personal website.
NOTE: Your ProSite can live on your own URL, and it doesn’t contain any Behance branding or ads.

Your Behance PORTFOLIO

Your ProSite
Get Started in 6 Easy Steps
We have created this 6 step guide to help you successfully publish your ProSite.

1

2

3

4

5

6
STEP 1:
Select Your Layout
There are 4 templates to choose from that act as a
starting point for your ProSite.
ALL layouts allow you to customize and adjust many
elements of the design & layout in order to create a
unique and personalized website.
NOTE: Even after you’ve chosen a layout, you’ll always have the
option to experiment with another. Simply come back here and
select another layout.

See how others have
transformed these
basic templates into
unique designs.

NOTE: Use this
interactive side bar
to jump between
sections.

Preview each layout
in both dark or light
color schemes here.
Layout 1:

Basic
This layout is best for users looking for a minimal,
easy-to-use design. Note that the header, project list,
& navigation will appear in the same column.

Project page

MAIN GALLERY PAGE
Layout 2:

Two Column
This layout has two unique features: the “Website
Description” box (a visual element you can use to introduce
your site however you’d like) as well as the option for
displaying your Twitter feed. The main navigation will
display horizontally across the top of your site.

Project page

MAIN GALLERY PAGE
Layout 3:

Three Column
This layout seperates out the navigation and the
project list into individual vertical columns. You’ll
also have the option to add the visual element of
a “Top Bar.”

Project page

MAIN GALLERY PAGE
Layout 4:

Geometric Layout
The layout is great for users who
prefer less text on their gallery pages.
Your project covers will be the main
element, stretching across the entire
width of your site. Your Logo and
Navigation appear horizontally
above the content.

Project page

MAIN GALLERY PAGE
Managing Your Drafts
You can experiment with, edit and save one
draft per layout - you’ll find these versions in
‘MY DRAFTS’.
NOTE: Be aware that if you begin a second
draft in the same layout, you will be overwriting
your first draft.

NOTE: This button
allows you to preview
the draft or layout at
full screen
STEP 2:
Create Your Projects on Behance
You have to create your projects on Behance to be able to see them in the Prosite

→ Start Creating projects Now

environment. Do this before moving onto the design section of ProSite.

→ Learn more about adding projects

Your Behance PROJECTS

YOUR PROJECTS ON PROSITE
Select & Order
Your Projects
All your Behance projects will appear
in this list. Add them your ProSite by
dragging & dropping them into the
list below.

Organize the order of your projects by
dragging them up and down this list.

NOTE: A green
dot shows that
you have already
added this project
to your gallery.
STEP 3:
The Design Section
Here you’ll find all the customization options you need to
achieve the look & feel you’re going for. The three tabs in this
section are:
STYLES: The appearance of each website element
LAYOUT: The position, order and spacing of these elements
HTML & CSS: Customizations for Advanced users
Customize Your Styles
The Website Elements dropdown allows you to
customize colors, fonts, background styles and more.
NOTE: Global styles are design choices that will apply to all
the pages of your ProSite, like a site wide font family or the
link color.
Customize Your
Project Covers
You have total flexibility to adjust your
project covers - change their size,
proportion, insert new images and even
change the rollover state.
→ See Examples of Project Covers here

COVER RESIZING EXAMPLES:
NOTE: Use this dropdown
tool to see how each
project will look with your
customizations.

Style Your Project
& Custom Pages
The other drop-downs in the ‘STYLES’ tab allow you to
customize your Projects and Custom Pages.
You can hide or show elements from your Behance
Projects such as your project descriptions or details.

NOTE: Our default
setting hides your
Behance project
descriptions. Turn
“Project Text &
Dividers” ON to show
these in your Prosite.
Adjust Layout
The ‘LAYOUT’ tab allows you to customize the order and placement of your columns, the widths, margin sizes and more
for your Homepage, Projects and Custom Pages.
Project Image Size
ProSite allows you to display large, hi-res images, up to 1920px wide. To increase the size your images are displayed at,
you must first increase your ‘column width’ in the Website Elements dropdown.
→ More info on this here
OR Use HTML & CSS
Activate this section to customize
your ProSite even more! This is only
recommended for advanced users with
extensive experience using HTML and
CSS coding.
Preview & Save
Preview your design at any time. Make sure to save your drafts often,
and remember you can only save one draft per layout.
STEP 4:
Add Custom Pages
You have the option to display a Contact, About and
Resume page, or to add more galleries, a blog, or
whatever else you can dream up!
NOTE: You may want to go back to the Design
section and customize your new custom pages
using the ‘STYLES’ and ‘LAYOUT’ tabs.
Edit Custom Page Content
Use the settings button to edit and create your
new pages content.
Organize the order of your pages by dragging
them up and down the list.
STEP 5:
Customize Your Settings
Finally, tweak settings and extras like your
domain name, custom favicons, analytics,
social media promotion & beyond!

Have your own
domain name?
We’ve provided a
step-by-step guide
for the most common
domain hosts.

Want a custom font?
Take advantage of our
TypeKit Integration.
STEP 6:
Publish Your ProSite
To publish your ProSite, you must first activate
your account. This consists of a simple payment
process - the cost is $11/month which includes
web hosting.
Once you have done this, make sure to click the
“Publish” button to send your site live.
Updating Your Site
Once you have published, you can continue to edit and update your site, but
none of the changes you make will go live until you click this button.
See What’s Possible with ProSite
View a gallery of sites created by ProSite users here
Need More Help?
If you are still unsure about anything, please visit our ProSite Help Center.

Contenu connexe

Tendances

Branding sharepoint project
Branding sharepoint projectBranding sharepoint project
Branding sharepoint projectBinh Nguyen
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013Thomas Daly
 
SPC Master Power User SharePoint & Office 365
SPC Master Power User SharePoint & Office 365SPC Master Power User SharePoint & Office 365
SPC Master Power User SharePoint & Office 365Benjamin Niaulin
 
What's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover itWhat's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover itBenjamin Niaulin
 
Off Page SEO Strategies
Off Page SEO StrategiesOff Page SEO Strategies
Off Page SEO StrategiesShimanto Arif
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThomas Daly
 
Optimizing WordPress sites for SEO and social media by Miriam Schwab
Optimizing WordPress sites for SEO and social media by Miriam SchwabOptimizing WordPress sites for SEO and social media by Miriam Schwab
Optimizing WordPress sites for SEO and social media by Miriam SchwabMiriam Schwab
 
Facebook page changes
Facebook page changesFacebook page changes
Facebook page changesExplicata
 
How to personalize your re max website
How to personalize your re max websiteHow to personalize your re max website
How to personalize your re max websiteLarry Brzostek
 
Customizing My Sites - SPSSAC
Customizing My Sites - SPSSACCustomizing My Sites - SPSSAC
Customizing My Sites - SPSSACMichael Doyle
 
Customizing My Sites by Mike Doyle
Customizing My Sites by Mike DoyleCustomizing My Sites by Mike Doyle
Customizing My Sites by Mike Doylecharelenetorres
 
Google sites creating editing and sharing a site
Google sites creating editing and sharing a siteGoogle sites creating editing and sharing a site
Google sites creating editing and sharing a siteEHWLC
 
Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extendedD'arce Hess
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointD'arce Hess
 
Intro to Design Manager
Intro to Design ManagerIntro to Design Manager
Intro to Design ManagerD'arce Hess
 
Seo report tier4web
Seo report  tier4webSeo report  tier4web
Seo report tier4webTier4web1
 

Tendances (20)

Branding sharepoint project
Branding sharepoint projectBranding sharepoint project
Branding sharepoint project
 
WordPress 101
WordPress 101WordPress 101
WordPress 101
 
Developing branding solutions for 2013
Developing branding solutions for 2013Developing branding solutions for 2013
Developing branding solutions for 2013
 
Setting up an ning site
Setting up an ning siteSetting up an ning site
Setting up an ning site
 
SPC Master Power User SharePoint & Office 365
SPC Master Power User SharePoint & Office 365SPC Master Power User SharePoint & Office 365
SPC Master Power User SharePoint & Office 365
 
What's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover itWhat's new in SharePoint 2013 - Discover it
What's new in SharePoint 2013 - Discover it
 
Off Page SEO Strategies
Off Page SEO StrategiesOff Page SEO Strategies
Off Page SEO Strategies
 
The A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with BootstrapThe A to Z of Building a Responsive SharePoint Site with Bootstrap
The A to Z of Building a Responsive SharePoint Site with Bootstrap
 
Optimizing WordPress sites for SEO and social media by Miriam Schwab
Optimizing WordPress sites for SEO and social media by Miriam SchwabOptimizing WordPress sites for SEO and social media by Miriam Schwab
Optimizing WordPress sites for SEO and social media by Miriam Schwab
 
Facebook page changes
Facebook page changesFacebook page changes
Facebook page changes
 
How to personalize your re max website
How to personalize your re max websiteHow to personalize your re max website
How to personalize your re max website
 
Customizing My Sites - SPSSAC
Customizing My Sites - SPSSACCustomizing My Sites - SPSSAC
Customizing My Sites - SPSSAC
 
Customizing My Sites by Mike Doyle
Customizing My Sites by Mike DoyleCustomizing My Sites by Mike Doyle
Customizing My Sites by Mike Doyle
 
Google sites creating editing and sharing a site
Google sites creating editing and sharing a siteGoogle sites creating editing and sharing a site
Google sites creating editing and sharing a site
 
Branding 101 extended
Branding 101 extendedBranding 101 extended
Branding 101 extended
 
Tips for share point branding
Tips for share point brandingTips for share point branding
Tips for share point branding
 
How to use bebee
How to use bebeeHow to use bebee
How to use bebee
 
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
 
Intro to Design Manager
Intro to Design ManagerIntro to Design Manager
Intro to Design Manager
 
Seo report tier4web
Seo report  tier4webSeo report  tier4web
Seo report tier4web
 

En vedette

Дизайн-мышление в образовании
Дизайн-мышление в образованииДизайн-мышление в образовании
Дизайн-мышление в образованииIrina Petrova
 
Instagram: 9 skutecznych działań komercyjnych
Instagram: 9 skutecznych działań komercyjnychInstagram: 9 skutecznych działań komercyjnych
Instagram: 9 skutecznych działań komercyjnychSocjomania
 
Zelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succesZelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succesCanDo Coaching
 
เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2
เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2
เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2supott
 
Use Them or Lose Them: Old buildings with new purposes
Use Them or Lose Them: Old buildings with new purposesUse Them or Lose Them: Old buildings with new purposes
Use Them or Lose Them: Old buildings with new purposesJonathanFoyle1
 
20110308 1226
20110308 122620110308 1226
20110308 1226bresnjev
 
ICT for Education and R&D
ICT for Education and R&DICT for Education and R&D
ICT for Education and R&Dsupott
 
How the introduction of information systems has helped to enhance school life...
How the introduction of information systems has helped to enhance school life...How the introduction of information systems has helped to enhance school life...
How the introduction of information systems has helped to enhance school life...Mike O'Byrne
 
pwc-us-cleantech-investments-and-insights-q4-2015
pwc-us-cleantech-investments-and-insights-q4-2015pwc-us-cleantech-investments-and-insights-q4-2015
pwc-us-cleantech-investments-and-insights-q4-2015dschwa238
 
Oh, It Ain't My Fault: Building Successful Marketing Relationships
Oh, It Ain't My Fault: Building Successful Marketing RelationshipsOh, It Ain't My Fault: Building Successful Marketing Relationships
Oh, It Ain't My Fault: Building Successful Marketing RelationshipsGeoff Coats
 
ถอดบทเรียน
ถอดบทเรียนถอดบทเรียน
ถอดบทเรียนbuntawee
 
Bacteria jeopardy
Bacteria jeopardyBacteria jeopardy
Bacteria jeopardytammielee
 
IESF General Presentation
IESF General PresentationIESF General Presentation
IESF General PresentationLaura Cruceru
 
How the america's changed
How the america's changedHow the america's changed
How the america's changeddr_techmac
 
Mahindra's entry into dairy sector
Mahindra's entry into dairy sectorMahindra's entry into dairy sector
Mahindra's entry into dairy sectorRahul Gupta
 
Hardscape.
Hardscape.Hardscape.
Hardscape.buntawee
 
Product & brand selection
Product & brand selectionProduct & brand selection
Product & brand selectionRahul Gupta
 

En vedette (20)

Дизайн-мышление в образовании
Дизайн-мышление в образованииДизайн-мышление в образовании
Дизайн-мышление в образовании
 
Instagram: 9 skutecznych działań komercyjnych
Instagram: 9 skutecznych działań komercyjnychInstagram: 9 skutecznych działań komercyjnych
Instagram: 9 skutecznych działań komercyjnych
 
Zelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succesZelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succes
 
เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2
เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2
เทคโนโลยี 3 g สู่การพัฒนาท้องถิ่น v2
 
Use Them or Lose Them: Old buildings with new purposes
Use Them or Lose Them: Old buildings with new purposesUse Them or Lose Them: Old buildings with new purposes
Use Them or Lose Them: Old buildings with new purposes
 
20110308 1226
20110308 122620110308 1226
20110308 1226
 
ICT for Education and R&D
ICT for Education and R&DICT for Education and R&D
ICT for Education and R&D
 
How the introduction of information systems has helped to enhance school life...
How the introduction of information systems has helped to enhance school life...How the introduction of information systems has helped to enhance school life...
How the introduction of information systems has helped to enhance school life...
 
Webquest - Weather
Webquest - WeatherWebquest - Weather
Webquest - Weather
 
pwc-us-cleantech-investments-and-insights-q4-2015
pwc-us-cleantech-investments-and-insights-q4-2015pwc-us-cleantech-investments-and-insights-q4-2015
pwc-us-cleantech-investments-and-insights-q4-2015
 
Oh, It Ain't My Fault: Building Successful Marketing Relationships
Oh, It Ain't My Fault: Building Successful Marketing RelationshipsOh, It Ain't My Fault: Building Successful Marketing Relationships
Oh, It Ain't My Fault: Building Successful Marketing Relationships
 
ถอดบทเรียน
ถอดบทเรียนถอดบทเรียน
ถอดบทเรียน
 
Oplossing
OplossingOplossing
Oplossing
 
Bacteria jeopardy
Bacteria jeopardyBacteria jeopardy
Bacteria jeopardy
 
Shoppe On The Go
Shoppe On The GoShoppe On The Go
Shoppe On The Go
 
IESF General Presentation
IESF General PresentationIESF General Presentation
IESF General Presentation
 
How the america's changed
How the america's changedHow the america's changed
How the america's changed
 
Mahindra's entry into dairy sector
Mahindra's entry into dairy sectorMahindra's entry into dairy sector
Mahindra's entry into dairy sector
 
Hardscape.
Hardscape.Hardscape.
Hardscape.
 
Product & brand selection
Product & brand selectionProduct & brand selection
Product & brand selection
 

Similaire à Behance prosite beginners guide

Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindNadya Rodionenko
 
Divs and Links Styles
Divs and Links StylesDivs and Links Styles
Divs and Links StylesDaniel Downs
 
Net4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business WebsiteNet4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business WebsiteNet4 India Ltd.
 
Net4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step GuideNet4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step GuidePallavi Vyas
 
Vanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums
 
Create content template
Create content templateCreate content template
Create content templatevokeron
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateSean Burgess
 
Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8Jim Birch
 
Things I've learnt when skinning and customizing a SharePoint 2010 Site
Things I've learnt when skinning and customizing a SharePoint 2010 SiteThings I've learnt when skinning and customizing a SharePoint 2010 Site
Things I've learnt when skinning and customizing a SharePoint 2010 SiteJustin Lee
 
Applying New Technologies
Applying New TechnologiesApplying New Technologies
Applying New Technologiesbibliotecaria
 
Tips for creating a blog layout - Phoenix web design
Tips for creating a blog layout - Phoenix web designTips for creating a blog layout - Phoenix web design
Tips for creating a blog layout - Phoenix web designscrawnykeepsake42
 
Dreamweaver cs6 step by step
Dreamweaver cs6 step by stepDreamweaver cs6 step by step
Dreamweaver cs6 step by stepzoran Jelinek
 
A2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme DocumentationA2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme DocumentationA2WPress
 
Using Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingUsing Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingCindy Royal
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSLaura Hartwig
 
Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5seanoiii
 

Similaire à Behance prosite beginners guide (20)

Creating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in MindCreating Style Guides with Modularity in Mind
Creating Style Guides with Modularity in Mind
 
Divs and Links Styles
Divs and Links StylesDivs and Links Styles
Divs and Links Styles
 
Net4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business WebsiteNet4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business Website
 
Net4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step GuideNet4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step Guide
 
ARTICULOENINGLES
ARTICULOENINGLESARTICULOENINGLES
ARTICULOENINGLES
 
Vanilla Forums Theme Guide
Vanilla Forums Theme GuideVanilla Forums Theme Guide
Vanilla Forums Theme Guide
 
Create content template
Create content templateCreate content template
Create content template
 
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateBP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
BP304 - Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template
 
Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8Bootstrap Paragraphs for Drupal 8
Bootstrap Paragraphs for Drupal 8
 
Things I've learnt when skinning and customizing a SharePoint 2010 Site
Things I've learnt when skinning and customizing a SharePoint 2010 SiteThings I've learnt when skinning and customizing a SharePoint 2010 Site
Things I've learnt when skinning and customizing a SharePoint 2010 Site
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Applying New Technologies
Applying New TechnologiesApplying New Technologies
Applying New Technologies
 
Tips for creating a blog layout - Phoenix web design
Tips for creating a blog layout - Phoenix web designTips for creating a blog layout - Phoenix web design
Tips for creating a blog layout - Phoenix web design
 
Dreamweaver cs6 step by step
Dreamweaver cs6 step by stepDreamweaver cs6 step by step
Dreamweaver cs6 step by step
 
A2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme DocumentationA2WPress Localbusiness Theme Documentation
A2WPress Localbusiness Theme Documentation
 
Blogging blueprint
Blogging blueprintBlogging blueprint
Blogging blueprint
 
Using Wordpress with Reclaim Hosting
Using Wordpress with Reclaim HostingUsing Wordpress with Reclaim Hosting
Using Wordpress with Reclaim Hosting
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSS
 
Html projects for beginners
Html projects for beginnersHtml projects for beginners
Html projects for beginners
 
Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5Basic tutorial dreamweaver_cs5
Basic tutorial dreamweaver_cs5
 

Plus de Microsoft

Lisa Lane MDes Thesis
Lisa Lane MDes ThesisLisa Lane MDes Thesis
Lisa Lane MDes ThesisMicrosoft
 
2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreads2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreadsMicrosoft
 
MVA student and instructor profiles
MVA student and instructor profilesMVA student and instructor profiles
MVA student and instructor profilesMicrosoft
 
SharePoint customized code analyzer
SharePoint customized code analyzer SharePoint customized code analyzer
SharePoint customized code analyzer Microsoft
 
Cognitive Walkthrough Template
Cognitive Walkthrough TemplateCognitive Walkthrough Template
Cognitive Walkthrough TemplateMicrosoft
 
Built for Man Look Book
Built for Man Look BookBuilt for Man Look Book
Built for Man Look BookMicrosoft
 
Office 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX ExplorationsOffice 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX ExplorationsMicrosoft
 
Multimedia UX
Multimedia UXMultimedia UX
Multimedia UXMicrosoft
 

Plus de Microsoft (8)

Lisa Lane MDes Thesis
Lisa Lane MDes ThesisLisa Lane MDes Thesis
Lisa Lane MDes Thesis
 
2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreads2012 13 look book fall-winter spreads
2012 13 look book fall-winter spreads
 
MVA student and instructor profiles
MVA student and instructor profilesMVA student and instructor profiles
MVA student and instructor profiles
 
SharePoint customized code analyzer
SharePoint customized code analyzer SharePoint customized code analyzer
SharePoint customized code analyzer
 
Cognitive Walkthrough Template
Cognitive Walkthrough TemplateCognitive Walkthrough Template
Cognitive Walkthrough Template
 
Built for Man Look Book
Built for Man Look BookBuilt for Man Look Book
Built for Man Look Book
 
Office 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX ExplorationsOffice 365 Administration and IW Home Page UX Explorations
Office 365 Administration and IW Home Page UX Explorations
 
Multimedia UX
Multimedia UXMultimedia UX
Multimedia UX
 

Behance prosite beginners guide

  • 2. Table of Contents 03 What is ProSite? 04 What is Behance? 05 How do ProSite & Behance work together? 06 Get Started in 6 Easy Steps 34 See Live Examples 35 Need More Help?
  • 3. What is ProSite? ProSite is a website builder that allows you to design and fully customize your personal portfolio. Make unlimited customizations without touching a line of code.
  • 4. What is Behance? Behance is the leading creative platform, and is where you will upload your projects. Your work will appear in the Behance galleries, giving you exposure to millions of visitors who come to Behance to discover creative work.
  • 5. How ProSite & Behance Work Together Your Behance projects sync with your ProSite, so you only have to update your work in one place to enjoy all the benefits of Behance’s exposure and to have your own customized personal website. NOTE: Your ProSite can live on your own URL, and it doesn’t contain any Behance branding or ads. Your Behance PORTFOLIO Your ProSite
  • 6. Get Started in 6 Easy Steps We have created this 6 step guide to help you successfully publish your ProSite. 1 2 3 4 5 6
  • 8. Select Your Layout There are 4 templates to choose from that act as a starting point for your ProSite. ALL layouts allow you to customize and adjust many elements of the design & layout in order to create a unique and personalized website. NOTE: Even after you’ve chosen a layout, you’ll always have the option to experiment with another. Simply come back here and select another layout. See how others have transformed these basic templates into unique designs. NOTE: Use this interactive side bar to jump between sections. Preview each layout in both dark or light color schemes here.
  • 9. Layout 1: Basic This layout is best for users looking for a minimal, easy-to-use design. Note that the header, project list, & navigation will appear in the same column. Project page MAIN GALLERY PAGE
  • 10. Layout 2: Two Column This layout has two unique features: the “Website Description” box (a visual element you can use to introduce your site however you’d like) as well as the option for displaying your Twitter feed. The main navigation will display horizontally across the top of your site. Project page MAIN GALLERY PAGE
  • 11. Layout 3: Three Column This layout seperates out the navigation and the project list into individual vertical columns. You’ll also have the option to add the visual element of a “Top Bar.” Project page MAIN GALLERY PAGE
  • 12. Layout 4: Geometric Layout The layout is great for users who prefer less text on their gallery pages. Your project covers will be the main element, stretching across the entire width of your site. Your Logo and Navigation appear horizontally above the content. Project page MAIN GALLERY PAGE
  • 13. Managing Your Drafts You can experiment with, edit and save one draft per layout - you’ll find these versions in ‘MY DRAFTS’. NOTE: Be aware that if you begin a second draft in the same layout, you will be overwriting your first draft. NOTE: This button allows you to preview the draft or layout at full screen
  • 15. Create Your Projects on Behance You have to create your projects on Behance to be able to see them in the Prosite → Start Creating projects Now environment. Do this before moving onto the design section of ProSite. → Learn more about adding projects Your Behance PROJECTS YOUR PROJECTS ON PROSITE
  • 16. Select & Order Your Projects All your Behance projects will appear in this list. Add them your ProSite by dragging & dropping them into the list below. Organize the order of your projects by dragging them up and down this list. NOTE: A green dot shows that you have already added this project to your gallery.
  • 18. The Design Section Here you’ll find all the customization options you need to achieve the look & feel you’re going for. The three tabs in this section are: STYLES: The appearance of each website element LAYOUT: The position, order and spacing of these elements HTML & CSS: Customizations for Advanced users
  • 19. Customize Your Styles The Website Elements dropdown allows you to customize colors, fonts, background styles and more. NOTE: Global styles are design choices that will apply to all the pages of your ProSite, like a site wide font family or the link color.
  • 20. Customize Your Project Covers You have total flexibility to adjust your project covers - change their size, proportion, insert new images and even change the rollover state. → See Examples of Project Covers here COVER RESIZING EXAMPLES:
  • 21. NOTE: Use this dropdown tool to see how each project will look with your customizations. Style Your Project & Custom Pages The other drop-downs in the ‘STYLES’ tab allow you to customize your Projects and Custom Pages. You can hide or show elements from your Behance Projects such as your project descriptions or details. NOTE: Our default setting hides your Behance project descriptions. Turn “Project Text & Dividers” ON to show these in your Prosite.
  • 22. Adjust Layout The ‘LAYOUT’ tab allows you to customize the order and placement of your columns, the widths, margin sizes and more for your Homepage, Projects and Custom Pages.
  • 23. Project Image Size ProSite allows you to display large, hi-res images, up to 1920px wide. To increase the size your images are displayed at, you must first increase your ‘column width’ in the Website Elements dropdown. → More info on this here
  • 24. OR Use HTML & CSS Activate this section to customize your ProSite even more! This is only recommended for advanced users with extensive experience using HTML and CSS coding.
  • 25. Preview & Save Preview your design at any time. Make sure to save your drafts often, and remember you can only save one draft per layout.
  • 27. Add Custom Pages You have the option to display a Contact, About and Resume page, or to add more galleries, a blog, or whatever else you can dream up! NOTE: You may want to go back to the Design section and customize your new custom pages using the ‘STYLES’ and ‘LAYOUT’ tabs.
  • 28. Edit Custom Page Content Use the settings button to edit and create your new pages content. Organize the order of your pages by dragging them up and down the list.
  • 30. Customize Your Settings Finally, tweak settings and extras like your domain name, custom favicons, analytics, social media promotion & beyond! Have your own domain name? We’ve provided a step-by-step guide for the most common domain hosts. Want a custom font? Take advantage of our TypeKit Integration.
  • 32. Publish Your ProSite To publish your ProSite, you must first activate your account. This consists of a simple payment process - the cost is $11/month which includes web hosting. Once you have done this, make sure to click the “Publish” button to send your site live.
  • 33. Updating Your Site Once you have published, you can continue to edit and update your site, but none of the changes you make will go live until you click this button.
  • 34. See What’s Possible with ProSite View a gallery of sites created by ProSite users here
  • 35. Need More Help? If you are still unsure about anything, please visit our ProSite Help Center.