Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Creating Your Kick-A$$ Website

Betsy Cohen
March 20, 2013

Creating Your Kick-A$$ Website

Spring Tech Forum at University of Advancing Technology: Betsy Cohen speaks to college students about creating a portfolio website that represents you as a professional and reflects the brand you want to establish. Some of the topics include:

- Structuring a site to reflect your goals and audience
- Selecting/designing a template
- Incorporating your personal identity
- Content
- Best practices, and What *NOT* to do
- Ways to use your site as part of a broader web platform

Betsy Cohen

March 20, 2013
Tweet

More Decks by Betsy Cohen

Other Decks in Design

Transcript

  1. CREATING YOUR
    KICK-A$$ WEBSITE
    Betsy Cohen
    UAT Techforum
    @betsela www: positiveelement.com
    Monday, April 15, 13

    View full-size slide

  2. A good website establishes your credibility
    and your personal brand.
    Monday, April 15, 13

    View full-size slide

  3. A bad web site could be worse than no website at all.
    Monday, April 15, 13

    View full-size slide

  4. Alignment, padding, font, and color contribute to an
    impression on quality and professionalism, or lack thereof.
    Monday, April 15, 13

    View full-size slide

  5. CREating Kick-ASS Websites
    1. define before design.
    2. build it right, not cool.
    3. use and extend your site.
    sneak preview:
    Monday, April 15, 13

    View full-size slide

  6. 1. define before design
    Monday, April 15, 13

    View full-size slide

  7. Determine and Prioritize
    Your Site’s Goals.
    Design your site to make it oh-so-obvious,
    and drive visitors towards your goal
    Monday, April 15, 13

    View full-size slide

  8. Prominent “hire me” button tell us exactly what he wants.
    Monday, April 15, 13

    View full-size slide

  9. To establish credibility, highlight your success and credentials:
    books, awards, testimonials, letters after your name....
    Monday, April 15, 13

    View full-size slide

  10. To develop a loyal following, create a site for INTERACTION.
    Prominently feature your email subscribe, SM links, and blog.
    Monday, April 15, 13

    View full-size slide

  11. Common Goals
    • Get hired for freelance or permanent work
    • Establish credibility as an expert
    • Develop a loyal following
    Monday, April 15, 13

    View full-size slide

  12. Common Audience Segments
    • Potential clients
    • Potential employers
    • Fans
    • Media
    • Colleagues
    Monday, April 15, 13

    View full-size slide

  13. Create and Organize
    Your Content.
    Keep your site’s goals and audience
    in mind at all times!
    Monday, April 15, 13

    View full-size slide

  14. Content Requirements
    • About
    • Portfolio
    • Large Screenshots
    • Background info or
    Case studies
    • Links when avail.
    • Social Media links/feed
    • Email Subscribe
    • Media/Press
    • Mentions
    • Awards
    • Audio/Video
    • Blog
    • Contact info
    • Call to Action
    Consider including some or all of the following content:
    Monday, April 15, 13

    View full-size slide

  15. • What content deserves it’s own page? What
    might be persistent on every page in a
    sidebar, header or footer?
    • Study the competition for inspiration and
    best practices.
    • Use a sketch pad, iPad, or paper napkin to
    create sitemap and wireframes.
    Lay It Out
    Monday, April 15, 13

    View full-size slide

  16. When napkins are in short supply... Try iPad app Paper for
    quickly sketching wireframes & sitemaps
    Monday, April 15, 13

    View full-size slide

  17. iMockups is a great iPad app for more precise wireframes
    Monday, April 15, 13

    View full-size slide

  18. Quick Tips for User- and SE-Friendly Content
    • SHORT... pages, paragraphs, sentences... and don’t forget the short (small)
    words — unless your audience is particularly erudite
    • SEMANTIC HTML Properly tag headings — — and subheadings —
    , etc. — to break up longer passages and make content accessible via
    text readers.
    • FORMAT: Add visual interest and enhance “scan-ability” with bullets, block
    quotes, links, and data tables whenever appropriate.
    • IMAGES are also great for visual interest and serve as clues to a section’s
    topic. But - Be sure to use high-quality images or your credibility will suffer.
    • TARGET: Focus individual page content around a single keyword phrase to
    enhance search engine visibility.
    • EDIT: Quality writing is crucial for credibility. Get a pro or at least someone
    smarter than you to review and edit.
    Create Your Content
    Monday, April 15, 13

    View full-size slide

  19. 2. Build it right, not cool
    Monday, April 15, 13

    View full-size slide

  20. Pick a Platform
    • Static site from HTML/CSS
    • Self-hosted CMS — WordPress
    • SASS/hosted CMS — SquareSpace
    • etc. etc. etc.
    Monday, April 15, 13

    View full-size slide

  21. Hosting & Domain
    • Security is more important than ever -
    don’t be too cheap. Cheap hosting can end
    up costing much more in time...
    • Consider VPS, cloud or hosted service.
    • Select a domain that will stay with you. You
    can’t really go wrong with your name, if it’s
    available.
    Monday, April 15, 13

    View full-size slide

  22. Build the Site’s
    Foundation and Pages
    • Focusing solely on content and layout,
    create pages and place content.
    • If starting from scratch, use semantic HTML
    that can be styled later.
    • Use placeholder text for anything that you
    know needs to be designed.
    • Test the site’s flow from the point of view
    of your probable audience segments.
    Monday, April 15, 13

    View full-size slide

  23. Create your site as a Working Wireframe before
    customizing the design.
    Monday, April 15, 13

    View full-size slide

  24. Design with Best Practices
    • Intuitive, simple, uncluttered
    • Don’t re-invent the wheel. Don’t make
    people THINK.
    • Personalize with subtle accents, color and
    imagery to convey your brand identity.
    • Design around YOU, not individual projects
    Monday, April 15, 13

    View full-size slide

  25. What Not To Do: Make People Think!
    Monday, April 15, 13

    View full-size slide

  26. If your website needs a user guide, you might want to simplify.
    Monday, April 15, 13

    View full-size slide

  27. We want thumbnails!
    Monday, April 15, 13

    View full-size slide

  28. Put Navigation in its Place.
    Monday, April 15, 13

    View full-size slide

  29. Graphic and text make it immediately clear
    what this company is all about...
    Monday, April 15, 13

    View full-size slide

  30. Basic, but clean & professional with easy-to-find
    Contact Info and big-enough thumbnails
    Monday, April 15, 13

    View full-size slide

  31. Great content : Narrative about project
    provides insight to visitors.
    Monday, April 15, 13

    View full-size slide

  32. Typography, limited use of bold color, and
    friendly narrative add personality.
    Monday, April 15, 13

    View full-size slide

  33. Understated: A little color, lots of white space, and beautiful
    typography go a long way to set this company’s tone.
    Monday, April 15, 13

    View full-size slide

  34. Subtle personality, book covers for credibility... and Free
    Chapter + email subscribe to encourage interaction
    Monday, April 15, 13

    View full-size slide

  35. Start from a Template?
    Ideally, it’s custom. If not, select a minimal template and
    add your personality in subtle ways.
    • Look for a plain vanilla, super-clean theme
    • Look for decent padding, margins and
    white-space (or black-space!)
    • Look for readable typography, font-styles
    that feel right to you
    Monday, April 15, 13

    View full-size slide

  36. Low-cost theme example
    One of many clean & professional Portfolio templates
    at SquareSpace. And notice the great CTA...
    Monday, April 15, 13

    View full-size slide

  37. Premium WordPress Theme: Minimum by StudioPress
    Monday, April 15, 13

    View full-size slide

  38. Free WordPress theme: Beveled by WooThemes
    Monday, April 15, 13

    View full-size slide

  39. ThemeForest is a marketplace for templates and themes.
    Monday, April 15, 13

    View full-size slide

  40. Twitter Bootstrap and other frameworks
    can jumpstart your custom development work.
    Monday, April 15, 13

    View full-size slide

  41. 3. Use and Extend Your Site
    Monday, April 15, 13

    View full-size slide

  42. Time-sensitive content, out of date? #FAIL
    Monday, April 15, 13

    View full-size slide

  43. Keep it Fresh and Up-to-date
    • Use a Content Management tool to make it
    EASY to add content
    • Add new projects, testimonials, press
    • Blog on a regular basis
    Monday, April 15, 13

    View full-size slide

  44. Interact.
    If you have talent and put yourself
    out there, people will want
    to interact with you.
    Monday, April 15, 13

    View full-size slide

  45. Encourage Interaction
    • Collect email addresses for a newsletter or for occasional
    announcements.
    • Stay in touch with subscribers. It doesn’t have to be weekly or
    monthly, maybe just every few months when you launch new
    projects or have other news.
    • Encourage comments on your blog posts.
    • Respond to comments personally to develop relationships.
    • When appropriate, follow up with these commenters via email to
    ask permission to add them to your email list.
    Monday, April 15, 13

    View full-size slide

  46. Toby Neal responds to almost every comment personally.
    Monday, April 15, 13

    View full-size slide

  47. Extend your Platform.
    “If you want to be found,
    stand where the seeker seeks.”
    ~ Sydney Lanier,
    American musician and poet
    Monday, April 15, 13

    View full-size slide

  48. Monday, April 15, 13

    View full-size slide

  49. Your Website is a Hub.
    • Cross-promote your content on your branded social
    media channels, email lists, directories
    • Drive traffic back to your site or aim to increase your FB
    fan base
    • Promote your followers, fans, & colleagues when they
    have news worth sharing, by re-tweeting, blogging, etc.
    They’ll repay these favors!
    Monday, April 15, 13

    View full-size slide

  50. Sylvia Day’s Twitter and FB match her site’s branding,
    her Amazon page has a feed of latest blog posts, and —
    BONUS! Pinterest boards inspired by her books!
    Monday, April 15, 13

    View full-size slide

  51. Toby Neal re-tweets tons of her followers posts, and promotes
    others with #WW (Writer Wednesday) and #FF (Follow Friday)
    Monday, April 15, 13

    View full-size slide

  52. SUMMARY
    Define Before Design
    1. Determine Goals/Audience
    2. Create and Organize Content
    1. Define Content Requirements
    2. Lay it out — Wireframes/Sitemap
    3. Create Good Content
    Monday, April 15, 13

    View full-size slide

  53. SUMMARY
    Build it Right, Not Cool.
    1. Select Platform, Hosting and Domain.
    2. Build a "Working Wireframe"
    3. Design with Best Practices and Subtle
    Personality
    4. When Using Templates, Choose a Minimal
    Design
    Monday, April 15, 13

    View full-size slide

  54. SUMMARY
    Use and Extend Your Site
    1. Keep it Fresh
    2. Interact
    3. Extend platform through social networking
    Monday, April 15, 13

    View full-size slide

  55. Resources
    Platforms, Templates and Frameworks
    SquareSpace — http://www.squarespace.com
    WordPress — http://www.wordpress.org
    WooThemes — http://www.woothemes.com/
    StudioPress — http://my.studiopress.com/themes/
    ThemeForest — http://themeforest.net/
    Twitter Bootstrap — http://twitter.github.com/bootstrap/
    Other Resources
    Design Inspiration — http://www.dailyinspiration.nl/category/web-design/
    Color Palette Creation — http://kuler.adobe.com
    iMockups for iPad — http://www.endloop.ca/imockups/
    Paper for iPad — http://www.fiftythree.com/paper
    Article: 3 Reasons Your Web Portfolio Sucks —
    http://www.webdesignerdepot.com/2012/08/three-reasons-your-portfolio-website-sucks/
    Article: Making & Maintaining Your Online Portfolio —
    http://www.onextrapixel.com/2011/06/16/making-and-maintaining-your-online-portfolio-best-
    practices/
    Monday, April 15, 13

    View full-size slide

  56. betsy cohen
    positive element
    twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    www . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
    email . . . . . . . . . . . . . . . . . . . . . .
    @betsela
    PositiveElement.com
    [email protected]
    Monday, April 15, 13

    View full-size slide