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

Transcript

1. CREATING YOUR KICK-A$$ WEBSITE Betsy Cohen UAT Techforum @betsela www: positiveelement.com Monday, April 15, 13
2. A good website establishes your credibility and your personal brand. Monday, April 15, 13
3. A bad web site could be worse than no website at all. Monday, April 15, 13
4. Alignment, padding, font, and color contribute to an impression on quality and professionalism, or lack thereof. Monday, April 15, 13
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
6. 1. define before design Monday, April 15, 13
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
8. Prominent “hire me” button tell us exactly what he wants. Monday, April 15, 13
9. To establish credibility, highlight your success and credentials: books, awards, testimonials, letters after your name.... Monday, April 15, 13
10. To develop a loyal following, create a site for INTERACTION. Prominently feature your email subscribe, SM links, and blog. Monday, April 15, 13
11. Common Goals • Get hired for freelance or permanent work • Establish credibility as an expert • Develop a loyal following Monday, April 15, 13
12. Common Audience Segments • Potential clients • Potential employers • Fans • Media • Colleagues Monday, April 15, 13
13. Create and Organize Your Content. Keep your site’s goals and audience in mind at all times! Monday, April 15, 13
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
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
16. When napkins are in short supply... Try iPad app Paper for quickly sketching wireframes & sitemaps Monday, April 15, 13
17. iMockups is a great iPad app for more precise wireframes Monday, April 15, 13
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 — <h1> — and subheadings — <h2>, <h3> 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
19. 2. Build it right, not cool Monday, April 15, 13
20. Pick a Platform • Static site from HTML/CSS • Self-hosted CMS — WordPress • SASS/hosted CMS — SquareSpace • etc. etc. etc. Monday, April 15, 13
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
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
23. Create your site as a Working Wireframe before customizing the design. Monday, April 15, 13
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
25. What Not To Do: Make People Think! Monday, April 15, 13
26. If your website needs a user guide, you might want to simplify. Monday, April 15, 13
27. We want thumbnails! Monday, April 15, 13
28. Put Navigation in its Place. Monday, April 15, 13
29. Graphic and text make it immediately clear what this company is all about... Monday, April 15, 13
30. Basic, but clean & professional with easy-to-find Contact Info and big-enough thumbnails Monday, April 15, 13
31. Great content : Narrative about project provides insight to visitors. Monday, April 15, 13
32. Typography, limited use of bold color, and friendly narrative add personality. Monday, April 15, 13
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
34. Subtle personality, book covers for credibility... and Free Chapter + email subscribe to encourage interaction Monday, April 15, 13
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
36. Low-cost theme example One of many clean & professional Portfolio templates at SquareSpace. And notice the great CTA... Monday, April 15, 13
37. Premium WordPress Theme: Minimum by StudioPress Monday, April 15, 13
38. Free WordPress theme: Beveled by WooThemes Monday, April 15, 13
39. ThemeForest is a marketplace for templates and themes. Monday, April 15, 13
40. Twitter Bootstrap and other frameworks can jumpstart your custom development work. Monday, April 15, 13
41. 3. Use and Extend Your Site Monday, April 15, 13
42. Time-sensitive content, out of date? #FAIL Monday, April 15, 13
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
44. Interact. If you have talent and put yourself out there, people will want to interact with you. Monday, April 15, 13
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
46. Toby Neal responds to almost every comment personally. Monday, April 15, 13
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
48. Monday, April 15, 13
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
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
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
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
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
54. SUMMARY Use and Extend Your Site 1. Keep it Fresh 2. Interact 3. Extend platform through social networking Monday, April 15, 13
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
56. betsy cohen positive element twitter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . www . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . email . . . . . . . . . . . . . . . . . . . . . . @betsela PositiveElement.com Betsy@PositiveElement.com Monday, April 15, 13