Seven Core Competencies of WordPress Web Design Pros #WCATL

Transcription

1 + Seven Core Competencies of WordPress Web Design Pros #WCATL

2 + About work: new tricks web design who: dog lover, boss, wife & mom known as: truth teller, psychologist, strategist, designer website:

3 + About You What is your growing edge?

4 + Successful Web Design Process Conscious Competence Model

5 + Web Designers Learning Curve Unconscious Incompetence You Don't Know What You Don't Know You ve made a website or two and are proud and excited about what you ve accomplished. But, you have no way to accurately judge the quality and don t know how far you are from doing good work. You like web design and think this would be a great way to make a living working for yourself.

6 + Successful Web Design Process Conscious Competence Model

7 + Web Designers Learning Curve Conscious Incompetence You Know How Much You Don't Know You have been building websites and are starting to realize it is not as easy as you thought it would be. You start to get discouraged because it is hard to deal with the anxiety when you are confronted by yet another thing you don't know. You wish you had a systematic process for learning and a way to feedback from experts when you need it.

8 + Successful Web Design Process Conscious Competence Model

9 + Web Designers Learning Curve PRO Pro Competence You Know What You Know You know what you are doing, but it takes a lot of effort as you continue to learn. When you complete a project you are confident in the quality of your work. You are charging a decent rate. Your clients are happy with the results you achieve and they refer to you.

10 + Successful Web Design Process Conscious Competence Model

11 + Web Designers Learning Curve Unconscious Competence You Just Know Creating effective websites has become second nature. You are an expert in your field and sought after confident for the quality of your work. You are able to push the envelope of design and development You are a teacher and role model.

12 + PATH TO BECOMING A PRO

13 + 7 Core Competency Areas of a Pro Web Designer Develop a Strong Foundation and Get the Results You Want

14 CORE COMPETENCY 1. CLIENT/BUSINESS MANAGEMENT -Marketing -Discovery -Pricing Websites -Proposal Development -Contracts -Project Management Skills -Management of Client Expectations

15 CORE COMPETENCY 2. USER EXPERIENCE & USABILITY -Study and keep up with the latest research on how people use websites, what they like and don t like and what works for certain goals and what doesn t. -Be armed with data about best practices on readability, navigation, scrolling, parallax, moving parts and pieces, stock images, sidebars, footers, opt-ins, contact pages. About pages etc.

16 CORE COMPETENCY 3. DESIGN SKILLS -Web Specific Design -Branding -Creation of Logos and Graphics -Color sense -Use of typography -Use of white space -Web elements buttons and opt-ins for conversion -Long form sales pages -Website image selection

17 CORE COMPETENCY 4. ONLINE MARKETING 1. Knowledge of online sales methods 2. Content Marketing (Blogging, Newsletters Creation of lead-gen opt-ins) 3. Planning and testing sales funnel 4. Ecommerce best practices 5. Understanding how site speed or free shipping affects results of online marketing 6. Search engine optimization

18 CORE COMPETENCY 5. MESSAGING & CONTENT -Home page content -telling the brand story in a way that resonates with the clients ideal customer. -Content audits leading to culling, adding or reorganizing content. -Pages and Posts - developing the information architecture. What type content and how to categorize and display to make it most accessible to visitors and easy for the administrator. -Writing for the web - how to insure your content is readable. -Developing the voice for a particular business.

19 CORE COMPETENCY 6. WORDPRESS SKILLS WP Technician - Uses a theme adds content and images. Not much design or dev experience to start with, can add on either over time. Web Designer - Understands site layout, fonts, colors, images, and overall branding needed to create a website with a theme. If interested and able, can add on dev skills with more experience. Web Developer - Expert in creating sites using code such as HTML, CSS, JavaScript, PHP, Perl, and Ruby. They take design mockups and make them work for the web. Experts in web standards creating specific functionality. If interested and able can create their own designs.

20 CORE COMPETENCY 7. TECHNICAL SKILLS - Installing and Configuring WordPress - Working with Domains and Hosts - Importance of One URL, Redirect other versions. -How to Migrate a WP Site -Backing Up WP Files and Databases - Updating Plugins and WP versions - Troubleshooting Techniques -Use of 301 Redirects to the Keep SEO of Old Site -Know Your Way Around WP Files with FTP -How to Use a Text Editor to Make Changes to CSS -How to Optimize Images -How to Improve Speed and Performance

21 EXAMPLES OF WEB CONTENT

22 + Story Before Design

23 + Brand Story Step One Character who want or needs something. nwho is your one main ideal customer and what exactly do they want or need? nwhat words does your ideal client use when they describe what it is that they want or need?

24 + Brand Story Step Two Has Problems Interfering with Getting Goals nwhat obvious problems do they have to overcome to get their needs met? nwhat are the underlying beliefs and negative thinking that may be sabotaging efforts to get their goals?

25 + Brand Story Step Three Meets an Experienced Guide nshow Your Empathy ndemonstrate Your Authority/Expertise

26 + Brand Story Step Four The Guide Gives Hero a Plan ndescribe the product or service to make it very simple ncreate a three step plan to get started.

