“Why doesn’t my website look like the design?” This question pops up sometimes during website projects, and it is a telltale sign that something has gone awry. The good news is that this is an avoidable dilemma.
When clients have limited technical knowledge, the development stage can be confusing and lead to surprises. If the communication is poor and expectations aren’t managed properly, problems often arise.
To successfully transition from design to development requires collaboration by all involved on a web development project to get on the same page and eliminate the potential for misunderstandings.
Use the following checklist as a guide for what you should think about, as a client, before your website is built.
When clients have limited technical knowledge, the development stage can be confusing and lead to surprises. If the communication is poor and expectations aren’t managed properly, problems often arise.
To successfully transition from design to development requires collaboration by all involved on a web development project to get on the same page and eliminate the potential for misunderstandings.
Use the following checklist as a guide for what you should think about, as a client, before your website is built.
The differences between mockups and functional websites
Traditionally, website mockups are created as part of the planning and design phase of a website project. They are usually completed after getting wireframes approval and provide visual representations of website content, showing the colors, layouts/grids, imagery, typography, and so on.Creating these mockups allow you to work out the details of a website before moving to development.
However, these days people access the web from a larger variety of devices and wide range of screen sizes. This makes it more challenging to accurately convey what a finished website will look like with simple mockups. In fact, some web designers have moved away from using traditional mockups, instead presenting their ideas using style tiles or designing in the browser.
Remember: A website mockup is a close representation of your finished project, but it will never be able to fully capture the dynamic qualities of a finished, working website.Regardless of the challenges that website mockups bring, high-fidelity designs are often still the preferred method of presenting a website design to a client. This means that it’s more crucial than ever for clients to understand the difference between a mockup and a fully functioning website.
The most important thing to keep in mind is this: A mockup is as close a representation to the finished project as possible, but it will never be able to fully capture the dynamic qualities of a working website, such as hover effects, forms, video, and any other interactive elements. The way you view a website design might change once you see all the pieces working together.
When starting a new website project, it might be helpful to see examples of design mockups compared to the final website. This can help you get an idea of the difference between a static mockup and a live website.
Explain your expectations and ask for follow-up about build limitations, if you’re unclear
Once you understand what to expect from a mockup, work with your web team to define expectations between design and development. Consider questions such as:- Which details should be worked out in design, and which details can be finalized in development?
- At what point will the site’s design be considered “done,” and is there flexibility to change design choices later on?
- Are there any elements that might present a challenge during development that would alter the design?
Discuss functionality for interactive elements
If there are interactive elements on your website, make sure the expected functionality is discussed before moving from design to development. If you have specific ideas on how something is going to work, you can’t assume the developer will have those same ideas.Consider this example: After a web designer creates a mockup for a web page that includes a contact form, the client may assume that upon submission the user will be redirected to a thank you page. However, this workflow decision should be clearly defined. If it isn’t, the developer might assume that upon form submission the page will show an inline message and build it out accordingly, dissatisfying the client.
These types of functionality decisions for design elements should be clearly defined to avoid expensive rework in the development phase.
Communicate! If you have specific ideas on how something is going to work, avoid assuming the developer will have the same idea as you.
Use “real” content during the design phase
One surefire way for your website design to match your vision once it’s built is to design using final (or close to final) content in your mockups. If your web designer is just guessing at content, then it’s far less likely the final website build will work with all of your design elements properly.For example, a designer might create a call to action element that consists of a title, a description, and an image. Once you get to development, you might realize that you won’t have images even though the design requires them. This change may drastically change the look and feel of your calls to action (and potentially making the overall page less effective).
It’s okay to use placeholder content in some instances as long as you are aware that any content changes later on could result in extra design or development work. However, getting as close to the real thing as possible in order to fully work out design details is always your best bet.
Be aware of development challenges that can affect a website’s design
While the design possibilities within a program like Photoshop are practically endless, the same can’t be said for working within a web browser.Even the most experienced developers run into issues when translating a website design to code. The biggest challenge is balancing technical constraints with design considerations in order to produce a user-friendly website that maintains design integrity.
As long as you are working with experienced designers and developers, the differences between the approved mockups and the final website should be minimal. However, it’s helpful to be aware of the high-level aspects that could cause variations from the expected design so you aren’t surprised if they come up.
Here are some of the common reasons why design changes might be made during development:
Responsive design: Responsive design consists of building a website that adapts to all screen sizes, and it is the most common way to ensure your visitors can successfully use your website no matter their device. That means that the website design you approve for a typical desktop view will not be the same design a tablet or mobile user is going to see. There will likely be design and content choices to work out once your website is functioning, and you can see how content adjusts across different devices.
Font rendering: Fonts often render differently within a web browser than they do within a design program, which can slightly change the look of a design. If typography is a primary concern, ask to see an example of the web version of a font before choosing it for your website.
Browser inconsistencies: While browser support for features has become more consistent over the years, there are some modern coding techniques that aren’t available in all browsers. Sometimes, acceptable fallbacks must be put in place for older browsers that don’t quite match up with the design. Work with your web team to determine what browsers your website will support and how that might affect the design.
Content management systems: There are often limits to how content can be displayed when working with a CMS. Sometimes, these limitations require a trade-off between the design of an element and the desired flexibility for content editors. Ideally, these issues will be resolved during the design phase by having a developer review for such potential conflicts, but sometimes they don’t become clear until the website is built.
This isn’t an exhaustive list, but it should give you a general idea of the type of challenges to expect during the development phase.
Don’t overdo it during the design phase
With all of these considerations, you might be concerned that you need to account for every little element and every different view during the design phase. This should not be the case!You should be okay with leaving some flexibility moving into the development process. The designer doesn’t need to create high-fidelity designs of every page on your website just to manage expectations. This can be a costly decision that is ultimately unnecessary since it’s often easier for a developer to make small changes and adjustments once the design foundation is clearly defined.
If you are asking the right questions and working closely with your web team to address the items in this checklist, you can be confident that you’ve covered all the bases necessary to move forward from design.
Trust the experts
You have to move into the development phase with a certain level of trust in your web team. Know that they are trying to deliver the best quality website possible while sticking to the guidelines of the project.A successful web development phase requires flexibility on the part of the client in case issues arise, as they almost always will, and a willingness to meet halfway to resolve issues as smoothly as possible.
In the end, it’s all about working as a team to create a successful website that everyone is happy with launching!
Is it time to redesign your website? We can help. Let’s talk
