Explora Creative
by Daniela Cabrerizo

D's Blog Feed

A place for inspiration, not only about design, but also about traveling, art, trends, and just interesting and curious finds. 

How to create the perfect website for your brand's needs and stay within budget! Part 3 of 3

 

This is the final part of this 3-part series! If you haven't read PART 1 and PART 2, I fully recommend you read those first to make sure you have the complete information.

In PART 1 we talked about all the information you need to gather and answer before quoting the project with a designer, and what to expect to see in a proposal. 

PART 2 was all about the design process and user experience strategy.

In this last post, I go through the process of working with a developer, best practices, and how to keep your website running smoothly.  Enjoy!

3 part series

Part One (1)

Development

Unless you are using services with pre-designed templates such as Squarespace or Shopify, you will need a developer as part of the design team. The developer is who codes the website, taking the design and bringing it to life.

The job of a developer has 2 parts: the front-end (what you see in your browser) and the back-end (the storing or processing of data by a server – for example, coming up with the results for a search query).

Usually, developers can start their work when the wireframes are approved. They can start setting up the basic structure of the website (back-end) and research widgets or other technology required. But, they won’t be able to fully start the development until the design is fully approved, because that affects the front-end part of the process, and for most of the projects I worked on, that tends to be the most time-consuming part.

A proper website will include a Content Management System (CMS), which allows you (the client) to edit, upload or delete your own content, without needing to know how to code. Some design/dev teams will include a manual and a set amount of training sessions to teach clients how to use the CMS.

The website development should also include the installation of Google Analytics (or a similar service) and basic SEO (Search Engine Optimization) setup (proper HTML syntax for content hierarchy and responsive design), as well as beta testing and troubleshooting time before launching the live site.

I normally recommend one or two weeks of testing before launching. If the site has been designed and coded without all the content (using placeholders), then you should consider a minimum of 2 weeks to upload the final content and proofread it.  

 

Keep it running smooth

Unless the same team who designed and developed your website or web app is also being hired to maintain it, once the website or web app is delivered to the client and published online, the client is fully responsible for it. This means that if an issue happens with the website or web app weeks or months after it was approved and delivered (published), you will most likely need to hire help at an extra cost. But, there’s a couple things you can do to avoid this situation:

  • Ask your design/dev team if they have a time warranty agreement and what that involves. There might be some limits depending on how much access you will have to the site and server.
  • Ask if your design/dev team offer a maintenance package. If not, they can most likely recommend you somebody who does. A lot of developers will offer maintenance packages of 4 to 6 hours per month, like a retainer, with a percentage of hours that rollover if unused.
  • Hire an in-house developer, either part or full-time depending on your needs, so he/she can deal with the system or theme updates, as well as content updates.

Also, be aware that websites may require occasional security updates to the theme or CMS base code. When you log in to your CMS, you might even see a message at the top asking to do the update. I recommend keeping your site up-to-date, but I always recommend asking for a developer help to make the updates, rather than attempting it alone. If an update happens to conflict with your site, you can cause damage, which will end up being more expensive in the long run.

A good way to keep your website performing well is to not only keep it updated in terms of security, but also in terms of content. Make sure your content is up to date, if you have a blog, keep it constantly running with fresh content, make an editorial calendar and prep blog posts one or two months in advance, publishing news, and rotating in new testimonials from clients.

If you have a web app, make sure you are constantly testing it and updating or fixing issues that might come up. Having a maintenance service for web apps is especially important, because web apps have constant interaction with users and the tasks those users need to perform, should run smoothly. Web apps also need to stay up-to-date with smartphones’ software and hardware updates.

 

Tips for a smooth ride

  • Make sure you are giving the design/dev team all the information you have, so they can work with real and relevant data.
  • Make sure you are giving them relevant feedback on time. In my experience, most design projects are delayed due to 2 reasons: (1) content is not delivered on time and/or (2) the client doesn’t give us feedback on time. If you don’t follow the agreed timeline, your design/dev team won’t be able to follow it either. Also, a lot of experienced designers have a late fee for unjustified delays, because delays affect their availability, so I fully recommend you take timelines seriously, and check with your designer early on if you think the project will need to be delayed, there’s usually some flexibility build into the budget.
 

I hope this helps you understand the process of creating a website or web app better. It might feel a bit overwhelming, but knowing these general details will give you more control and will make the collaboration with your designer and developer better.

I personally believe quick iterations and client involvement throughout the process is the best practice. It creates a more transparent, less fearful experience and usually better results.

Good luck with your next project! And let me know if there’s anything else you would like to know about creating a website or web app for your business. I’m here to shine a light on your business’ journey, and hopefully work with you some day!

Didn’t read the first two parts? Go to PART ONE (where to start), or to PART TWO (the design process).

 

Glossary of terms

Sitemap: simple list or diagram showing a website’s structure (outline).

Flow chart: a visual representation of the path users take to perform specific tasks while navigating through a website.

Users: every person who visits your website and forms part of your target audience (also called visitors).

CTA: Means Call To Action. It’s a button or content block (text or image) that encourages users to perform a specific task. For example, you can have a CTA to sign up for a newsletter, to get involved, sign a petition, read a blog post, access a promotional offer, or go to a specific area of a website.

Wireframes: simple black and white line drawings or diagrams of a website or web app page layout. It can be low or high fidelity, depending how much detail is needed. It details the location of the main menu, images/galleries, blocks of text, call to action buttons, etc. It organizes the content in the most accessible and efficient way, and works as the foundation for the design.

User experience (UX): a UX designer is the architect of a successful user experience in a web environment. They do user research, create the sitemap, navigation flow, wireframes, and user testing to make sure a website or web app accomplishes its objectives and allows users to perform their primary task easily.

Visual designer: creates the look and feel of websites or web apps. They design the look of the layout, the color palette, typography for different types of content, determines the photography and button styles, design icons, infographics, patterns, backgrounds, etc. A visual designer is a well-rounded designer, with experience among different specialties in the design field, including brand and print design.
* sometimes the UX designer and visual designer are the same person.

Developer: the word developer and programmer are now used interchangeable. A lot of people (specially in the tech world) don’t like that, and to their credit there is a difference, but most people, including me, use the word developer for both.

Technically, a programmer is a professional who programs a website and makes the design function (clickable). In other words, it takes the visual (static) design into instructions that a computer can process, using a wide range of languages or technologies. They can be front-end or back end programmers, or both. On the other hand, developers are mostly associated with software development. If you want to know more check out this link: http://blog.stafflink.ca/recruiting-tips/whats-the-difference-between-adeveloper-and-a-programmer#.WYNk1tPyvAI

Hosting: also, known as the server, is a physical or cloud-based hard drive that hosts websites, web apps, data, and email content. It’s where your website or web app data lives (including your content). Your website and web app constantly interact with your server, requesting information based on what a user clicks or based on what website interactions require.

Domain (Domain Name System – DNS): like a phone number, it’s the system that gives your website an address, so it can communicate with web servers. Behind the scenes, your easy to remember URL (for example ExploraCreative.com) is a set of numbers known as IP address (Internet Protocol). When users type your domain address on a browser, that browser asks your website’s server to load the information requested (for example the homepage). This happens in micro seconds and depending on how good your internet connection is, how new the browser you are using is, or how heavy your website is, it will load instantly or will happen slowly, or in parts.

URL: the word URL and Domain are now interchangeable for most people, but the URL gives more detailed information than the domain does. It not only provides the domain itself, but also shows a page’s specific address, the folder name, machine name, and even the protocol language.

 
Daniela CabrerizoComment