Architectural Elite Live Brief
Website Available at https://joshhoward10.github.io/architectelite/dist/
Introduction
Aim
Aim is to re-design the current architectural elite website to follow modern design principles and make it easier for the user to upload Their CV. It needs to be created in a professional way so that it attracts more traffic to the website.
Objectives
- To discover what is wrong with the website to find out what needs to be improved.
- Evaluate current competitor's websites and discover what they are doing right and wrong.
- Create a logo That follows modern design trends and helps the business to be noticed on a larger scale.
- Use Foundation and SASS to develop the website.
Research and Analysis
Analysis of Current site
Currently the website is very outdated and does not follow modern design trends. The biggest issue with the design is, it does not fit the screen and will not scale down to different devices for example you are Unable to view it on a mobile device as the web page is too big. This needs to be resolved as currently the "World has 5.8 billion mobile phone handsets used by 5.0 billion unique human beings" (Ahonen 2009). Secondly the text is very difficult to view as it is a small font size and the only way to view this clearly is to zoom in closer. The issue with this is that if a user has issues with their eye sight they will be unable to use the website effectively, this will therefor reduce web traffic.
Responsive
The biggest part of web design currently is making sure That it is responsive, this means That a website works on multiple device screens for example phone, tablet and desktop. A responsive website is usually you you you created by using a fluid grid system, Prechu (2015) suggests the grid system is a set of rows and columns to enable the layout to be controlled using CSS classes.
As it can be seen in the image above it shows how the grid will look on desktop, tablet and smartphone. When creating a website, it is vital that it can work on tablets and smartphones as there are more and more users using these devices Statista (2015) confirms this by saying there are currently between 2.1 and 2.3 billion smartphones being used.
Mobile First Approach
When creating a responsive website, the original approach has been to create it for a large screen first and then work down to a mobile screen, this approach has changed and now designers start with mobile screens. The reason for using this is that more users are using mobile devices instead which means the website needs to look best on mobile devices, also it is more difficult to develop for a mobile device which takes more time.
Foundation
Foundation is a framework that allows a developer to create a website because all the features that are needed are already there, they just need to be put implemented correctly and styled. This is a better way to develop a website as it reduces the time needed which means it can be delivered in a timely manner. For this website foundation will be used for the grid system, responsive navigation, buttons and sliders. This can be downloaded from the foundation website with everything that is required to start developing.
SASS
SASS is a scripting language that is an extension on the CSS language, this does this by compiling back down to CSS. SASS is a powerful language as it allows the developer to create variables and nest code for example a colour could be selected and given a value so you do not need to write hex code for each element.
Methods
To complete this project in an efficient manner the agile methodology is going to be used as it enables flexibility to test each part of the development phase. This is a big benefit for a website design project as there are more than likely going to multiple issues when creating the website, such as it not functioning in the intended way. Foundation and SASS will be used for the layout and styling for the website as they work to create it in an effective way.
Testing Plan
The testing phase of this project is very important when creating a website as there are lots of devices and browsers which it needs to function on perfectly. As stated in the live brief the website needs to work on IE10, IE11, Edge, Firefox, Chrome and Safari on IOS 10 for iPhone.
Design and Planning
High fidelity designs
References
Ahonen, TT, 2009. World has 5.8 Billion Mobile phone handsets used by 5.0 Billion unique human beings, out of 7.4 Billion people alive. In: 2009 [viewed 3 February 2017]. Available from: http://communities-dominate.blogs.com/brands/2017/01/world-has-58-billion-mobile-phone-handsets-used-by-50-billion-unique-human-beings-out -of-74-billion-.html
PRECHU, 2015. 100+ best grid systems & tools for responsive design [viewed 22 February 2017]. Available from: http://www.cssauthor.com/grid-systems/
STATESMAN, 2015. Number of smartphone users worldwide 2014-2020 [viewed 23 February 2017]. Available from: https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/
