Advice for designing a company website – with Webflow

– When you’re a designer
working in a company often you’re gonna be in
charge of the company website. I’ve worked as an in-house designer for many years now and in this video I wanna give you some advice for working with stakeholders to get the
content for your website. And also some tips for
designing and building a site that is going to promote
your company services and hopefully attract more customers. (piano music) A basic company website
will have four main parts. A home page, page about your services, a page about the company and a page for customers to contact you. This is by no means an exhaustive
or a prescriptive list. Your company website might
need more or less pages. But it’s a starting point. And I think you should
have this in a website plan or a site map as you
approach your stakeholders to talk about what is
needed from your website. Because having this
will be a starting point for a conversation and it’s much easier to start with it than a blank page. Now as you have this conversation
with your stakeholders the important people in your company, I want you to remember you
are the website expert here. And so you need to guide
them on what’s gonna be best. Bring your knowledge of
website best practices. Bring your understanding of the company that you work for as well. You’ve got a great advantage of, you know, working in the company, so you
know the services really well and you’re gonna have a better idea of the job that the website needs to do. So you can really work together to figure out the best
solution for your company site. For the purposes of this video I am pretending that I work for a regional paper supply company called Paper Company, Inc. I’ll bet you can tell what TV show I’ve been watching lately. I have designed a company
website for this fictional place and I just wanna take
you through a few points in the design and build process to give you some advice
on what to look out for to be successful in doing this yourself. So after you’ve made a
plan with your stakeholders of what pages your site needs and you know, what the goals of it are, the first thing to do is get wireframing. The way I like to wireframe
for a company website is to use just gray boxes in the layout, but descriptive placeholder copy. Now the reason I do
this, just use gray boxes instead of any placeholder imagery or you know, starting to pick
colors or anything like that, is because then people will get hung up on those points of the design and you could end up debating like the color of the header or if this image should go here, or whatever. Those little design details
that really don’t need to be talked about in this stage. When you’re wireframing you’re trying to get a sense of the
structure of the page that you’re gonna be designing. So if you just use gray boxes then no one is gonna think
it’s the final design and get hung up on those details. Descriptive copy is good though. Rather than just placeholder dummy text. Because this is gonna
give your stakeholders a sense of what’s gonna be
talked about on each section. That way they’re gonna have a better judge of if there’s enough space in the design for the messaging that needs to be gotten across with the site. And they’re gonna be able to give you better feedback on that. And you really do wanna be clear that you’ve allowed space
for all the messaging that they need in the
structure of your design before you move on to the visual phase. So I’ve been through
the visual design phase of Paper Company, Inc.’s website and now I’m gonna dive into web flow, where I’ve started to build it out and point out a few things to you in here. So, this is what my
website is looking like. Hopefully you can see how
the wireframe came to life. Paper Company Inc.’s brand color is navy. But then I’ve used this
orangy red color here for Calls to Action just to
make them stand out a bit more. The first thing I wanna dig into and make sure you’re focusing on is how your design is gonna
look at different screen sizes. As you can see here, as I toggle through these different browser wits, mostly my design is resizing
itself quite nicely. Webflow does a lot of
things automatically, but there are a few points
where I’m gonna need to go in and manually override some stuff. This section here for example. So on desktop, I’ve used this
pretty common design device of alternating text and images. You go down, it’s a good
way to keep people reading and get across main
points about your company on the home page. Because the way it’s
set up with image, text, then text and image. When the browser resizes
and everything stacks this one here, the
image is below the text. But I actually want it
to match the other two. So what we can do for this is use Flexbox. That’s also gonna help me center my image with the text there. Because I know things a
looking a little bit off there at the moment. All right, so I’ve
named each of these rows with a class home-row. What I’m gonna do is change
the Display settings to Flex. Then I’m going to click
Center Alignment here. As you can see those
images popped into place. And now when I go down to
this mobile landscape view as you can see, instead of
stacking like it was doing before they’re staying next to each other. So what I wanna do here
is change the Flex layout. Just at this point to Vertical
rather than Horizontal. And now to solve this
problem of the image, I’m gonna click on Home
Image which is a class I have on all the images. I’m gonna select Override order. Which as the name
suggests is gonna override the order that the code is in and instead place the image first. I could also place them
all last if I wanted to. But I like the way it
looks above the text. So that’s you designing
your company website. Make sure you’re keeping in mind how it’s gonna look on different devices and any changes you might need to make to the structure of things to look best on those different devices. Another thing to consider
with your company website is that it’s gonna change. You’re not making a website that’s gonna stay static forever. You’re gonna need to update it. You’re gonna need to
add text, add services, add team members, things like that. You wanna make it really
easy to make changes and build with that in mind. A great way to make adding
to your website super easy is to use CMS Collections. Basically, this groups
content and allows you to showcase it in a list easily. It’s what I’ve done on my
services page for example, if I just head to this one. So all of these services that you see here that Paper Company Inc. offers are here in a CMS Collection of services. I just enter the name, the
image and the description and it shows up in that list. I’m gonna show you how this works by creating a CMS Collection
for the team members at Paper Company Inc. That’s often a situation where you need to just to be able to quickly
add someone to the site when they join the team. So let’s make a new Collection
called Team Members. Now what we’re gonna need is their name. We’re gonna need an image for them. We’re also gonna need to add their title. And so I’m just gonna
add that in plain text. Now wait one second while I add
my team members to this CMS. Ready? (finger snap) There we go,
all my team members are added. The magic of editing. Now let’s add then to the About page. So what I’m gonna do is
add a collection list into this container. Gonna take it for all the
team members collection. And I’m gonna arrange them in columns. So let’s say all three. Now I’ll add an image to one of these and connect it to the avatar field. Add a heading. The team member name. See, so all of the data
that I put in the CMS is displaying on the webpage. So I’m just gonna change
the order of them though, so that our Regional Manager is first. Now let’s style this a little bit. So if I click on a collection item and I add a class called Team Member, that’s gonna apply to all
of my collection items. Because whatever I do to one is gonna automatically apply to the rest. Firstly, let’s center it. I’m gonna take the image. I’m gonna make it round by
putting it 50% radius on it. And let’s just add some
margin to the bottom of each one too. There we go. Now, we have all of our
team displayed on the page. And it just took a few minutes. And using this CMS for this, rather than having to add
an image, add a heading, add the text block or
whatever every single time you’d add a new team member.
It’s just gonna be a lot faster and lot smoother process to
keep your website up to date. So I’d say that’s in
pretty good shape now. We’ve got our homepage with our late main benefits on it. We’ve got our services page
with things that we offer. Our about page with our people. The last important point
that you need to focus on and it’s probably the most important with your company website is what the Call to Action is. What do you want the person viewing your website to do next? Your website needs a purpose. And usually for a company website the purpose is to generate new customers to get them to purchase something. A service, or a product or whatever it is. So always have that goal in mind when you’re designing a page. For that reason on my
website I’ve included this Call to Action footer section, that has a orange button on it that says, Help Us Help You. Probably not great copywriting. So don’t take that example. But the point is that
when you get to the bottom of the page there’s a clear direction of what you’re suppose to do next. Which is click on this button. Now what I want this button to do if I come into editing mode. This is a symbol that I’ve set up, so if I edit it here
it’s gonna edit across, update across all of my pages. Okay, so what I wanna do with this link is link it to our Contact page. That’s gonna be the main
thing that I want people to do on Paper Company Inc.’s website. So now the last thing I need to do to finish with my site is
add a phone to this page so that people can actually contact us. And come in here and add a
phone bot into this column. So the phone bot automatically has name and email but I
wanna add to it a space for them to type a message of course. Let’s put in that and
label for that field. And then, you know what, let’s get people to sign up to the Paper
Company Newsletter as well. I’m just gonna add my primary button class to the submit button and then
it’s gonna match the others on my site. Great, and let’s just
edit these labels here. I’m gonna type. So there we go. Now, if our potential
customers like the look of our services they can
come here and message us and we can get in touch and hopefully make a sale. I think one last thing I
want to add to this page, because it’s a little
bit plain on its own. On my home page I have a
quote from a happy customer. So what I think I’m gonna do is just duplicate this section. And bring it over here. There we go. Now, as
they’re filling in the form they’re gonna be seeing a message from another happy customer, and hopefully that will put
them in a good frame of mind for purchasing. It’s always good to bring in testimonials from existing customers to your website. It can just give a bit of social proof and make people feel
reassured in the decision that they’re making to work with you. There we go. That is Paper Company Inc.’s
website all ready to go. We’ve got our home page. We’ve got our services page. Our about page with all of
our lovely team members on it. And our Contact page with a form. A company website is
never really finished. You’re always updating it. Always improving it. And that’s actually one
of my favorite parts about being an in-house designer
is that you are able to improve on the work you’ve done. You can track how people
are using your site with Google Analytics or
you can do user testing and make improvements based
off the things you learn. So that you’re always working to make your company website better. I hope you enjoy this video. I hope you got something useful out of it. And got to see a little bit of my process when I’m working with my team in-house on making company website. I hope some of the advice in this video will give you the confidence to own it and go ahead a create a
company website yourself. I wanna say a huge thank you to Webflow for partnering with me on this video. As you can see they’re really great tools to use for building websites. All in all, this whole
project only took me a couple of hours. So I would highly
recommend you get in there and check it out for yourself. You can do that for free
using the link on screen right now or in the description. Go ahead and build your own
website for Paper Company Inc. That could be pretty fun and
show me what you come up with. All right, thank you for watching. Give the video a thumbs
up if you enjoyed it. And if you’re new to my channel, I make new videos about
design every single week. So click that subscribe button. And hopefully I’ll see
you in the next one. Bye. (upbeat music)

