In order to develop a site which is suitable for the target users, technical research was needed to understand the different qualities in which the site would need to display. As the site needs to progress my skills with the field of website development, there are a range of different skills which I would like to improve on whilst working through this assignment. Two of the skills which I really want to develop in this assignment are the advancements in the use of CSS grids, and the use of JavaScript to add animation effect and qualities to the site. As these aspects both require a large amount of research and understanding for each, I wanted to work on these developments on the side of working on the actual site. This way all of the HTML and the basic CSS could be developed before the functionality of these new skills could be introduced into the website.
To begin, the first new skill I wanted to improve was the use of CSS grids, as it can be applied to websites in so many ways and has become a new trend within website design of which I believe I should learn before going into industry. After looking through a wide range of different sites including w3schools and css-tricks the concept of CSS grids was still rather confusing, and even though the concept was testing using text within brackets and adding background colours to each element to test how they would look within a browser, the concept was not working and I was very confused as to why. From this I decided to look for online visual tutorials so that the code which was being produced could be seen and visually demonstrated how each section would work. YouTube was then referred to, and using this the most useful tutorial was found to progress my skills within CSS grids. A tutorial by mmtuts on the use of CSS grids and how to use them really explained the process very well and after testing the process alongside the video using divs and elements which are styled using the process seen in the video, it really showed me how to use CSS grids. After working through the video multiple times, I realised all of the different opportunities which CSS grids provides and how each individual element could also be styled within a grid with a grid of its own. Moving forward from this video, I attempted using CSS grids on a separate website which I had created last year during university. By separating the different sections of the site into divs, inside one large collective div which would be the grid they could be styled using grids, and given grid-areas, allowing for the elements to be styled in specific places within the grid, in an easier way then defining their specific grid row and column for each element.
After understanding the workings of CSS grids, I then moved onto learning more about the use of JavaScript within animation. To begin understanding JavaScript it had been a while since the language had been previously looked at, so I wanted to work from the beginning, allowing to go back through the different processes and theories within the language. To start this I have been reading through a book by Jon Duckett on JavaScript and JQuery which starts from the beginning when learning how to use JavaScript. After reading through the first few chapters the book goes into detail about different functions and methods within JavaScript. Through this section of the book I learnt how to set and call functions, along with adding simple data into a function to produce an outcome. Creating and destructing objects were also passed over through the book, with the current section of the book that I am now working on being arrays. Overall the book has progressed my knowledge of the subject but I was still finding it difficult to apply this to specific elements of the site which I was looking to add the script to. So, YouTube was then turned to as I followed along tutorials to help progress my skills. By following the tutorials on YouTube the skills learnt to develop simple JavaScript to create different feedback to the user was obtained, allowing for user feedback to be created on the button within the portfolio site. Moving forward with this I would like to add more animation elements to the website to make it more interesting for the user, and to add more functionality to the site. As my knowledge progresses with this assignment I hope that the elements which I would like to be included will be able to get developed in time for the deadline of this assignment.
Bibliography:
CSS Grid Layout. 2019. CSS Grid Layout. [ONLINE] Available at: https://www.w3schools.com/css/css_grid.asp. [Accessed 20 March 2019]
CSS-Tricks. 2019. A Complete Guide to Grid | CSS-Tricks . [ONLINE] Available at: https://css-tricks.com/snippets/css/complete-guide-grid/. [Accessed 20 March 2019]
How To JS Animate. 2019. How To JS Animate. [ONLINE] Available at: https://www.w3schools.com/howto/howto_js_animate.asp. [Accessed 20 March 2019]
JavaScript DOM Animate. 2019. JavaScript DOM Animate. [ONLINE] Available at: https://www.w3schools.com/js/js_htmldom_animate.asp. [Accessed 20 March 2019]
Jon, D., 2014. Javascript & Jquery. Wiley
MDN Web Docs. 2019. CSS Grid Layout – CSS: Cascading Style Sheets | MDN. [ONLINE] Available at: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout. [Accessed 20 March 2019]
YouTube. 2019. Creating Awesome UI’s that Animate Only On Scroll – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=S18Wh9IELo0&t=560s. [Accessed 20 March 2019
YouTube. 2019. How To Animate On Scroll Using ScrollMagic – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=Sxgn6z6yLsM&t=310s. [Accessed 20 March 2019]
YouTube. 2019. How to Create Website Layouts Using CSS Grid | Learn HTML and CSS | HTML Tutorial – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=HgwCeNVPlo0&t=1s. [Accessed 20 March 2019]
YouTube. 2019. JavaScript in 7 minutes | Create Interactive Websites | Code in 5 – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=LFa9fnQGb3g. [Accessed 20 March 2019]
In order to display the style and layout of the site which is going to be developed for the client, wire frames and sketches needed to be developed to clearly portray the design and style of what the website would officially look like. To start the ideas for the wire frames, all of the idea processes were looked back through to determine all elements and features which needed to be included into the site. Using the mood board and research into other’s designs for inspiration, a range of different wire frames were developed. Throughout this process, it was found difficult to create a design which really works well and is also one that I am happy with, that could be created using my knowledge and skills.
After sketching a wide range of different wire frames, it became clear that more inspiration was needed for the designs to make them more interesting and interactive for the user. To do this more websites were looked through to collect more design inspiration together. The first website which was used to collect inspiration was DC Fonts, which became one of the most inspiration websites as the design was rather simple but worked well with the different animations and the cohesive theme throughout the site, allowing for the site to look very well put together and keep the user’s interest through the whole process of looking through the site. The other element which worked with this site was the idea of having the different dividers of colour through the site to separate the different sections in a simple manor. These were elements that were taken into the design for the wire frames.
![](https://blogs.brighton.ac.uk/as1769ci264/files/2019/05/InspoSite-300x148.png)
The other websites which were looked through as inspiration were website developer portfolio’s which in general were quite simple but still showed off the work within the site well enough to keep the user engaged with the sites. Another element of the sites which was looked at were the designs of each site when they were changed into mobile view. This was because whilst designing the portfolio, there was a large amount of trouble which came when working on the mobile view of the site, as demonstrating the work became different to show when working on a smaller screen. From collecting inspiration from website developers in how they have portrayed their work on smaller screens, the final portfolio wire frames were developed, taking inspiration from all of the mood boards, collective research and from looking at competitor and website developer sites brought together the concept of the final wire frame.
After the different wire frames were all developed, they were taken to the user to demonstrate how the site would be laid out and to ask if the client had any preference between the different designs which had been developed. Between all of the design the client decided that they preferred the look of the final wire frame as they enjoyed the bold layout with the separators working with the designs within the work themselves. The colour scheme was also another point which came up, as many of the other wire frames contained bold colours throughout the design, where as the final wire frame contained only a few bold colours and kept to the theme throughout, allowing for the work to still stand out for itself all the way through the design. Overall the final wire frame works well as a whole with each individual piece of work being separated onto another page, allowing for each piece to speak for itself.
Bibliography:
Denise Chandler. 2019. DC Fonts – Fonts by Denise Chandler. [ONLINE] Available at: https://www.dcfonts.com/. [Accessed 18 March 2019]
Emily Ridge. 2019. Emily Ridge • Galway based Freelance Web Designer & Developer. [ONLINE] Available at: http://www.emilyridge.ie/. [Accessed 18 March 2019]
Full-Stack Web & Software Development | Dublin, Ireland. 2019. Full-Stack Web & Software Development | Dublin, Ireland. [ONLINE] Available at: https://timmyomahony.com/. [Accessed 18 March 2019]
Pierre.io. 2019. |° Pierre Nel. [ONLINE] Available at: https://pierre.io/. [Accessed 18 March2019]
Matt Farley. 2019. Matt Farley | Designer, Front-end Developer & Mentor . [ONLINE] Available at: http://mattfarley.ca/. [Accessed 18 March 2019]
As the design of the new portfolio was underway, the different options for the site would need to be determined with the client before going into the creation of the site itself, allowing for the colours, text and styles to be determined before the site is completely started. Developing the style tiles provided the opportunity for different styles, colour choices and typography to be demonstrated to the user in a small form, which would not take up too much time, in comparison to developing wire frames and clickable mock ups of the site.
-
-
Style Tile Option 3
-
-
Style Tile Option 1
-
-
Style Tile Option 4
-
-
Style Tile Option 2
The style tiles themselves were developed using Adobe Illustrator, with the themes and colours take inspiration from the mood board which had been developed using Pinterest earlier on in the assignment. Pinterest was also used to collect inspiration on the style in which the style tile would be developed, as the tile needed to demonstrate a wide range of different items, the layout would be almost as important as the tile itself, so using Pinterest as an aid the layout was developed.
![Style tile layout](https://blogs.brighton.ac.uk/as1769ci264/files/2019/05/styleTileLayout-300x207.jpg)
Once all of the designs were developed, the ideas were taken to the client to discuss which style they preferred. During the discussion the client mentioned that they were looking for a site which is clean and modern, and would prefer the colours which would be used as a background (monochrome colours) to be on the lighter side, allowing for the work to really stand out from the background. They also mentioned again that each individual piece should speak for itself, so utilising the colours and the images which have been provided from the client would be advantageous. Between all of the style tiles, it was decided that the theme of style tile 1 would be used and taken forward into the development of the final design.
Bibliography:
Pinterest. 2019. 19 Best Website design and development images in 2019. [ONLINE] Available at: https://www.pinterest.co.uk/nobodyliveslife/website-design-and-development/. [Accessed 15 March 2019].
Pinterest. 2019. 20 Best Style Tile Examples images | Web style guide, Brand design, Branding design. [ONLINE] Available at: https://www.pinterest.co.uk/taoticreative/style-tile-examples/. [Accessed 15 March 2019].
To begin the process of idea generation, the concept of mind maps were used to display the different options which could be used within the website, and also to outline the different elements which would need to be included into the site. When creating the mind maps, many different elements were included to allow for the outline to include all elements which the website needs and might need. To understand this, the client requirements were referred back to, highlighting all of the important points which were brought up in the discussion. Along with this different online sources were using including Nielson’s heuristics and top current design trends to highlight other avenues which could be explored with the new site, including the use of user control and ensuring the site is accessible for all users. ![Ideas mind map](https://blogs.brighton.ac.uk/as1769ci264/files/2019/05/ideaMindMap-300x224.jpg)
From these mind maps, the progression of ideas can with sketches, wire frames and style tiles to illustrate all of the points which have been notified within the mind maps.
Bibliography:
Nielsen Norman Group. 2019. 10 Heuristics for User Interface Design: Article by Jakob Nielsen. [ONLINE] Available at: https://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed 10 March 2019].
10 Fantastic and Creative Web Design Styles | Tom Kenny Design. 2019. 10 Fantastic and Creative Web Design Styles | Tom Kenny Design. [ONLINE] Available at: https://tomkenny.design/articles/10-fantastic-and-creative-web-design-styles/. [Accessed 10 March 2019].
19 web design trends for 2018 | Webflow Blog. 2019. 19 web design trends for 2018 | Webflow Blog. [ONLINE] Available at: https://webflow.com/blog/19-web-design-trends-for-2018. [Accessed 10 March 2019].
When starting this assignment it was decided that WordPress would be used to create the finished site, as it had never been used before and would be provide a good starting insight into how to use WordPress and all of the necessary elements which would need to be included whilst using WordPress. Along with the hosting options and content management systems which could be utilised whist creating a WordPress site, it also provides the option for the client to make small changes once the site is finished if they want to add different elements.
To begin the process of developing the WordPress site Brighton Domains was logged into and an account with WordPress was set up with the accompanying software onto my laptop. With the new account set up alongside the blog account which has been developed to document this assignment a simple theme was chosen for the new portfolio site which could be easily edited and changed to allow for as much originality as possible within the site. Before starting on the site, more knowledge was needed to really understand WordPress and it’s inner workings. To do this a wide range of different YouTube videos were watched to understand not only the layout of the files but also how to access the back end of WordPress altogether. From watching the different tutorials on how to access the back end files, a problem occurred almost immediately which was that the files were not accessible on the software which I had downloaded onto my laptop from Brighton Domains. After looking into this problem, there were no tutorials which could be found to overcome this issue, so WordPress was opened directly from the official website and then downloaded separately onto my laptop. Once downloaded from the official website the option to view the back end files were available. A new account was then opened and a basic theme was applied to the site with the HTML, CSS and PHP files which could be accessed.
To learn more about how WordPress works, more tutorials were watched and read to understand how the files could be changed and improved in order to develop a site which is completely customised to the standard which the client has asked for. Through the extra research it was learnt that the design of the site could be changed as long as the template for the site was not changed, but added to. This would mean that any changes which would be made to the site would need to go at the bottom of the code which was already in place for the template. Although classes and id’s could still be added to elements to specifically style them, it was noted in a wide range of sites that too much editing to the current code could break the template and the site in general.
Along with the option to edit the code of the site, there is also a basic editor within WordPress which is mostly used by those who do not have the skills to go further into the code of the site. This editor can be used to change the main aspects of the site including the background colour, fonts, widgets, menus and other major content options. This editor could be used to change the main elements of the site without going into the code itself, providing an easier option to edit large aspects of the site.
Bibliography:
ThemeIsle Blog. 2019. Beginner’s Guide: How to Use CSS in WordPress for Easy Style Tweaks. [ONLINE] Available at: https://themeisle.com/blog/css-in-wordpress/. [Accessed 29 March 2019]
WP Buffs. 2019. How to Edit WordPress Source Code (HTML, CSS, PHP). [ONLINE] Available at: https://wpbuffs.com/how-to-edit-source-code-in-wordpress/. [Accessed 29 March 2019]
YouTube. 2019. How to access and edit wordpress php files from the wordpress dashboard – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=vOwdXY_x1yo. [Accessed 29 March 2019]
YouTube. 2019. File Manager for WordPress? No FTP required to edit files in WP – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=9Nq7yoof_iw. [Accessed 29 March 2019]
YouTube. 2019. What PHP file to Edit in WordPress? – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=JY6uIDAVTpM. [Accessed 29 March 2019]
YouTube. 2019. WordPress File Manager FTP Inside WordPress – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=YR1YFaNHn18. [Accessed 29 March 2019]
YouTube. 2019. 4 Places To Edit WordPress CSS | WP Learning Lab – YouTube. [ONLINE] Available at: https://www.youtube.com/watch?v=vLSUWT9MNlA. [Accessed 29 March 2019]
After the user testing had been collected together the next stage was to develop personas which would demonstrate the target user characteristics, allowing for the development of the site to be directly suited towards the exact type of user which would be accessing it. To develop the personas the characteristics which were demonstrated through those who worked on the user testing the previous day were taken and merged with the answers that were given for the user testing to create the type of user which would access the site. Along with taking characteristics from the users which had been spoken to the day before, social media and interior architect research was also used to access employers who are currently in the industry.
After working on the development of the personas, scenarios were then created for each character to demonstrate how the site would be used and navigated around, allowing for the development of the site to be clearly suited to those who will be using the site. When working on the scenarios from the personas, the situations would be those that target users would find themselves in when looking through the portfolio site.
Overall from collecting the data of the target user and how they would potentially interact with the site has allowed for the site to be styled for the correct user interactions and provided the information of elements which would also need to be included into the site to make the interactions of the user easier. One of these elements includes clear and simple navigation on the site, along with connections to social media and clear sections devoted to the client’s own work.
Bibliography:
Assistant Secretary for Public Affairs. 2019. Personas | Usability.gov. [ONLINE] Available at: https://www.usability.gov/how-to-and-tools/methods/personas.html. [Accessed 12 March 2019]
Assistant Secretary for Public Affairs. 2019. Scenarios | Usability.gov. [ONLINE] Available at: https://www.usability.gov/how-to-and-tools/methods/scenarios.html. [Accessed 12 March 2019]
UX courses. 2019. Personas – A Simple Introduction | Interaction Design Foundation. [ONLINE] Available at: https://www.interaction-design.org/literature/article/personas-why-and-how-you-should-use-them. [Accessed 12 March 2019]
UX courses. 2019. Personas – A Simple Introduction | Interaction Design Foundation. [ONLINE] Available at: https://www.interaction-design.org/literature/article/personas-why-and-how-you-should-use-them. [Accessed 12 March 2019]
UX courses. 2019. What are User Scenarios? | Interaction Design Foundation. [ONLINE] Available at: https://www.interaction-design.org/literature/topics/user-scenarios. [Accessed 12 March 2019]
The UX Review. 2019. Personas – The Beginner’s Guide – The UX Review. [ONLINE] Available at: https://theuxreview.co.uk/personas-the-beginners-guide/. [Accessed 12 March 2019]
When it comes to the industry of Interior Architecture, I personally do not own much knowledge into preferred skills and traits within the industry, so to develop a website which is focused towards this industry, more knowledge was needed. To begin, research into the different types of users was undertaken, allowing for the site to be focused towards the specific type of user, in turn providing the opportunity for the site to reach out to that audience and show all of the requirements which might be wanted by the user.
To begin the user research different agencies and those within the industry were talked to, collecting primary and secondary research into the different types of user and their personality traits. Collecting information from potential users was the first element of collecting user research, so a set of short questions were discussed with architecture students and staff, allowing for a wide variety of those within the industry and the competitors which the client’s portfolio site would be up against in industry. The questions asked were formatted to provide quantitative and qualitative data.
As seen in the results above, the majority of target users thought that a website would need to stand out from the crowd and really demonstrate the user’s work in a positive manor to attract attention. Many also mentioned that the use of colour is really important along with a clean layout. Working within architecture many users thought that a website was different to showcase work, as it would usually been shown at shows being put up on large boards so all can see, which is something that would need to be taken into consideration when developing the website. Along with this most of the users would prefer to see the ‘most recent’ post in comparison to the ‘most proud’ which is another element to take into account before working on the development of the site. Finally there were a range of different social media links which came up in conversation of which would be most preferred, so these links would also need to be included into the site.
Overall from collecting user research it has provided the opportunity to get a better understanding of the industry and what the user would want to see from a portfolio website along with the potential accompanying social media.
To understand more about the field in which the design would be developed for competitor analysis was needed to determine elements which are being displayed in current interior architecture portfolio websites. When researching into interior architecture portfolio websites, it showed that at this time there are not a large amount of portfolio sites out there for this subject in comparison to others. Interior architecture companies were found more so than portfolio sites, showing that many different elements could be included into the portfolio to show originality and personality through the site. To understand more about the site’s functionality, each site was tested using Nielson’s Heuristics to pinpoint where each site excels and where they could be improved, allowing an overview of which elements are important to include into the new site in comparison to competitor sites. This was done by layout out the main elements of Nielson’s Heuristics, along with some of my own points which I believe are important, and judging each site out of five on how well they perform compared to each task. Having these charts allowed for a good overview of how each site works and can easily show my I prefer these sites in comparison to other portfolio sites.
The first interior architecture site to be looked at was ‘Lancaster Interiors’ which was a portfolio website created for Amber Lancaster to demonstrate her work in residential and commercial design. The site itself is very simple and is used to purely demonstrate her work through the use of a large image gallery which can be seen on the homepage. The overall design of this site is very simple and is purely used to just display the work of the designer in a basic way. When going through the different elements of Nielson’s Heuristics in comparison to the design, it showed that this site did not have too many elements to keep it engaging for the user. Along with this is proved to be the lowest scoring out of all the sites which had been analysed, demonstrating room for improvement, although what I would like to take from this site would be that the work takes priority within the design, which is an element that would need to be placed into my own work.
![lancasterInteriors](https://blogs.brighton.ac.uk/as1769ci264/files/2019/02/lancasterInteriors-300x169.png)
The second site is the portfolio of Victoria Spicer, of which is not an interior architect, but when coming across this site, I was very impressed with the animation, user engagement and design layout of the site itself and wanted to use the overall design as inspiration towards the new portfolio site. The site uses a top navigation, which although is not sticky provides animation each time the user scrolls up to it, along with the animated page transitions and image load ins, provides the user with good visual representation of the portfolio of work. Although when looking at the site through Nielson’s Heuristics, it can be seen that it does fall slightly short when it comes to help documentation, recognition, error prevention and system status. This is due to the fact that there are no elements in the site asking for the user to input information to contact the designer, along with this the site also does not have an easy breadcrumb trail leader the user back to the homepage. As much as the page transitions work well, they do not aid the user when trying to return back to different pages of the site.
![VictoriaSpicer](https://blogs.brighton.ac.uk/as1769ci264/files/2019/02/VictoriaSpicer-300x171.png)
The next site to be looked at was the portfolio of Adele Bates who is an interior designer and has an original style of website. The style of website stood out to me because it was different to the standard types of portfolio’s which can be seen form most interior architects, with the navigation placed on the sides of the screen and the centre column being used to display all of the work and information for each page. The page transitions on this site also keep the user engaged, along with the animation of the page as it loads while the user scrolls down. Although the site itself does not contain much colour, the animation and interaction options still provide the user engagement opportunities to ensure the user has an enjoyable experience within the site. When it comes to the Nielson’s Heuristics analysis, it turned out that this site scored the highest in comparison, proving the style and overall functionality of this site should be taken as inspiration for the new portfolio website.
![AdeleBates](https://blogs.brighton.ac.uk/as1769ci264/files/2019/02/AdeleBates-300x169.png)
The portfolio of Emma Kay was the next site to be looked at, with the different format of scrolling across the page, rather than down. Having the different scrolling style made the website stand out, and with the cohesive theme being used across the whole site, really made an impact on the user. The colours which have been used within the site are all displayed within the images which have been chosen to display specific colours, providing a theme of colour as the user scrolls through each page. When compared to the other sites using Nielson’s Heuristics it showed that the site worked really well with the navigation, layout and consistency within the site but did not provide much user feedback including help documentation, error prevention, system status or any other form of system feedback. Overall the layout of the site and how it is used to demonstrate the portfolio work is good, and will be taken forward to the new portfolio design.
![EmmaKay](https://blogs.brighton.ac.uk/as1769ci264/files/2019/02/EmmaKay-300x170.png)
The final portfolio site to be looked at was the portfolio of Sara Zofko who is an interior decorator. The style of site was at first glance very similar to the portfolio of Emma Kay, but the theme which has been used on the homepage does not continue throughout the site, making the overall experience slightly confusing for the user when clicking through the different pages of the site. Although the different style pages make the experience confusing for the user, the layout for the portfolio projects works well to display the variety of work which has been completed and having each individual job being displayed on its own page provides detail for the user. When looking at the different heuristics of the site displayed positives in almost all areas, although the site itself lacked consistency in the design and layouts, along with the lack of colour throughout. The elements which will be taken from this site into the final design includes the easy navigation and how the portfolio work is being displayed.
![SaraZofko](https://blogs.brighton.ac.uk/as1769ci264/files/2019/02/SaraZofko-300x156.png)
Overall from look at competitor sites within the industry there are many different elements which can be taken as inspiration from the sites seen above. All of these elements will be taken into account when the development of the portfolio website begins.
Bibliography:
Adele Bates. 2019. Studio – Adele Bates. [ONLINE] Available at: https://www.adelebates.com.au/profile/. [Accessed 24 February 2019]
Amber Lancaster. 2019. interior design – Amber Lancaster. [ONLINE] Available at: http://www.amberlancasterinteriors.com/. [Accessed 24 February 2019].
Emma Kay / Creative Director & Stylist / Interiors / Props / Set Designer. 2019. INTERIORS / STILL LIFE – Emma Kay / Creative Director & Stylist / Interiors / Props / Set Designer. [ONLINE] Available at: https://www.emma-kay.net/editorial. [Accessed 24 February 2019].
Nielsen Norman Group. 2019. 10 Heuristics for User Interface Design: Article by Jakob Nielsen. [ONLINE] Available at: https://www.nngroup.com/articles/ten-usability-heuristics/. [Accessed 24 February 2019].
Sara Zofko Interior Decoration. 2019. PORTFOLIO – Sara Zofko Interior Decoration. [ONLINE] Available at: https://www.zofko.com/3937022-portfolio. [Accessed 24 February 2019].
Victoria Spicer. 2019. Victoria Spicer — London based Set Designer. [ONLINE] Available at: https://vspicer.com/. [Accessed 24 February 2019].
In order to demonstrate to the client the different styles and themes which were going to be used in the design of the portfolio a range of different mood boards were developed using different software. The first mood board was developed to show the initial thoughts for the website including the style and colour pallet which demonstrated a geometric, flat design, one page style of website. Images and graphics were very present in the design along with the use of bold colours and utilising the images which were present within the design. When showing the client this mood board, all of the designs and colour were very much enjoyed and the client was very happy with the style and look of all the different designs.
![Photoshop Mood Board](https://blogs.brighton.ac.uk/as1769ci264/files/2019/05/Photoshop-mood-board-300x214.jpg)
After a few days of working on the designs for this website based on the images which have been seen in the mood board, the client came back and requested for the design to include some simpler elements than those which can bee seen within the mood board. This was due to their concern that the images which will be placed within the site might get lost in the bold colours which could be seen on the first mood board. To overcome this issue, another mood board was developed using a site called Pinterest, to demonstrate different designs which have a slightly smaller amount of bold colour and design, but still work to produce the same effect as the previous mood board.
![Pinterest Mood board](https://blogs.brighton.ac.uk/as1769ci264/files/2019/05/pinterest-mood-board-300x152.jpg)
From looking at the second mood board with the slightly subdued designs the client was much happier with the designs which can be seen on this mood board in comparison, although did still want to see some involvement of the designs which can be seen in the first mood board.
Bibliography:
Pinterest. 2019. 19 Best Website design and development images in 2019. [ONLINE] Available at: https://www.pinterest.co.uk/nobodyliveslife/website-design-and-development/. [Accessed 23 February 2019].
With the creation of this site being focused towards the client’s wants and needs there were specific requirements which the client had asked for to improve the site’s demonstration of their work along with complying to the client’s needs and wants throughout this assignment. After the first meeting with the client the main feature which was wanted within the site was originality, to ensure that the site does not look like any other within the industry, demonstrating how the client would like to be displayed to future employers. As the client themselves is currently a student, the site needs to include the most recent work, along with showing any relevant work experience or other qualifications. When it comes to the work which is going to be shown, each individual piece ‘speaks for itself’ as stated by the client, so would need to be shown in a manor to honour this. To display the work to the client it has been decided that meetings will be held every week to work through the different stages of the design, ensuring that each stage adheres to the client’s wants and provides time to make changes to the design if needed.