Natural Building Technologies. Redesign Proposal

Size: px

Start display at page:

Download "Natural Building Technologies. Redesign Proposal"

Mae Ellis
5 years ago
Views:

1 Natural Building Technologies Redesign Proposal

2 Structure Notes A Familiar Site Map Home Our initial thoughts for structuring Natural Building Technologies new site is largely to keep things the same, albeit with a simplified systems section that combines information about new build and retrofit systems. We ve also suggested having a dedicated downloads area under systems, where architects/qs s/contractors can access all data sheets and technical information for different systems. The About Products Systems News Contact location of this downloads area in the site structure may be subject to change, as we re aware that products also have downloadable data sheets/health and safety information etc. So, one option here might be to combine all downloadable material on the site and display them in a new primary navigation area. Who we are Services we offer New Build Retrofit We ve also suggested collating the various bits of general information that s currently dotted around the site (e.g. essential reasons to choose NBT systems ), and presenting it in a more ordered way under an about section. How we progress throught the planning stage Downloads We ll provide a site structure like the one in our initial proposal on the left. It may have additional detail added based on feedback from this proposal document. If the site structure doesn t need amending in any way, it can be signed off, and we ll move on to providing some detailed wireframes (diagrams of specific page layouts) so all parties have a clear idea of exactly which elements should be included on the Key Primary Navigation Page Group Section site, and where they should go. Once this is decided, we start to look at how to style these layouts.

3 Design Notes How we progress through the design stage Design-wise, we re in a great position, in that Natural Building Technologies has reasonably versatile branding, and a simple, clear colour palette (Fig 1.1) that we can use to design a clean, modern site. We feel that in general, the typography and layout of the current site doesn t complement clarity of the colour scheme, nor the clean look of Natural Building Technologies brochure which we viewed when meeting in person. Our focus for a redesign would be: #F7941E #00BCE4 #E9E9E9 Typically, once we ve got a clear idea of how the site will be structured and laid out, we ll start putting together some style tiles (Fig 1.2) - examples which illustrate different apporaches to designing your site. They re more specific than a mood board, but aren t as labour intensive as creating detailed mockups of your site. This means that we can progress quickly through different iterations of the design and efficiently get to a visual style which best presents your business or organisation. A More Minimal Design The current design can be a little difficult to read and to understand the layout of pages. More whitespace, a more considered layout and typographical changes will contribute to a cleaner appearance. FIG 1.1 Natural Building Technologies Logo and color palette Once a design style has been established, we can then move onto some more detailed visuals to come up with a precise plan for styling your site. Clearer Typography With some clearer typography, dense pages can become a lot easier to read. With particular regard to the products area, but also across the site, we would aim to present a clearer typographical heirarchy (making the most important bits of text have the most promince, and vice versa), pay more attention to line-height and whitespace to make text more readable, and produce greater consistency in type style. Engaging Full Width Imagery A modern, responsive design means that we can break out of a constrained grid and display full width images, breaking up text and providing much more engaging visuals. FIG 1.2 Partial example of a style tile, used to iterate through different design styles quickly.

4 Performance Notes Search Engine Optimisation How this work affects our cost estimate One of the key aims with the Natural Building Technologies redesign is to improve search engine ranking/visibilty. Many of the methods we ll use to improve SEO are valuable in their own right - such as building a mobile friendly site, making sure it s secure and that it loads quickly. Fundamentally, there are three areas that we ll concentrate on to ensure that the site performs well: How the site is structured, how it is populated with content, and how it s presented to search engines. Work that we carry out with regard to the structure of your site comes as standard - all our sites are mobile-friendly, emply structured data, and are fast and secure. Extras here are the addition of an SSL certificate, and existing content SEO review - these will be quoted for separately at the end of this document. How the site is structured Mobile Friendly When doing a mobile search, Google search results will show a preference to sites that are mobile-friendly. All sites that we build are responsive, meaning that they respond to the device they are being viewed on and present a layout and style that suits the device. This is a fundamental step in ensuring that a site is mobile friendly. Structured Data When building your site, we ll add structured data to the markup - this is a method of adding annotations to content so that it makes more sense to search engines (Fig 2.1). Fast and Secure It s also important that your site loads quickly and is secure. We use a dedicated WordPress hosting provider which employs advanced caching FIG 2.1 Example of structured data (annotated content) - itemscope, itemtype, itemprop etc. techniques to serve pages. With our hosting package, static content on your site (scripts, stylesheets and images) will be distributed via a content delivery network (CDN). This reduces load on your server and increases loading speeds by delivering static content via servers closest to the end user (wherever they are in the world). We also host our sites in a secure environment that s highly resilient to exploits and malicious attacks. As an additional measure, we can add an SSL certificate to your site to enable encrypted (HTTPS) connections. How the site is populated with content We build sites using a content-management system that empowers you to add and edit content on your site. This means that, for the most part, you are responsible for the content on your site. We will, however, provide powerful tools, and helpful guidance to enable you to optimise that content. Primarily, we ll use a popular and well-maintained WordPress plugin which, as well as providing site-wide settings and options to improve SEO, will also provide detailed content analysis for each page, post, product etc. on your site, giving an easy to understand traffic light system for how to enhance your content. (Fig 2.2) We can also offer content review services - where any migrated content will undergo analysis with a view to improving its SEO score. FIG 2.2 Traffic light system for content analysis of individual posts and pages. How the site is presented to search engines This process involves submitting site maps, specifying preferred domains (e.g. www vs non-www) and checking for errors that should be corrected, or enhancments to be made. Primarly, we ll do this via the Google Search Console, but we can carry out a a similar process using Bing s Webmaster Tools. These tools also provide valuable feedback on the structure of the site - Google s Search Console, for example, gives suggestions on HTML improvements that can help its search engine parse a page better.

