Tip:
Highlight text to annotate it
X
Hello this is John Locke for Lockedown Design.
Today, I want to talk to you about how to design
a website from start to finish, and cover all the steps that are included.
Let's say you've got a client. They call you up,
they send you an email...they need a website.
And they are choosing you to do it for them. So, the first thing you are
going to do is have a consultation meeting. You listen to what they have to say.
You listen to what their goals are for this site.
You find out who their intended audience is
for this site. Sometimes you have to ask the right questions
to get the right answers as well. So now, you've got your list of primary goals;
you got a list of secondary goals, and we know who were trying to reach.
We know what it is that we want them to do
once they get to the site. We've also asked our client
in this meeting, a lot of questions.
You know, how soon do we want this site? What kind of budget does this project have?
Do we want the site to be responsive?
(Hopefully that answer is yes)
And we ask the client some things like, "What are some sites that you admire?
What are some websites you dislike, and why?
Phase two: We've got to go and do some research.
We're going to do some research on the target audience. We do some research
on the websites that they want to be like,
and on the websites that they want to avoid being like. We figure out the function- you know-
some the functionalities. What are the things that these websites are doing right, and the
other websites -
what are their opportunities? And how we can make a better site?
How we can make a website that competes with the best of these competing websites.
And offer something unique. What is our competitive edge?
So we figured that part out. The next step: Figure out
the information architecture.You land on a home page
and
you are offered choices of what to do. You can go to a different page -
you can - do different things.
What is the primary thing that we want them to do?
And what are the secondary things that we want them to do? We're going to create
a hierarchy within the website,
with the pages. We figure out - from the home page where they go-
and from those pages, where do they need to go. What are the actions that are taken?
For example, on an e-commerce website, you have to plan out all the steps.
We figure out what is going to go on each of these pages.
At the same time
we let the the client know that we are going to need the site content at a certain time by
a specific day.
Because we are going to be putting into our developmental website and we need that
in order to produce the live website. So far, we have figured out
our page hierarchy. We have figured out our information architecture.
We have figured out how this FLOW of pages
is getting us closer to the goals that we set out to accomplish in the beginning of the project.
Now-
we start figuring out the layout of the actual content on the page.
With each of these pages- how does that contribute to our goal.
We configure elements. Here's a picture, here is some text -
Here's a button that says "Go do this action". or "Buy this item",
"Go do this", "React", "Go to the next page", "Learn more",
"Read our story", "Contact us"... something!
We begin laying out these elements for each page with the intention
of leading our users in a certain path, to get closer to that goal.
This is the wireframing process.
We're not worried so much
about specific content quite yet, but we have the layout of the content figured out.
To the point where it looks good; it makes sense, and it's telling a story.
It's leading people down a path to the next step.
Next stage: we do the visual design.
If this is a branding project as well, we will
align the branding to tell
the story of this brand, this product, this person...
and make the colors, the fonts, the branding,
the logo - all cohesive, in order to tell one story.
If the client already has a logo, if they already have colors,
and fonts that are part of their identity...
then we use those. We position those in with their real content...
with the content that we needed - the pictures,
the words, the stories,
the blog posts, items that we have for sale,
the pictures of those, item descriptions...now we plug all those into content areas.
It is very important to have the content
at this stage. Right when we are going to
the developmental stage, because this is the stage we are at right now.
We are building out the functionality in a real website.
We are building out the website to where it can be seen by ourselves and the client.
We can make adjustments right now. We need the content right now
and I'll tell you why...Sometimes the way that
the web developer imagines the content is going to be used...
as far as new content...when the client is crafting new content...
and the way that the client is intending
to create new content...These can be slightly different
These cases are adjustments that we need to make as far as content layout.
So it is important to have that content ahead of time. Okay, we are building up the site...
this is a developmental stage.
We are building out the website in code: HTML, CSS, JavaScript,
PHP, MySQL.
We are making this website responsive for tablets and phones.
And both
the client and myself can look at it during this stage.
They can give feedback. They can let me know
things I need to know at this point.
They can add dummy content...
As if they were going to add more content,
as they will in the future, and we can see how that works.
You do cross browser testing; you do cross device testing...
I test on Safari, Internet Explorer, Firefox, Chrome,
Opera. I test on all of the various phones and tablets -
Android, iPhone, iPad, Samsung
we test it all...big screen, too.
After making sure it looks good, and making sure it works.
Now you have
the client at this point, create some new content and make sure everything
still works.
We test everything, if it passes that test
then we are ready to go. Now we deploy the website.
I push it from my developmental server
to the live server. Usually this is their
client server,
occasionally it might be my own server and
It is live. The website is live. I make sure your domain name is
pointing to the website. I make sure everything's working...
and we make sure we announce it to the world. "Hey, we have a new website launched."
We blast it out on social media, and make sure the client is doing the same.
Big announcement - Huzzah.
We make sure that client is trained and fully up to speed
on how to use their site. I usually give them
an instruction manual - I build one -
A PDF with instructions for each specific part of the website:
How to use it, and how to take care of it... maintaining it, how to add new content.
Ideally, I will also have a chance to walk through it with them,
and make sure that they know how to use everything -
and make sure that they're trained...and make sure that there are no questions left
as far as how to do certain things.
Then it's a wrap up meeting.
We have a wrap up meeting for the project.
We talk about how the project went,
which things could have gone better, and pat ourselves on the back
for the things that we did right.
This is an important step.
Web sites just aren't one-offs; they are business relationships.
You want to make sure that you are always taking care of your client,
and that your client can trust you, and always turn to you.
And you know, these business relationships matter.
So you know, we do a wrap-up meeting and leave the door open for the future.
We're all good to go. And that's how you make a website.
If you have any questions you can get a hold of me:
My email is john@lockedowndesign.com - The website is lockedowndesign.com
of course.
Thank you very much. Peace.