Web design and web development can sometimes merge into one. Especially with all the website builders and templates out there today.
This blog post will answer the question, what’s the difference between web design and development by looking at design and development separately, the problem with website builders and templates.
Once we’ve perambulated the above, we will look at why you should separate web design and web development and why you should ultimately use a professional agency when having your business website designed and developed.
Without further ado, let’s get to it.
Design
First off, let’s talk about design. Design happens before development, as without design, there is nothing to develop off of. But, before the design can actually commence, there are a series of steps that need to be completed.
What is Web Design
Web design is the process of having your business website’s site map, structure, user journey and mockup created. The web design process can be broken up into two primary parts. The discovery session and the actual web design part.
The discovery session is absolutely crucial in order to get your business web design just right.
Because it’s so important we will discuss the discovery session in this post. Generally, your web designer will be involved in this process. They need to understand you in order for them to design a good website for you.
The Discovery Session
The discovery session is designed so your web designer or agency can learn more about you and for you to learn more about them. The things we learn about you include:
Your business
The type of website you need
Website visitors
The user journey / What actions you want your visitors to take
Your website goals and objectives
Marketing/content
There are different aspects that need to be discussed during the discovery session, some things are business-related. This post is focusing on web design and web development, so we will focus on just that. If you’d like more information on the business side of things, see this post .
For the design related stuff – the reason we need to learn about you is so we can determine the best type of website for you (the purpose). You see, there are different types of websites that your business can have.
Your Business
Your web designer or agency need to know what type of business they’re working with. Every business is unique and needs different requirements. The business you have, how you operate and who your business targets will impact your website design.
Your business website not only needs to work for you but for your customers. Your designer will make sure the design works for your customers and your developer will make it easy for you to use.
But for this to happen, they need to know all about you and your target market.
During the “business discovery”, your agency or freelancer will get to know:
What it is you do
Your unique selling point
What you offer/sell
Who you are targeting
What you are struggling with
What you are excelling with
What your business goals are
Let’s look at an example to generate a better idea of how this session would go
Your business may be a photography business and your unique selling point is simply how good your photos are. You may be the best in the area.
As a matter of fact, we use CentreStage for our video content.
As a photographer, you would offer photo packages and are targeting customers who would like dance, portraiture, commercial or personal photos (quite a wide range of audience).
Your struggle could be your online presence and need a website. You may be excelling with the work you are producing, but have no real means of getting it known.
Your business goals could be to expand or simply get your business known.
Once your business has been understood, the type of website you need can be identified. For a photographer, it could be a brochure website.
This type of website would need to make it easy for potential customers to see your work and get in touch. This is what’s expected – a website that is effective at showing off imagery and has a high level of ease-of-use.
The Type of Website you Need
Brochure Websites
Brochure websites are designed to show your customers exactly what your business is all about. Brochure websites are a simple website solution that pushes your business online, without any added complication. Take a look at Centre Stage’s website mentioned above, we designed and developed this website for a local photographer. This allows Centre Stage to show off their work and let users know what the business is all about. It also allows potential clients to get in touch with Centre Stage.
Don’t be fooled by the word simple. Brochure websites, or any type of website for this matter, are complex things to design and build. But, the end result is a simple yet extremely powerful solution to get your business known. Simply because anyone can visit your website and find out more about you. They are also simple (easy) for you to edit/update in the long run with the proper training.
eCommerce Websites
eCommerce websites allow your customers to buy from you whenever it’s convenient. It’s important that your eCommerce website sells, without creating friction or complications for your visitors. Your business needs an eCommerce website if you’re selling anything directly to customers. This can be physical products, digital products, it can even be bookings. There are no limitations to what you can sell. We at Canny use WooCommerce .
Landing Page Websites
Landing page websites are great if you are starting up a new business or launching a new product/service. Landing pages need to capture your audience’s attention as soon as they land on the landing page. They need to get to the point relatively fast and allow potential customers to easily get in touch with you. Take a look at My Orchard– we designed and developed a landing page for their business.
Sign Up Website
Sign up websites allow your customers to easily sign up to a product/service your business provides. They need to provide concise information allowing your customer to understand exactly what they are signing up for. There’s nothing worse than that dreaded feeling when signing up to a lengthy two-year contract. Take a look at Happy Balance Life’s website, this website allows customers to sign up to a service .
Website Visitors
At this stage, it’s known what your business is all about, who you are targeting and what type of website you need. The next step is defining the user journey.
The User Journey / What actions you want your visitors to take
The user journey is all about the path the user can take to reach their goal. This will influence the design of your business website.
The user’s goal is what your website’s primary goal should be. For example, if your user’s goal is to make a purchase – your website goal would be “allow customers to make a purchase” or if your user expects to sign up to a service your website goal would be “allow customers to sign up to our newsletter”.
This is just a top-level view of goals, there is much more to this .
To get to the point the user journey is about awareness and consideration.
Awareness is discovery – where the user finds you and your products.
Consideration is where your users are deciding if they want to purchase from your website or get in touch.
Your website needs to be visible to users and capture their attention, it needs to be the website users use over other websites (your competition).
Here’s what’s generally involved in a user journey
User profile (deduced from your target market)
Define a scenario and any user expectations
Identify all touchpoints
User actions and interactions with your business, products/services
This includes any call to action
Awareness and consideration
How users will find your site
Identifying what motivates your customers to make a purchase will make this successful
You will know this from the above steps
Once the above steps are completed, your website’s funnels can be created. A funnel is a process of attracting customers and guiding them to take action.
All of this can be visually represented in a user story, site-map, wireframe and mockup.
Call to Actions
Before moving onto the site map, wireframe and mockup, it’s worth touching a bit more on call to actions. As we know, during the user journey discussion all the call to actions can be identified. These are the areas that will lead to your website’s conversion rate.
Simply put:
E-Commerce – the call to actions would be: buy, add to cart, order, shop now or view options
Newsletter – the call to actions would be download or subscribe
Brochure – the call to action would be to get in touch, contact us
The call to action buttons need to be in the appropriate places based on your user journey. They should not be put in random places. Funnels need to be created.
Let’s look at an example to get a better idea.
Looking at CentreStage’s website. The user I presented with “featured” photos as they land on the home page. From here, the user is taken to the gallery of work. Once the user is in the gallery of work, it’s easy for them to get in touch with CentreStage.
This may sound simple, but the way the user interacts with each element, what the elements look like to the user and the positioning of elements and more have an impact on the conversion rate of your website.
Solutions that look simple and are simple to use generally come from extensive research and understanding.
It’s the websites that get your frustrated that have not been properly designed and developed. Everyone gets frustrated with poorly built websites, these are the websites you will either leave straight away as you cannot use it properly.
Seeking professional help will make sure your website does not fall victim to poor website design.
Getting funnels right is a large task. Investigation and research needs to be conducted .
All of this weight can be taken off your shoulders if you find a good agency.
Marketing/Content
Content actually plays a vital role in the design of your website. It’s a designer’s and developers dream when you come to them with content. They actually have something real to work with, if not, no worries. This is what content plans are for .
The reason content plays a vital role in web design is down to the fact, content needs to be readable on the webpage and the content needs to fit in with the webpage design.
This means the web page design needs to be designed around the type of content you have. It’s actually easier to design like this rather than trying to force content into a design.
Forcing content into a design can seriously make a good website look bad. Web design isn’t just about the design of elements and typography, it’s about how the two work hand in hand together.
During the discovery session, it’s a good idea to get a handle on the content.
Wireframing and Web Design
A wireframe defines your website structure. It will be black and white that outlines:
The size and placement of elements
Any features and sections
Conversion and editable areas
Navigation
The user flow will be visually represented. If we take the CentreStage example from earlier – the hero section that shows the featured work will be outlined as well as the gallery it takes you to. The call to actions will also be visually represented.
A wireframe simply puts all the research into a visual perspective. You can begin to imagine how your website will look in it’s finished form.
Wireframes are also good at highlighting any flaws in a design. The perk of having a wireframe is that changes can be made efficiently.
This is much better than having to change things during development – it’s a much larger task changing the design of things in development than in a wireframe.
Once the wireframe has been created a high-resolution visual mockup can be created. This is where all the fancy pants colours, typography and media can be applied to the wireframe.
This is what your website will look like in its finished form.
So, wireframes and mockups will allow you to see how your website will look and function. Having something visual to go off after all the preliminary research puts everything into perspective.
Just imagine reading and comparing stats with no diagrams or charts. You don’t just want text explaining how your website will look and function, nor does the developer.
One vital step that your designer will carry out when creating the wireframe and high-resolution mockup is inspirational research.
Mood boards and style scapes will be created and presented to you (the business owner), from here a direction of design will be picked, then the designer will create a unique website design from your chosen direction.
Designer Skills
The skillset drastically separates the designer from the developer and vice versa. A designers skillset is
Adobe (software)
Used to create wireframes and high-resolution mockups
Design fundamentals
User Interface
User Experience
Observes other designs
Visualises ideas
Able to experiment with designs
Empathy
Communicate visual ideas verbally
Be able to conduct research
That’s all for the design section of this post. As you can see there is a fair amount of tasks to be completed before the development can begin. As soon as the high-resolution mockup has been created and signed off, development can begin.
Development
Development is all about the creation of your live website and bringing your website to life (the structure and style), making your website dynamic, SEO and tracking visitors on your website, making your website work on all screen sizes and maintenance.
The major difference between development and design is how your website is made up visually.
As designer will use Adobe design tools that have a drag and drop interface to create web page designs. A developer will use code to create your website.
There are two sides to the development of your website:
The structure and style
Making the website dynamic
Bringing your Website to Life (the structure and style)
We won’t get too technical with this section as we know not everyone understands code. So, all that you need to know is that the developer will use:
Hypertext Markup Language (HTML)
The structure of your website (think of this as the wireframe of your website but on the web)
Cascading Style Sheets (CSS)
The design and style of your website (think of this as the high-resolution mockup of your website but on the web)
JavaScript
The functionality of your website (think of the annoying pop-ups that appear as you are about to leave the webpage, or fancy effects when you click on a button, or any calculators – finance calculators)
PHP Hypertext Preprocessor (PHP)
This simply makes your website dynamic (when you write a blog post, a bit of PHP will retrieve your new blog post and output it on the front end of your website)
WordPress (the content management system)
This allows you to log in to your website and update/edit it
This is drastically different from using Adobe software to create a wireframe and mockup. It’s the stage where your website really starts to come to life.
Making the Website Dynamic
This is the important part. Dynamic simply means your website is not static. A static website never changes a dynamic website does.
Take a blogging website as an example. Blogs will be added on a daily basis and these will show up on the blog listing page where you can click through to a single page.
Or with an e-commerce website, products will be added on a daily basis or update and deleted if necessary.
To be able to edit and update your website, you need means to do this. We use WordPress for every website we build at Canny. WordPress is a content management system that’s extremely flexible. Depending on your website requirements, all the important areas of your website can be made editable and editable.
To update a page or blog post on your website, with WordPress, you simply log in to the admin panel it provides and from there you can see all posts and pages. From here you click through to them and you will see all the text that makes up the webpage.
Take the about page as an example.
This page could have:
A hero section (page title and short description)
About information
Team section
Any call to actions
Now, in WordPress, if you were to go to the about page you’d be presented with the hero section, about information section, team section and any call to actions.
Now, with each of these sections, you’d be able to update any text or images within these sections.
But how does this translate to the front-end of your website?
To get a grasp on how this works, templates are used.
Let’s carry on using the about page as the example.
In WordPress, you can see what template is used for a specific page. On the about page a template would be used called the “about page”. It makes sense to relate template names to page names.
Now, as soon as you select the about page template for the about page you will see the relevant sections that you can update only for the about page.
In the actual about page template, each section is retrieved using the PHP language (mentioned earlier). So the hero section, about information, team section and call to actions are brought into the templates and outputted.
This, of course, is a very simple example and there’s more to it, but this example allows you to get an idea of what the developer does to make your website dynamic.
Search Engine Optimisation (SEO)
SEO plays a vital role in the overall success of your website and business. This isn’t the blog post to talk about SEO, but it’s the developer’s responsibility in making sure you can always optimise your website.
What we mean by this is that the correct semantic tools must be implemented along with properly structured HTML.
Before getting into SEO tools for your website. We would like to mention alt tags.
Alt tags are part of your images. Alt tags are bits of text added alongside your images. Your developer will make sure the alt tags are added to all of your images. But the alt tag text can be updated just like your about page content or blog posts). When adding images, always make sure you add the alt tag text (you’ll see an alt tag section in WordPress when adding your images).
Now to the tools. The primary tools that you should have installed are:
Google analytics
Yoast SEO
HotJar
Mail
Active Campaign, MailChimp etc.
Google Analytics allows you to track things such as your bounce rate or conversion rate
HotJar will allow you to track where your visitors click on your webpage, which areas of your webpages are getting views and which areas are not.
Mail software such as Active Campaign or MailChimp will allow you to create mailing lists and send out newsletters.
Yoast SEO is a WordPress plugin and it can analyse the content that you enter for your posts and pages. It tells you the readability of your text and allows you to add metadata (the page title and description that show up on Google).
If it sounds complex, it’s really not with the proper training.
The reason you want to use Google Analytics and HotJar is to track user behaviour. For example, you can set up A/B tests to test different text variations of a call to action button.
Different text can have different effects on people, having the correct text means the difference between an increased or decreased conversion rate. For more information on this, see the blog post link on A/B testing in the funnels section of this post.
Making sure your site works on all screen sizes.
The last two elements include making sure your site works on all screen sizes and maintenance.
A good designer will design for various screen sizes and a good developer will make sure the layout of your website adjusts appropriately based on the design.
This requires device testing. Testing is required because websites tend to look and behave differently on different browsers, devices and screen sizes.
Maintenance
Maintenance is important for any website.
When updating content any media needs to have the correct sizes and proportions and any text needs to have the correct text formatting (all of this is covered in training sessions).
Maintenance also includes updates. Updates are generally recommended to be left to the developer. This is because updates can actually break sites.
Developer Skills
Coding knowledge
Problem-solving
Take high-resolution mockups and bring them to life, like for like
Understand how to structure the site to make it easy for you to update
SEO
Know how to implement third-party tools (Google Analytics, HotJar, Active Campaign and MailChimp etc.)
WordPress / WooCommerce
There you have it. As you can see, the primary difference between a designer and a developer is that the designer designs your website and the developer brings your website to life from the design.
Why you should separate web design and web development
Now that you know the real difference between a web designer and a web developer, it’s time to understand why these two roles should be separated.
Remember at the start of this blog post we said “Web design and web development can sometimes merge into one. Especially with all the website builders and templates out there today.”
Well, it’s actually possible to have a website made without a dedicated designer or developer.
This is with the use of website builders and themes. The things you seriously should stay clear of if you’re serious about your business.
You should really give the above blog post a read. If not, here’s a nice summary:
In short, all of the website builders explored in this article are designed for a quick and easy way to get your website up and running into time at all
They provide you with powerful editors that allow you to change the layout, design and content for your website
Most provide you with hosting and domain names. But, as we found out this means you are generally locked into that one platform and migrating can be a headache
Take note of the “quick and easy way to get your website up and running in no time at all”.
There is nothing quick and easy about websites.
They take time to get the design right for your business and target market, they need to function and behave as users expect and you need to be able to efficiently update and maintain your website whilst making sure it’s properly search engine optimised.
You might have heard this before, “I can’t get my site to rank on Google”.
There are various reasons as to why websites don’t rank. One primary reason is that these website builders and themes allow none designers and developers to build a website and this is where the problems such as SEO issues can arise.
A couple of things that can affect SEO include the usability of your website and the content that’s on it.
If you are building a website using a builder you have the option to place the call to actions anywhere you’d like, as you know from this blog, you shouldn’t just place them anywhere. They need to be part of your funnels and need to flow as your users expect.
On the other hand, the one thing you should do is work with an agency.
There are of course agencies out there who use builders and themes – this means there is no dedicated designer or developer. They will more than likely have the designer design and build the website at once.
This is by no means a bad thing, you are still getting a professional designer designing your website. You are just not getting a dedicated developer. What this means though, is that some more complex features may need to be added that the designer does not fully understand.
This could be down to communicating with a third party system – an example could be sending form data to this system using a custom form.
But, on this premise, agencies that do use builders may still have a developer on hand. The best thing to do is to complete your research into the agency you’d like to work with.
Conclusion: What’s the Difference Between Web Design and Development?
From this article, we have discovered that design and development should really be separated from one another if not problems can arise from using website builders that let you do the whole process in one (especially if you are doing it yourself).
The reasons primarily because there is so much to the design and development processes and the designer and developer have a completely separate skillset:
For a reminder, the first stages of the process include:
Your business
The type of website you need
Website visitors
The user journey / What actions you want your visitors to take
Your website goals and objectives
Marketing/content
From here the developer can spend all their time developing the site from the high-resolution mockup making sure it’s fully responsive, works on all devices and behaves as you and your users expect.
If you are serious about having a website made for your business, get in touch https://www.canny-creative.com/contact-us/ .
The post What’s the Difference Between Web Design and Development? appeared first on Canny.
Read more: canny-creative.com