{"id":150,"date":"2024-02-01T21:20:21","date_gmt":"2024-02-01T21:20:21","guid":{"rendered":"https:\/\/mehndibytifa.com\/blog\/?page_id=150"},"modified":"2024-02-01T21:23:32","modified_gmt":"2024-02-01T21:23:32","slug":"small-business-website-design-process-development","status":"publish","type":"page","link":"https:\/\/mehndibytifa.com\/blog\/small-business-website-design-process-development\/","title":{"rendered":"Small Business Website Design Process &#038; Development"},"content":{"rendered":"\n<p>This website was designed for Spokes and Saddles, to bring customers back to the high street, increasing the awareness and improving trade. The task was to design a website that contains all the information a potential customer might need and to develop a brand identity that attracts customers. <\/p>\n\n\n\n<p>Before diving into the design process and development for the website, I had an interview with the owner Akio Rider, to gain an insight of Spokes and Saddles.<\/p>\n\n\n\n<p>Below you can see a pdf of some of the notes I had taken down during the interview.<\/p>\n\n\n\n<div data-wp-interactive=\"core\/file\" class=\"wp-block-file aligncenter\"><object data-wp-bind--hidden=\"!state.hasPdfPreview\" hidden class=\"wp-block-file__embed\" data=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Spokes-and-Saddles-Interview-notes-with-owner-Akio.pdf\" type=\"application\/pdf\" style=\"width:100%;height:430px\" aria-label=\"Embed of Spokes-and-Saddles-Interview-notes-with-owner-Akio.\"><\/object><a id=\"wp-block-file--media-2cee8415-da24-4c6e-9c43-a3987dcb3b59\" href=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Spokes-and-Saddles-Interview-notes-with-owner-Akio.pdf\">Spokes-and-Saddles-Interview-notes-with-owner-Akio<\/a><a href=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Spokes-and-Saddles-Interview-notes-with-owner-Akio.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-2cee8415-da24-4c6e-9c43-a3987dcb3b59\">Download<\/a><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">COLOUR<\/h4>\n\n\n\n<p>Firstly, I created a mood board, which I then extracted a colour scheme from. Out of which I focused on the prominent colours that stood out and represented Spokes and Saddles the way Akio had described it. I also wanted to make sure the colours resembled the environment and the passion of cycling. I had chosen 5 colours; a deep orange (<strong>#B35927<\/strong>), a dusty navy blue (<strong>#395974<\/strong>), a light muted beige (<strong>#E2DBD2<\/strong>), a deep earthy olive green (<strong>#586E39<\/strong>) and white (#<strong>FFFFFF). &nbsp;<\/strong>Out of which the #<strong>395974 <\/strong>would be used for the main text on the #<strong>E2DBD2 <\/strong>background, and the #<strong>B35927<\/strong>, and #<strong>586E39 <\/strong>was used as accent colours.<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"904\" data-id=\"153\" src=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-1024x904.png\" alt=\"\" class=\"wp-image-153\" srcset=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-1024x904.png 1024w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-300x265.png 300w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-768x678.png 768w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image.png 1152w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"914\" src=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-203318-1024x914.png\" alt=\"\" class=\"wp-image-155\" srcset=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-203318-1024x914.png 1024w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-203318-300x268.png 300w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-203318-768x686.png 768w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-203318.png 1082w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"290\" src=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-2.png\" alt=\"\" class=\"wp-image-156\" style=\"width:796px;height:auto\" srcset=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-2.png 897w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-2-300x97.png 300w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-2-768x248.png 768w\" sizes=\"auto, (max-width: 897px) 100vw, 897px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>TYPOGRAPHY <\/strong><\/h4>\n\n\n\n<p>As for the typography, I chose to go with Georgia. It has good readability. It is a Serif font, and from what I have read, they aid in guiding the reader\u2019s eye along the text. For Spokes and Saddles this is beneficial, as they can use it for the detailed product descriptions, blog posts or articles on the website. It has a professional and classic appearance, conveys trust and reliability \u2013 customers can be comfortable to seek expertise and quality products, services and information from Spokes and Saddles. Georgia is a web-safe font, meaning it is likely to be installed on a wide range of devices and browsers. This ensures a consistent appearance for users across different platforms.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"413\" height=\"176\" src=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/georgia-3179932089.png\" alt=\"\" class=\"wp-image-159\" srcset=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/georgia-3179932089.png 413w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/georgia-3179932089-300x128.png 300w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">LOGO\/IMAGES<\/h4>\n\n\n\n<p>As for the logo, I wanted the name to be incorporated into any visual aspect that was going to be included in it apart from the words themselves. Thus, I though of using a bike chain as part of the logo because it plays a vital role in the mechanical functionality of a cycle; which is to make it move forward by transferring power from the pedalling to the wheels. At first I had positioned it on the top left but then repositioned it to the middle to keep the brand in focus whilst customers were browsing the page, engraving itself in the customer\u2019s mind.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"446\" height=\"446\" src=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/saslogo-edited.png\" alt=\"\" class=\"wp-image-162\" style=\"width:278px;height:auto\" srcset=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/saslogo-edited.png 446w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/saslogo-edited-300x300.png 300w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/saslogo-edited-150x150.png 150w\" sizes=\"auto, (max-width: 446px) 100vw, 446px\" \/><\/figure>\n\n\n\n<p>I used resources such as Freepik, Unsplash, Pixabay, for images to be used in this project. They are really great with a variety of images for what is being searched and really gives you all potential images linked to what you have searched for. It was super easy for me to use, find images and download them. Which I then cropped and resized on Adobe Photoshop to ensure it fits the page and decreases the image file size.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">RESPONSIVENESS<\/h4>\n\n\n\n<p>I made this website responsive, as it aids user experience. Many people use their phones to browse, and I wanted the website functions to be seamless on any device it is accessed from. It increases accessibility, as different people use different devices whether they use one or a collection of devices. It also promotes consistent branding as Spokes and Saddles website will be maintained across devices, building trust amongst their audience. Plus, to ensure Spokes and Saddles are able to bring in more customers and increase trade, staying competitive in the digital landscape is crucial. It addresses the diverse ways people access information online and contributes to the overall success and effectiveness of the website.<\/p>\n\n\n\n<p>However, during this project, I did struggle with the website responsiveness. I initiated to make the website responsive by starting off of the other end of the scale rather than doing the \u2018mobile approach\u2019 first. At first, I was having a mental breakdown as to why I couldn\u2019t get the outcome I wanted, but I then realised that I should start from \u2018mobile\u2019 first and then build my way back up and in the end I did get there. There was the challenge of content relevance, which content to display or hide for the different screen sizes as I didn\u2019t want anything to impact the user experience. The website responsiveness was much harder for this project, compared to the typesetting project I did, as that only contained typefaces and no visual aspects such as images or icons, and I used MDN Webdocs to guide me and further ease my understanding of media queries. With more practice, I believe I can get the hang of it. &nbsp;<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"743\" height=\"1024\" src=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-5-743x1024.png\" alt=\"\" class=\"wp-image-164\" style=\"width:317px;height:auto\" srcset=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-5-743x1024.png 743w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-5-218x300.png 218w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-5-768x1059.png 768w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/image-5.png 781w\" sizes=\"auto, (max-width: 743px) 100vw, 743px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"796\" src=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-204947-1024x796.png\" alt=\"\" class=\"wp-image-165\" srcset=\"https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-204947-1024x796.png 1024w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-204947-300x233.png 300w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-204947-768x597.png 768w, https:\/\/mehndibytifa.com\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-01-204947.png 1394w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div style=\"height:154px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/mehndibytifa.com\/blog\/coursework\/\">Go back to Coursework page<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This website was designed for Spokes and Saddles, to bring customers back to the high street, increasing the awareness and improving trade. The task was to design a website that contains all the information a potential customer might need and to develop a brand identity that attracts customers. Before diving into the design process and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-150","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/pages\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":2,"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":168,"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/pages\/150\/revisions\/168"}],"wp:attachment":[{"href":"https:\/\/mehndibytifa.com\/blog\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}