We’ll just say it: clients really need to know some web design and development concepts, especially when launching a great digital project. Heck, everyone should know some basics, nowadays. And the IT guys should help, so this is what we’re doing here today.
This brief… do we really need it? Oh, but I thought web design means mobile designs as well! What is coding and why do I need it? Can’t you just upload designs in the platform or something? Sounds familiar, somehow? These are just a small part of the frustrating, hard-to-wrap-your-head-around-it dilemmas clients have, which can also affect the team responsible for the project. More time spent on reluctant debating means less time spent on creative and successful work!
As experienced web designers and developers working with international clients on all types of digital projects – mobile apps, e-commerce, presentation websites, landing pages, you name it – we’ve discovered that making sure clients were aware of the digital adventures they embark on is of utter importance. And this awareness is key to their own success or failure. Hope it’s the former, obviously.
And we’re sure all IT clients may face plenty of doubts or questions. How can they truly understand this ever-evolving tech world properly, and make sure their IT providers understand what they want, even though they don’t speak the same language?
So, we made this short guide that could bring more clarity to potential clients looking for great web development services, but unfamiliar with this world. Well actually, these are design and dev words anyone should know today, as you’ll find out.
This time, we focus on design words and concepts, and the most common design-related requests from clients, explained! Let’s find out how knowing them can help you understand the efforts and wonder behind a pixel-perfect user experience that drives conversions, what it means to launch a digital project in 2020, and how you can accomplish your biggest business dreams.
Why know the basics of web design & development before starting a project?
The most common challenge for IT professionals working with non-IT experts is building trustworthy, clear and efficient communication. This is the big challenge: clarifying goals, workflow, resources and desired results of a project. In order to do that, a web design and development company is somewhat responsible for helping potential and current clients see their business challenges as clearly as possible. Of course, clients have the responsibility to provide the necessary resources, stick to their words and trust their IT partner’s advice.
In order to get a better perspective on how a project works, here is the process we follow.
How does IT work? An optimal workflow for clients & IT agencies
For someone unfamiliar with the design and coding world, everything seems either hard and overwhelming, or way too simple than it actually is. The truth is in the middle, but when you set a clear process with milestones and separate stages, any project should work just fine.
Here’s an example of the optimal workflow we follow at eJump when building a website, online store or app, that can be adapted according to your needs (you can skip the stages you don’t need).
It is very important to distinguish between each stage of the development process, and also make sure to work with IT professionals who know how to plan and manage work the best way (we’re among the top web developers in Romania, according to Clutch and our clients’ reviews, just in case you’re wondering).
After initial discussions when both the client and the design and dev team agree on objectives, resources, timeline, and costs and complete any brief may be needed for logo design or other tasks, the main stages come to life, in this particular order:
Web Design Stage
In this stage, the designer will provide the visual format of the website pages. This format refers to the PNG and PSD files (editable in Photoshop, usually). Depending on project size and frequency of feedback, this may take between several days to several months – yes, it happens! The quicker a client provides input with no unexpected changes, the faster the design creation. Basically, in the design stage, a client gets the pictures of how the website would look like.
In case the client needs a logo as well, our recommendation is to complete the logo design before the website or app design, in order to build a cohesive and solid online identity. If the client wants custom responsive designs, as well, this stage is recommended, of course.
In this stage, the coder (developer) or a team of coders implement the agreed designs into the website code and test it, to create a fully functional website. If responsiveness is required, then this is completed in this stage as well. Here, the client usually provides a document with specifications to the designated developers, that contains all the technical information, website or app structure and desired features, web development technologies and tools to be used and so on.
Maintenance Stage (optional, but not quite optional)
This is like an almost forgotten “art” of adapting a project to a modern, but perilous online space. To put it simply, website maintenance is about a bit uncreative, but essential must-dos, such as updating platforms and plugins to avoid any security risks, performing server migrations, malware removals, creating or adding features to the pages and the like. Usually, it’s best to choose maintenance to avoid any crashes or issues with the website or platform (especially if it’s an online store).
It is an ongoing service that keeps a digital project updated, secure and reliable for its customers.
Important web design concepts that clients, and everyone should know:
Although web design is a different term than web development, the latter actually encompasses the first. So web or mobile design is part of a project development, but we’ll try to explain them step by step.
The Big Badass Brief
Whether a web design and development agency is building an innovative app, an elegant website, a gamification platform, a cool logo or anything digital, making the brief a priority BEFORE starting to work will really bring tears of joy instead of just, you know, tears of complaint from a client.
There are as many types of briefs as industries: design or development briefs (not to be confused with the project specifications documents), content briefs, branding briefs and so on. No matter the project you are planning to work on, make sure you have a good brief.
As a client wanting a logo design, or a website or app design, you can either provide the project brief to a designer, or receive a brief from him, to be completed. The same for a project development or any other inquiry.
Web designers, coders, and IT managers know what essential information they need from clients, so most of them prefer to ask these questions by sending them a brief that is easy to answer.
Basically, a brief is a document that provides necessary information on a project completion, either it’s a logo, a design template or an app development task.
For example, we at eJump prefer to work with a design brief when a client does not know for sure what he wants for a logo or website layout. By asking the right questions (with lots of examples and useful resources), we are able to help customers better understand what they want, and also optimize the working process for that project.
If you receive a brief from your IT partners, rest assured: they just want you to understand each aspect, and also help them help YOU by providing the exact work you need.
What is a Website?
Well, this seems obvious, but is it, really? The standard explanation is that a website is a collection of files stored on servers, or web pages (and their content) reunited under a single domain name, on at least one web server, which are publicly accessible. All accessible websites are the world wide web that we navigate daily.
When clients ask us to design or develop a website, they usually refer to the classic 5-page or e-commerce websites (which are more complex than simple presentation websites). They also request a one-page website or a landing page, a blog or a portfolio website, or a directory website.
What is meant by Web Design?
When clients approach us on creative platforms such as 99designs, they are looking for a talented designer or design company to help them with the beautiful, but functional part of a project development: the logo, the website design, and various visuals to enhance their brand. Many aren’t aware of the work involved, so a bit of guidance is definitely needed.
Web design is different from graphic design (a more creative and free branch) and it usually refers to a website visual aspect. A website has to be cool, modern, professional, interesting, captivating, functional, unique, simple, representative for the brand, interactive, attractive and useful, right?
So design work is much more than a pretty (inter)face: it involves a logical structure, creativity, but also homogeneity, choosing the best fonts and typography, icons design, color palette, imagery, user interface and user experience; all that takes resolution, responsiveness, speed, programming, user behavior knowledge into account.
To put it simply, the layout of a website refers to the arrangement of the page elements (content, style, imagery) and the logic behind them. A layout is part of web design and has to present a user journey in order to attract and engage online customers.
There are different types of website layouts, and each has a story to tell to a brand’s audience, through the arrangement of page elements. Depending on the client’s requirements and wants, a layout can be asymmetrical or zig-zag, a classic F layout, a grid or a daring split-screen layout, a one or two or three columns one.
A page template is different from a normal page because it is more specific (has specific elements or a specific purpose), but can be customized. A blog post template, a product page template, an About page template, a landing page template – all have a pre-designed format that can be filled with different content (text, images). These are useful for clients who manage their website or application, without the help of an IT professional.
A wireframe is a prototype, a basic model using lines and boxes to show the interface elements that will appear on a future web page. Usually, these wireframes are a collaborative effort made by the client and the designer (or product manager, business analyst, information architect).
For the best website structure planning, wireframes come in very handy. They allow clients to understand what their future website would look like in terms of functional elements, before proceeding to the main design and development work.
Color Scheme: Is it important?
Out of the blue, Green thumb, In the gray area, Golden Opportunity, Black sheep; having a colorful life or seeing the world in color – as you can see, colors are part of our everyday life, so the psychology behind them is solid.
Each color we use in designing a project tells a message, has a meaning and expresses an emotion; they also impact users consciously or subconsciously. The colors a client or a designer chooses can enhance a brand identity or on the contrary, so yes, a color scheme is important in a successful website or app development.
Sometimes, clients are reluctant when it comes to choosing the right fonts for their website or app. It’s normal, since we all want the best and most beautiful fonts for our dream project, right? Then we come with a proposal, they want something else or choose a certain font pairing, then come back to our initial proposal.
It is best to make sure people understand that fonts have to be selected according to the design layout, resolution and type of device, but also according to their brand identity, and it’s not just a letter design. Fonts must be beautiful indeed, but most of all, clear and designed with readers in mind.
Font choice is important to users because it affects readability and, thus, engagement with the client’s message and services. A designer has hands-on experience and can recommend the best and the latest font styles and pairings suitable for each type of brand, to make sure the message is delivered the smart way.
Generally used in marketing, CTA refers to an element that drives the audience to take action on a page or material. In design and development, you should call to action buttons or banners to attract users to find out more about a product or a service, for example. Think about the Read more, Learn more, Click here or anything similar that you see on a website or app.
CTAs are important and have to be specific, clear and sometimes creative to appeal to a specific audience.
What is the difference between UI and UX?
Sometimes, clients are familiar with the terms, but many confuse them – and it’s understandable, honestly.
User Interface (UI) in web design refers to the interaction between the user and the digital product. In order to simplify and engage people in using it, UI design has to look appealing and be easy to interact with, by using the right buttons, icons, menus, checkboxes, sounds, effects, any visual element on a screen or touchscreen.
UI design has to be friendly, intuitive, easy to use and beautiful indeed, but also entertaining and somewhat playful to make users curious and eager to engage and discover the digital products or services.
User Experience (UX) refers to, well, the personal user experience with a digital product. No wonder we have customer experience departments in so many companies! UX is focused solely on the human side, so the design has to make sure it helps people discover the desired product or service and that their needs are met on the website/app.
Because UX design orbits around user behavior, it usually has to be useful and relevant, clear and structured, consistent and accessible, functional and meaningful. Here’s an example of a winning Homepage design we built for a bicycle brand.
What is a design theme? What about a “theme from scratch”?
Many times we are asked by our clients looking for web design services about the differences between a theme and a custom theme (made from scratch). What is better to choose for your online business?
Let’s start with defining the theme, which is the look and feel or the overall aspects of a website, generally speaking. A WordPress theme, for example, refers to a collection of page templates and stylesheets that describe the appearance of a WordPress website, which includes font types and sizes, color palettes, visual elements that give a certain aesthetics, PLUS various functionalities and features in the WordPress platform.
A theme from scratch refers to the same things, but created, designed and built according to the client’s particular needs and wants. In two words, it is a custom theme (a unique one), not a pre-designed theme.
Buying a WordPress theme: Pros & Cons:
For example, we at eJump usually build custom WordPress themes from scratch because it’s the optimal solution for a fully functional website. Such an option also helps avoid further repairing work or unnecessary issues, thus, unnecessary costs. But we also work with available themes, depending on what the client chooses.
Here are some pros and cons of buying a pre-designed WordPress theme, from our experience and knowledge:
- It is possible to come up with more features and functionalities than you might need
- Having certain plugins that could slow down the loading speed and cause issues in the long term (the risk of being infected by malware, for example)
- Once we make small changes here and there (as many clients end up requesting during a WordPress theme implementation), there is a high chance of making more unexpected changes and ruin other page templates (we make a change in a page, a weird one pops up in another place)
- Too much time spent learning how the theme works and what functionalities it has, in order to implement everything accordingly.
- Buying a theme is usually suitable if you are in a hurry with the launch of your website and you want to use its functionalities as they are, without changing the theme structure, except the text, colors and image content
Basically, if you don’t know what to choose, our experience recommends you to save time, costs and lots of energy and go for a custom theme from the start, rather than choosing a pre-designed one, then altering it to finally get to a somehow… custom one.
Only if you know the limitations from the start – or really don’t mind investing some extra resources if you change your mind during the project – you should go with a WordPress theme.
This important part of the complete web and mobile design services is also a confusing one. What exactly does responsiveness mean and why is responsive design so important? Here is one example of custom responsive design we made for a contest holder on 99designs.
Responsiveness refers to automatically resizing, hiding, shrinking or enlarging certain elements of a website layout, according to different screen sizes and device orientations that the user uses to access the website. In short, responsiveness is about looking great on any device (desktop, mobile, tablet) and any resolution, to make sure the user experience is flawless no matter the device.
When clients request web design services, the responsive part is not automatically included, so this is why it is best to discuss this part of the design and implementation process before starting to work.
Many top professionals in web development handle some decent optimization and responsiveness when implementing a web design, to make sure it looks nice on most popular devices – desktop and mobile usually. You can see this kind of work in the “mobile-friendly” definition of a website implementation, for example. Our team also does that, for all our projects, and even more.
If the responsive design wasn’t on your list of things to discuss, there might be some problems along the way, such as:
- The client doesn’t know the amount of extra work needed for the responsive designs
- The client thinks it’s automatically included in the web design work and estimates
- The client doesn’t want responsive design, but during the project development, asks for changes here and there, and somehow he ends up actually wanting custom responsive design, but is reluctant to the idea of having separate cost and time estimates for the responsiveness work.
- They might see custom responsiveness (different from mobile friendly) as part of the same job or not too hard to provide
The point is, responsiveness is a huge deal for any online business or brand of the modern world. More than half of worldwide users spend their time on mobile devices, and the 5G era is here and now. So, no matter if you’re an e-commerce, a presentation website, a blog/magazine or a landing page, custom responsiveness has become an important aspect that requires special attention.
Custom responsive web design allows you, as a client, to work and decide, along with the designer and/or developer, how the website should look like on each type of device, resolution and size, and also on various browsers if needed.
During this stage, you can create incredible mobile user experiences that attract customers and increase conversions, so custom responsiveness is not about an attractive and nicely fit design that is identical to the desktop layout, but about a custom layout, usability, optimization, fast loading pages, information that is easy to find, adequate spacing and CTA buttons large enough to work on touchscreens.
Conclusion: we ALL have to communicate clearly, trust each other’s expertise and help one another.
The world of web technology, IoT and innovation is an ever-evolving network of ecosystems. But, just like when it comes to learning programming, you have to understand the concepts in order to work with them. As a client, this is true especially when it comes to your digital project. It is better to first know your goals, then to define and plan what you need in order to reach them – with the help of the right professionals to make that happen. As for the designers and developers, they have to ensure great communication, a problem-solving mindset and a willingness to help clients along the way. Because it is so worth it!