# Type Tana Website Proposal ## Design & Development Process The implementation of the project can be roughly divided into two main processes -- that of the design for site front-end, and the actual development of the site functionality and hooking it up to an administrative back-end for content management. This is not a strictly linear process -- bits of the back-end and other core functionality can be worked on while the design is being iterated, but it's useful to understand what all the parts of the process are. The website will be accessible and mobile-friendly by default. The architecture utilised will allow for high performance and good search-engine optimisation. ### Design The design of the site is primarily driven through high-fidelity prototypes, as opposed to static design samples (Photoshop mockups, etc). This avoids time being wasted on "unusable" work, and ensures that designs cater for different-sized screens and devices, as well as different states for interactive components. In the case of Type Tana, the preliminary design explorations already exist, so rather than new design work, the effort will mainly be focused on implementing the proposed ideas and adjusting interactive states and responsiveness. I am happy to share access to the codebase so that you can experiment with the visual aspect of the site and change things where necessary. There'll be an existing style framework to work within, and I tend to rely heavily on shared design tokens for colours, sizes, and fonts, so creating and maintaining a cohesive design becomes a lot easier. There's also the option of including some generative design to spice things up a bit, e.g. the shapes/patterns in the background can be randomly generated, or change colour to match the images being viewed. This is not strictly necessary, but sometimes adds a nice touch. We can discuss this later and I'll adjust the quote if it's something you want to include. #### 1. Wireframes / low-fidelity mockups First, a simple wire-frame for each main page type / functionality will be prepared. This will ensure I'm building the right thing and that both parties have a common understanding of the final outcome. #### 2. Global style & brand The visual identity of any web project can be decomposed into a few primary building-blocks or components, including things like buttons and form controls, as well as typography and colour. In order to set the groundwork for the site design, as well as maintain visual consistency with the parent brand, a website style-guide will be developed. The styles agreed upon here will be used throughout the site (subject to things needing to be tweaked as we go along). The work done during this process will be directly used in the final product, so this is not a static style-guide but a key part of the implementation. I like to have this thought out from the start though, to avoid things looking out of place at the end. #### 3. Site framing/navigational components This refers to the site header and footer, if applicable, and the navigational menu -- components that will be visible on each page. Being so critical to the overall site design (especially the navigation), these will be designed and developed first, as high-fidelity web-based mock-ups. #### 4. High-fidelity mockups In the same manner as the navigational components, high-fidelity prototypes for the major site pages/functions will be constructed. These may initially use fixed/mocked data (not connected to any back-end), but for all intents and purposes will be the final interface for the website. Once the complete design has been finalised and approved, the functional designs will be integrated with a back-end system (where required), and the more advanced features (e.g. shopping carts) will be developed. ### Development #### 1. Configuration of CMS (Content Management System) A content management system most suited for the site/application will be installed, configured, and customised. This setup will involve the creation of a page/data structure for the required content and the pre-population of the CMS with the provided content (or dummy content if content is not yet available). #### 2. Front-end/back-end integration Once the CMS is configured, the static pages developed in the previous phase will be updated to retrieve their data from the back-end. This will have no bearing on the site design itself, but the content on the site can now be modified and added to without requiring code changes, allowing authorised parties to keep the site up to date. #### 3. Implementation of additional features Following the successful implementation of the core website, including all back-end capabilities, additional features (e.g. shopping carts, booking systems, search) can be built. ## Technical Architecture A full explanation of the technical architecture is outside the scope of the document (and not particularly necessary to understand), but a brief overview is useful to understand what the final system will look like and how it will function. The system will be built using a *decoupled* approach, i.e. the system will be composed of separate parts, each specifically geared towards their function. While this has numerous benefits, it might appear slightly different to more traditional website structures (e.g. Wordpress). The front-end will be built using a "static site" architecture, which means it will be rebuilt anytime any changes to the site and content are made. This differs to a more traditional site, which is constructed on-the-fly every time a user tries to request it. Pre-building the site allows it to be cached and distributed across the globe on a content delivery network (CDN), which massively reduces the time it takes for the website to load on the user's end. Every time a design change is made, or some content is updated through the content management system (CMS), the site is rebuilt and pushed across the delivery network. This means that the changes you save on the back-end may take a few minutes to be updated on the front-end, but the performance improvement on the front-end is well-worth the delay. ![](https://i.imgur.com/v5DaTZM.png) ## Site Components ### Front-end As discussed above, the site will be a "static" site, generated using one of the modern frameworks generally used this layout. These are free (and open-source), and there are no costs or running costs associated with them. ### Shopping cart I like using Snipcart (https://snipcart.com/) for the shopping experience. This integrates neatly with any site, and has a good selection of features, including allowing users to create their own accounts to save their details, follow-ups on abandoned carts, and add discounts. This system will cater for both digital and physical products. ### Contact forms Standard web-based contact form. Entries will be forwarded to an email address, and also be visible from the CMS. ### Typeface tester This wasn't shown in the initial design, but I think it might be advisable to add one eventually, if not when the site is first launched. This will just allow customers to type things out and see how they look in the selected font, and adjust the size and weight if multiple are available. I'll update the quote with this if you decide to include it later. ## Design & Development Costs ### Design | Section | Cost | | ------- | ---: | | Site structure / wire-frames | €10 each (per page/functionality) | | Global style & brand | ~~€150~~ €100 since the general design is already in quite an advanced state | | Site framing/navigational components | €200 | | Final page design | €50-€150 each, according to complexity (see below) | ### Page Design (High-fidelity) | Page | Cost | | ---- | ---: | | Home | €50 | | About | €50 | | Collection | €150 | | Typefaces | €100 | | Individual typeface page | €100 | | *TOTAL* | €450 | ### Content Management System | Feature/Section | Cost | | --------------- | ---: | | Installation and setup | €200 | | Data design / interface implementation | €200 | | *TOTAL* | €400 | ### CMS integration | Page | Cost | | ---- | ---: | | Home | €20 | | About | €20 | | Collection | €40 | | Typefaces | €40 | | Individual typeface page | €40 | | *TOTAL* | €160 | ### Additional Features | Feature | Cost | | ------- | ---: | | Shopping cart (Snipcart) | €200 | | Contact form | €50 | ### Totals | Item | Cost | | ------- | ---: | | Infrastructure/hosting setup | €100 | | Design | €500 | | CMS | €400 | | CMS integration | €160 | | | | Shopping cart | €200 | | Contact form | €50 | | | | **TOTAL** | €1410 | ## Projected Running Costs (Approximate) ## These costs may go up as traffic and usage increase, but unless we're looking at large amounts of traffic and usage we should remain within these projections. | Feature | Cost | |---------|------| | Shopping cart | 2% of all transactions, minimum €8 | | Credit card processing | This depends on the card processor used -- I usually go for stripe which costs 1.4% + €0.25 for European cards | | website hosting | *free, up to 100GB bandwidth / month* (See https://www.netlify.com/pricing/) | | website content management system | *free, up to 10GB requests / month* (See https://www.sanity.io/pricing#compare-plans) | There's also a maintenance agreement I use, which handles upgrades and generally keeping na eye on things, as well as fixing things that mysteriously break. I'll send you that separately. # Questions - What will the events page involve, exactly? - Will the store items have a details/description page? - Is this going to be a multi-lingual site?