5 Cost Site Development What Comes as Standard WordPress Website Design and Development Development of a bespoke WordPress theme and site specific plugins, including products, services and case studies VAT We build your site using WordPress - an extremely popular open source content management system. WordPress intuitive platform means you don t have to have much technical expertise to edit or add content to your site. Existing Content Analysis We ll conduct a review of existing content that s been migrated across to your new site (such as news posts) and make or suggest amendments to improve the relevance of the content and its keywords, with a view to improve search engine visibility VAT SSL Certificate Adding an SSL certificate validates your website s identity and encrypts all information sent to and from your website. It s an extra layer of security that s often used with e-commerce, banking and social media sites. However, any site that is secured with SSL can also rank higher in search engine results VAT In terms of the look and feel, we ll develop a bespoke theme for your WordPress site - so your site will be tailored exactly to your needs, and look how you want it to. Site Setup and Launch Whichever hosting platform you choose, we ll take care of everything required to get your new site live, including deploying the site s files and content to a server, pointing your existing domain to your new site and setting up a staging area, where we can test out changes to your site before making them live. Technical Training We ll provide a PDF user guide that provides basic guidance on how to use WordPress, with a few specifics on how in particular to edit the customised sections of your site.

6 Hosting Options Some Things To Consider Hosting WIth Us MONTHLY YEARLY If you choose not to host your website through us, we can t 25 OR 250 provide automated backup services, and you ll have to take on more responsibility in terms of keeping your site up to date. + VAT per month + VAT per year s We don t offer hosting services - it s a good idea to keep your website and hosting separate (that way if your site goes What You Get down, people can still you, and vice versa). We re more than happy to help set up accounts for you. Hosting that s optimised for WordPress. Our managed hosting package offers the following advantages over typical shared hosting packages: Our recommendation is to subscribe to Google Apps for Work - which also provides cloud storage and shared calendars. Secure Hosting providers actively monitor your site for malicious code and will fix any issues at no additional cost. Super fast The files that make up your site will be distributed via a Content Delivery Network (CDN), so no matter where the end user is, your site will load up quickly. Automated Site Updates It s extremely important for security to keep your site up to date. Managed hosting takes care of updates by running them automatically. Domain Names It s worth thinking about this now! If you have a new site and have not yet registered a domain name, let us know, and we can advise how to go about this. If you re coming to us for a site redesign, it s important that you provide us with details of where you domain name is registered as soon as possible, that we we can ensure that we get your site live by your preferred date without any hassle. Automated Backups All your data is backed up daily, and can be restored easily and immediately with one click. Staging Sites Test out changes and updates on a duplicate version of your site.

7 Feedback Some things to consider when providing feedback: Thinking about the content that you d to present on the site, will it all fit in somehwere in the site structure? We ve suggested a couple of options for how to present downloads on the site (either separately, under products and systems, or in one dedicated section - like a downloads hub). Do you have any preferences here? Is there anything about the site structure that you don t understand, is unclear, or would like us to explain in more detail? The Performance section of this document gets a bit technical. Is there anything in this section that you don t understand, would like to discuss, or would like us to explain in more detail? We ve provided a cost breakdown at the end of the document - do you have any questions about these quotations/do they make sense?

8 ANY QUESTIONS PLEASE DO NOT HESITATE TO CONTACT US

This is Your Web Brief

This is Your Web Brief Web Wizards priority is to create customers for our customers by focusing on your business needs. We design and develop websites and online marketing strategies that deliver maximum