Designing & Developing Websites

Watch This Lesson

 

Lesson Overview

In this lesson, we’ll discuss the primary service you’ll provide: Designing & Developing Websites.

I’ll share 3 tips to make this process a success:

  1. Creating an Initial Mockup
  2. Responding Favorably to Feedback
  3. Adding CSS
  4. Avoiding Scope Creep

 

Lesson Transcription

Welcome! I’m Leighton, your webmaster. In today’s lesson, let’s talk about the primary service you’ll provide: Designing & Developing Websites. So we discussed how to do this in the 2nd set of lessons in this course. At this point, you basically know how to build a website, how to design and develop one, where to go for design inspiration, how to make it mobile friendly, search engine optimized, and add in eCommerce. But now that you’ve actually earned a client, it’s time to put that into practice. Once you’ve moved a client to the “Building Site” column of your Project Timeline, what’s involved? Let me share 4 tips to make this process a success: Creating an Initial Mockup, Responding Favorably to Feedback, Adding CSS, Avoiding Scope Creep.

  1. The initial mockup. Once you have your client, you’re paid, you’ve got your server prepped, you’re ready to start designing! There are 2 different scenarios here. If it’s a brand new website (perhaps for a new business), you’re looking at a blank canvas. Otherwise, the other scenario is if they already have a website and you’re re-designing it. In that case, you already have something to reference. Either way, the Design Inspiration lesson of this course has some great tips on where to go for design inspiration. But what if you don’t feel very inspired?  You’re staring at a blank canvas and nothing’s coming to mind?  Or you start adding images and text and nothing looks good?  That’s okay!! It’s like cooking an elaborate meal. Sometimes you’re in the mood to cook something amazing, entrees, appetizers, dessert… and other times… you just wanna get takeout. Point is: You don’t always feel inspired going about your day-to-day routine, and when designing a website, you won’t always feel creative, and that’s okay. Every professional designer on the planet knows that feeling. My suggestion is to take a break! Get outside. Take a walk. Exercise. Get adrenaline flowing. Listen to a podcast. Sleep on it. When you revisit the project at a later time, the right idea just might hit you! And if you do feel creative all of a sudden (we call that being in a Creative Flow) jump on it. Design as much as you can while you’re in your flow. That’s when you pump out your greatest work! Overall, though, the quickest way to inspiration for me personally is to look at other websites. Browse the Web for beautiful sites, whether they’re in the same industry as your client or not, and you’re sure to get those creative juices flowing. Whatever you design, I want you to strike a balance.  A balance of what?  Spending too much time on your mockup… and not enough time… Too much time, and you’re wasting your precious time, especially on a mockup that your client might completely change… But too little time, and you risk sending over something that looks weak. A mockup is your first impression. You need to WOW the client! Ideally, they’ll be impressed with the design but request a few changes, usually things you wouldn’t have known anyways, like wording adjustments or swapping out photos. So find that balance. Don’t spend too much time on a mockup, but spend enough time so it looks impressive. And finally, before sending the mockup to your client, bring in an extra set of eyes. A family member, friend, whoever you trust, bring in the perspective of somebody who isn’t you, isn’t emotionally invested in the project. See, the more you stare at your project, the more blind you could become to something that seems obvious to another person. And I can’t overstate the value of showing your mockup to someone of the opposite gender. Females will see things that males might overlook, and vice versa. So find another balance: The balance between having too many cooks in the kitchen, and blocking yourself from the input of others. One or 2 trusted associates should do the trick. And finally, for the most part, I like to design just the homepage before moving on to the other pages, just in case they want to go in a totally different design direction. Once we perfect the homepage, we move on to the other pages.
    Takeaway #1: Design the initial homepage mockup while you’re in a creative flow. Make it look attractive without spending too much time, and ask for the feedback of a trusted family member or associate.
  2. The second step is after you send your initial design. The ball’s in their court to provide feedback. Sometimes, you’ll get 1 or 2 things, and other times you’ll get a few paragraphs of changes. Understand that these changes are usually a lot easier for you to do than building the mockup in the first place, so this should only take a fraction of the time. My suggestion is to respond favorably to the feedback. This is the client’s website, not yours. Imagine if you’re picking out paint with a general contractor. How would you feel if the contractor insisted on a certain color, even though you’re the one who has to live with it??  And you’re the one paying for it??  See, ultimately, your client is the one paying, and it’s their website, their business. So let them have their opinions, their feedback! Serve them by making all the changes you’re able to, and make them in a timely manner. The sooner you respond, the better the client will feel about you. With open dialogue and back and forth revisions, you will sail through the design & development process!
    Takeaway #2: Respond favorably to feedback and promptly make the changes requested by your client.
  3. Some of the changes might require CSS, or Cascading Style Sheets, which we briefly discussed in the Coding lesson. Do you remember talking about CSS?  This is a relatively easy coding language and allows you to fine-tune the design of your website. Fortunately, CSS editing is built into Divi. Let me show you some of the areas where you can play around with CSS.
    (DEMONSTRATE Divi Design Tab, Advanced > CSS, Custom CSS Per Page and Additional CSS in Theme Customizer and Theme Options)
    Takeaway #3: Learning and applying CSS is vital to fine-tuning the design of a website.
  4. The final tip for the design & development process is to Avoid Scope Creep. Have you heard of Scope Creep?  Let me explain this by painting a picture for you: You’ve spent a couple weeks designing your client’s website. You’ve gone through a few rounds of revisions. They’ve added a few more pages to the site. Then they want a Blog, which you didn’t agree to at first. Now, they’re asking for eCommerce since they have a few products they want to sell online. You didn’t discuss that a few weeks ago, you didn’t put it in your proposal, nor did they pay for that feature. Can you see a problem here?  Can you see how that would be annoying?  Time-consuming?  And possibly rude?  See, you made an agreement to provide a set amount of services at a set price. When they go beyond that, that’s called Scope Creep. They’ve “creeped” beyond the “scope” of work you agreed to. So how do you handle this?  Address it. Be straight with them. Respectfully explain that what they’re requesting is do-able but you’re going to have to either quote that separately or track & bill your time. At that point, the client is either going to nix that idea or allow you to quote it. You win either way. So don’t be afraid to address scope creep when it happens.
    Takeaway #4: When the client has “creeped” out of the “scope” of work agreed upon, address it, and send a quote for the requested updates.

RECAP: What have we learned about the design process?

  1. Design the initial homepage mockup while you’re in a creative flow. Make it look attractive without spending too much time, and ask for the feedback of a trusted family member or associate.
  2. Respond favorably to feedback and promptly make the changes requested by your client.
  3. Learning and applying CSS is vital to fine-tuning the design of a website.
  4. (When the client has “creeped” out of the “scope” of work agreed upon, address it, and send a quote for the requested updates.

I’m Leighton, and now you know, How To Design & Develop Websites!

 

Lesson Homework

Check out some tutorials, courses or videos on CSS. You’ll use CSS to refine your designs.