- 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)