27 + Brand Story Step Five Calls the Hero to Action ndirect Call to Action Call Us, Make an Appointment, Schedule a Meeting, Sign Up for a Demo nindirect Call to Action - An Opt-in Offer to get on the mailing list

28 + Brand Story Step Six What Success Looks Like nshow or describe what the character will be like if he or she takes action and works the plan with the guide.

29 + Brand Story Step Seven What Failure Looks Like nshow or describe what will happen if the character does nothing or works with the wrong guide. na little of the failure goes a long way.

30 + EXAMPLE OF A WEBSITE BRAND STORY

31 + Brand Story Call to Action in the upper right of the Website

32 + Brand Story Hero image with the message targeted to the ideal client using their words. Please no sliders! Primary Call to Action Empathy Message Empathy and Authority Statement Trust Builder

33 + Brand Story Demonstrates Authority Benefits of a Virtual Divorce Primary Call to Action

34 + Brand Story Provides the client with an Easy 3 Step Plan Includes Calls to Action

35 + Brand Story Empathy Secondary Calls to Action Footer with helpful information

36 EXAMPLES OF WORDPRESS SKILL DEVELOPMENT

37 + CHOOSING A THEME

38 + Biggest Mistake of Broke Web Designers Spending hours and hours obsessing over choosing the perfect theme for each new project.

39 + Choosing a Theme Instead... Choose a premium theme framework. Learn to customize it. Use it as the base for all of the websites you build.

40 + Choose a Premium Theme Framework Stay away from free themes or non-gpl compliant themes!

41 + Choose a Premium Theme Framework Purchase a premium theme framework from a reputable theme developer.

42 + What is a Theme Framework? Theme Frameworks use a Parent-Child concept for theme development. The base code for functionality resides in the Parent theme. Custom styling and any new functionality is added to a Child theme so that later when the parent theme is updated, the customizations don t get overwritten.

43 + Why Use a Theme Framework? nsupport with upgrades ncommunity of people to learn from nease of Development nbuilt-in Functionality ncode Quality

44 + Disadvantages of a theme framework? nthe good ones are not free nthere is a learning curve nincludes code for features you may never use

45 + What type of theme frameworks exist? nsome use widget areas to offer customization opportunities (StudioPress) nsome are drag and drop Frameworks (Beaver Builder Theme, Layers, Headway, Divi) ncheck them out at:

46 + CHOOSING A THEME FRAMEWORK - GENESIS Based on Widget Areas

47 + StudioPress Genesis Theme Framework n A great framework for development nuses Widget areas for layout flexibility n Not bloated like others with tons of options n Plays nice with most other plugins that exist nlots of support from StudioPress nover 50 Genesis child themes to start with n Customization plugins and page builder options

48 + CHOOSING A Genesis Child Theme - Example of Customizations of Divine

49 + Divine Child Theme Demo of Child Theme from StudioPress emes/divine/#demo-full

50 + Divine Child Theme Read the directions Didn t activate secondary menu Used the client s logo Added client s images and content

51 + Divine Child Theme Read the directions Didn t activate secondary menu Used the client s logo Added client s images and content Changed the top three images to one horizontal hero image.

52 + Divine Child Theme Had set up the site like Linda s in first example since money was an issue Her designer got involved and sent us 6 pages with customizations Had to create new templates for these pages. Client s don t know what is a small change and what is a ginormous change.

53 + Genesis Theme Customization Steps to Design Pro

54 + Choose a StudioPress Genesis Child Theme 1. Consider what type of site you are building: nblog nsimple business website nphotographer or Artists portfolio nnon-profit nweb design agency nfeminine or masculine branding

55 + Choose a StudioPress Genesis Child Theme 2 Consider the flexibility of theme s widget areas. 1. Some child themes have fixed home page widgets meaning you can for example add three widgets in a row. 2. Other themes offer many more widget areas. They are always optional so you do not have to use them. 3. Some allow you to add additional widgets to a widget area.

56 + Customization Journey with Genesis 3. Use Built in Theme Options & Client s Text and Images 1. Add client s logo 2. Choose colors, menus, and other options available in the theme s customizer 3. Choose how to layout the site using or not using home page widget areas 4. Add client s images and content to the site

57 + Customization Journey with Genesis 4. Custom Control Over Styling without Coding ngenesis Simple Edits - change the copyright text ndesign Palette Pro Plugin 1. Add Google fonts 2. Make change colors, margins, navigation and most other styling needs 3. DPP does not allow you to make changes to the page layouts. nnote- A Live Edit Text Widget - Add widget areas, create columns, make live text edits

58 + Customization Journey with Genesis 5. Changes to the Theme s Layout Use a theme customizer Plugin to make structural changes to the theme. 1. Genesis Extender 2. Beaver Builder

59 + Customization Journey with Genesis 6. Learn to Code 1. Make simple CSS changes using Firebug or other browser developer tool to see your changes in action and apply to your theme s custom CSS area in the customizer. 2. Make changes suggested by others to your customfunctions.php file.

60 + THAT S IT FOR NOW! Go forth and make websites