, , , , , , , , , ,

Post navigation

21 thoughts on “Advice for designing a company website – with Webflow

  1. Something in the background is running a fan, a computer or what not, and I can hear it on the voice over. I just thought you'd like to know for future edits.
    I have no issue with it, but I thought I'd comment on it, in case you wanted to improve your video quality. 🙂

  2. Another great informative and helpful video, Charli! You’re my favorite web developer channel! This helped a lot. Thanks!

  3. This is such an awesome video! I want to try webflow so bad for my own profesional page, so thanks for the tutorial/ tips! 🙂

  4. Thanks for the new video Charli, stumbled upon your videos a few weeks ago. And they are already promoted to "Starting the day with a cup of coffee and a nice video", video's. Keep up the good work 🙂

  5. Thank you Marie . I work for Corporate America, and I cannot wait to become an in-house designer for my company. I love your style and listen to the podcast often. You and Femke rock !

  6. I LOVE your videos. In fact, I can hardly bare to watch other online tutorials because they all suck compared to your light yet informative videos. I have a request – can you pretty please do a video on InVision? I work remotely and think it could help my workflow. I am curious to hear how you use it and how you find it beneficial when collaborating on projects. And more Sketch! I am about to give it a try and love learning from you. Thank you! PS Your hair freaking rocks.

  7. Hi Charli, I recently found your channel and it's amazing!! I'm a brazilian graphic designer and I'm going to switch to webdesign because it has more oportunities and for me is very cool working with interactivity and digital aplications. I would like to know if you think that is a good area to work nowadays, because there is some tools to build websites without coding and many people are building their own websites using wix, wordpress or mobirise.

  8. Hi Charlie, nice review. I have some serious questions and would appreciate some answers plz. I am currently seriously thinking of attending a few short but intensive in-class practical web design courses in Html, CSS, Javascript, Responsive Web Design. I am also thinking about attending after that a short WordPress in-class course. Then for the backend some short courses in PHP, Python, and SQL. But I am confused!!! My questions are;

    1- What about starting freelance web design for small local businesses using WEBFLOW? This is after a grounding in Html, CSS, and Javascript. Then studying how to use Webflow efficiently by way of their tutorials and the Webflow Masterclass by Ran Segall, and upgrades to get white-labeling. Then look for a few small local businesses that have bad quality websites or are not mobile responsive, then re-designs them using their logos and offers to sell them to them for a low but sensible price and ask for a small monthly fee to cover hosting, domain name if needed, maintenance and so forth. This would build up a nice small portfolio to showcase on the Freelance Web Design Website that is only just starting out, then advertise using social media and research for more local businesses. Then up the 1st payment price just a bit and give the same monthly package. Maybe later offer extras such as local lead packages. Any advice or tips or things to be wary of?

    2- For Webflow, do we need to know backend coding or is it all taken care of by Webflow?

    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *