Web Design & Web Development: What Is The Difference?

Web Design Cape Town

Web Design & Web Development: What is the Difference?

 
A Brief Look and the Development Process

So, you’re a South African entrepreneur wanting to take your business online or a blogger needing to share your ideas and experiences with the world…. What’s the next step? For starters, how about setting up a website.

Creating a website isn’t only about making attractive pages, it’s about considering your audience and shaping a digital information structure that not only caters to their needs but achieves business goals as well.

Working with a dedicated, passionate, team of web designers that understands the inner workings of the production process, is therefore a vital part of achieving your online business goals.

Irrespective of who you are, knowing the basics of website development can be extremely helpful in this digital world. While building a state-of-the-art website may seem daunting, if you understand the process from beginning to end and the functions of the people involved, you’ll be off to a good start. So before we look at how a website is built, let’s establish what is a website exactly.

 

Websites

In a nutshell, websites are files kept on servers, which consequently, are computers that host sites. These servers are connected to a massive network called the internet otherwise known as the World Wide Web.

Websites are created and maintained to serve various functions and can be divided into two groups, static and interactive/dynamic. Interactive or dynamic sites allow interaction between the owner of the website and the user or customer visiting the website. Static sites serve or capture information but do not allow engagement with the audience or users directly.

Websites are accessible on a computer or mobile device via a web browser such as Chrome, Firefox, or Microsoft Edge. A site can be accessed directly by entering the Uniform Resource Locator (URL), informally termed a web address, or by searching it on a search engine such as Google or Yahoo. A URL is a reference to a web resource that identifies the site location on a computer network and a tool for accessing it.

 So now that you have a basic understanding of what a website is, let’s elaborate on two terminologies, web design, and web development. For the most part, people in South Africa and globally, tend to use both terms interchangeably, but are they referring to the same thing? Let’s clarify where each term fits in the vast World Wide Web.

 

Web Design

The term web design is generally used to describe the design practice regarding the front-end (client side) of a website i.e. the aesthetic portion of the site and its usability, rather than the back-end (software development side). Today, however, web design goes beyond aesthetics and includes how things work. It is not only used for websites but also includes web applications, mobile apps, and user interface design.

 

Web Development

Technically, web development is the broad terminology used to describe all aspects of planning, designing, building, and maintaining a site, such as a web design, web publishing, web programming, and database management. For the most part, there is a universal design process that is used in web development; With some variations, the process denotes the following guidelines:

  • Definition of “Website”
  • Website Design
  • Website Development
  • Website Deployment or Website transfers/setup
  • Website Maintenance

Now, let’s very briefly take a look at the development process –

 
Definition of “Website”

To stand out above the bustling Internet freeways of today, you have to devise a business strategy and a marketing plan. The best way to achieve this is to put together a business and marketing team. Whether it’s an in-house company team, a vendor, or a digital consultant, they should ideally be involved with the website from concept to execution. Let’s start with what is expected from a business and marketing team –

  • Setting goals and requirements for the site – The goals set for the business must be clearly understood by both the client and team and should be in the order of priority of the site. The business and marketing team should provide the top goals to set the site’s direction but will also need to provide a list of the site requirements and capabilities.
  • Attracting visitors – The team also needs to work out how to lead customers to the site. Directing people to your site is by no means an easy task; it involves search engine optimization (SEO), collaborating with other companies, and developing a cohesive online and offline strategy.
  • Determining the target customer – A marketing team is generally in close contact with a business’s end consumer, as such, they should provide a profile of the customer that the site is catering to. Once the targeted customer profile is drawn up, the information architects on the team will utilize the gathered information to develop a set of personas that will focus the creative team’s efforts throughout the process.

Website Design

In the same way that architects prepare blueprints for a building, two crucial tasks in this phase for any website, large or small, are to create –

  • a sitemap – which is a diagram showing all of the site’s pages and how they are linked and
  • a wireframe – a diagram showing a detailed view of every webpage on the site.
  • Information Architecture – The information architect plays a key role in developing a sitemap and wireframe. They figure out how the entire site fits together and how people will navigate through the digital web pages; they are also the ones that develop personas and conduct user testing later in the development process. These personas are fact-based, (gleaned from user research) but fictional illustrations of your users. They represent the goals, motivations, characteristics, and behaviors of the most important groups of people who come to your site. In effect, it’s the information architect that forms the blueprints for the entire site. This is a critical first step before you can get the ball rolling on your visual design.
  • Visual Design – With the blueprints in hand that delineate the principal site structure, it’s the visual designer’s task to extend a company’s brand image and character into a website look and feel. Visual design isn’t just about aesthetics; it can make or break a site’s impact and even its usability. A good visual designer doesn’t just color in the wireframes; they reposition elements, adjust relative placement and sizing of elements, and use good graphic-design principles of color, form, consistency, and layout to accentuate navigation and important content, and indicate how users should interact with each page. Let’s have a look at two types of designers –
    • Visual Designer – Rather than just forming a brand, visual designers perform a vital role in defining what goes into a brand’s unique identity. Not only do they create beautiful designs, but they also know how to explain design concepts and the decisions behind their work. Visual designers need to understand graphic design, user experience (UX), user interface (UI), and web design. They utilize tools such as Adobe Photoshop, InDesign, and Illustrator, and are knowledgeable in wireframe software. Many also know how to code, although it’s not a job requirement. They cover the following areas –
    • Images
    • Typography
    • Layout
    • Colors
    • Icons
    • Branding
    • Visual messaging
  • Web Designer – Web designers are a subset of visual designers, but for the most part work exclusively on a website. They work primarily with layouts and deliverables, including things like icons, infographics, logos, and presentations. They also need to be familiar with industry-standard software such as hello again, Adobe, and Sketch, as well as have wireframing skills. Their function is less about using code to bring a site to life, but focuses more on defining a site’s layout, color palette, font set, and visual themes; because most websites include a combination of Hypertext Markup Language (HTML) and cascading style sheets (CSS) that define how each page will appear in a browser; web designers need to be aware of how front-end developers work, and the languages they use to create designs that take into account what’s possible via coding. Some of the skills usually associated with web designers include –
  • A good working knowledge of web designer packages
  • The ability to create compliant HTML/XHTML and CSS.
  • An understanding of scripting languages such as JavaScript, PHP, and .NET.

Website Development

The time has come to convert all the plans and designs onto the screen. During this step of the process, all video, audio, Flash animation, and graphics are prepared; which means that they are saved in a web-friendly format, compressed to speed up their response time on the web, named, and uploaded to the server. All content, programming, and HTML work are also done, and the site comes together, ready to be tested.

  • Content – Quality content ensures that, along with other key factors, (such as design), your potential clients have a positive first impression of your company. One way to get ahead of the competition is to have a solid, smart content marketing plan. Content development is researching, writing, and publishing information to achieve a specific goal. That goal will either be to build a connection with an audience or to encourage some kind of marketing or sales outcome.

Content writing for a project is generally divided into two functions which are either carried out by one or two people, namely –

    • Content strategist – the person who identifies the pieces of copy required for each page such as what headlines to use, bullet listing, and descriptions as well as the rules for each, such as character limits and style of copy.
    • Copywriter – the person who writes the content for each identified piece.
  • Media – Having an audio, video or even a Flash component is a must for any modern website. With so many varieties of media formats and compression schemes, it’s best to leave media development to professionals i.e. Media Strategists. This is particularly true for Flash development, an application that can create highly interactive applications and animation.
  • Programming – The different types of web development programming, largely refers to different sectors, with some of these distinctions overlapping, resulting in developers mastering multiple types of skills. But to better understand what developers do, let’s first explain the terms “front-end” (client side) and “back-end” (software development side).
  • Front-End – Front-end refers to the client or user side interaction. It is the part of a website or software that you as the internet user, get to see and interact with. When website data is transmitted from a server to a browser, front-end coding languages permit the website to function without having to continually communicate with the internet. Front-end code allows internet users to interact with a website by playing videos, expanding or minimizing images, highlighting text, etc. Developers who work on front-end coding work on client-side development.
  • Back-End – The backend or the server-side is the part that one doesn’t get to see when using the internet. It’s the digital framework and structure, which, to non-developers, look like a whole lot of numbers, letters, and symbols. There are more backend coding languages than front-end languages. This is due to browsers, which on the front-end, only understand JavaScript, whereas a server at the backend can be configured to understand any language.

So now that we have a basic understanding of what the terms front-end and back-end mean, we will continue with the roles developers have.

Web developers, occasionally called programmers, engineers, or coders, through the use of languages and software tools, take the plans and layouts provided and use coding to turn them into a live, functioning website. Let’s take a look at some of the developers –

  • Front-end Developers – Front-end developers work on the client or user-facing side of the website, programs, and software. Through the use of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS), they can design and develop the visual features, including the layout, navigation, graphics, and other aesthetics, to create a fully-fledged website.
  • Back-end Developers – Back-end developers work on the server-facing side of websites’, programs, and software. They work in systems like servers, operating systems, APIs (application programming interface), and databases and manage the code for security, content, and site structure. Usually, if a site contains active data then it would require behind-the-scenes services (back-end). Generally, if the site requires data to be saved, for example, when a user submits a form with personal information, or uploads an article for their blog page and needs to access it at a later stage, it means that it would also need a database connection. Database connections are made possible by a direct connection from the server itself. Thus, a back-end developer then uses server languages such as PHP or ASP.NET, and writes database queries by using languages such as SQL or MySQL.
  • Full Stack Developers – Full stack developers work on the front-end and backend sides of a website. They can create a software program, application, and a fully functioning site from start to finish. Most times, a full-stack developer would also have a basic knowledge of design and user experience.
  • Website Developers – Specialize in building sites (as opposed to mobile applications, desktop software, or video games). They are synonymous with front-end, back-end, or full-stack developers.
  • Security Developers – Security developers typically work as ethical hackers and build systems that discover and eradicate security risks for a website and or software programs.

Website Deployment

  • Going Live – Firstly, do not rush to go live with a site; make sure to run a rigorous cycle of testing and debugging. Users will pick up on spelling errors, broken links, and whatever other blunders are left over from publishing in a hurry, which only leaves a negative impression of your business.

Website Maintenance

To be relevant, a website needs to be updated regularly.

Issues may crop up with your site and if ignored or left unnoticed it may result in downtime or a loss in revenue and time, not to mention a negative impression on your clients and potential clients. Ongoing maintenance will ensure that all issues are caught and fixed early so that your online business can run smoothly. Typically, sites manage all the maintenance through a content management system (CMS), which is built (or is customized from off-the-shelf software) in parallel to the main site.

This part of the process is so very vital; it is important to remember that maintenance is ongoing.