May 2019 archive
Now that the site has been completed and all elements have been finished, the project as a whole has been rather challenging in a range of different ways. To begin there have been many hurdles which have been faced throughout this assignment, including the change between developing a WordPress websites to a hand coded document, learning new skills in JavaScript and CSS grids, along with more knowledge within CSS animations and working with different issues which can arise within the mix of JavaScript and CSS.
Through working with a client it has been learnt that many last minute changes can be made to edit small elements of design, along with large ones. Although what has been learnt from this is that time management is really key in order to finish projects on time. Although this assignment has been particularly difficult with the different adjustments which have been made, the knowledge and skills that have been taken from this process can be applied to many industry situations, and being easily adaptable is also key.
The knowledge which has been gained within JavaScript is also an element in which I am proud of and would like to continuously progress, as this is an element which causes a large amount of issues for me personally, taking the time to learn and understand the main elements and how to apply these to different situations within code has really moved forward my skills. The slide show at the top of the main page would have to be the biggest hurdle which has been faced when it comes to the development of the site, as it took a large amount of time and many trial and error attempts to complete a working slider, it was a large achievement when it began working.
Along with these new skills, the use of CSS grids has been applied to this site of which was another element that had no been explored before. From understanding how to use this skill, it can be applied to all future sites and has really shown how much easier it is to use grids, rather than standard code with many individual stylings.
Overall from the development of this site, much has been learnt and the new skills which have been taken from this site are going to help throughout my career. As for the site itself the design and colour scheme work well with the images that have been used throughout the site, although if there were more time to work on the site there are a range of different changes and additions which would be made. Firstly the use of the slider at the top of the page works well, but throughout the assignment scroll magic was another element that was being learnt, but there was much trouble understanding how to utilise this tool within my own code. After many different trial attempts I was unable to achieve a working scroll effect that could be placed onto the site itself and with the time frames that were given, it was not achieved. This was an element that was disappointing when not seen on the site as it was really hoped that more animation could be included into the site, but it has taught that time management is important and when working on projects with tight time frames I need to make sure to focus efforts towards the elements that will be working and finished by the deadline. If there were more time to work on the site, more animation would defiantly be included along with different scroll effects and page transitions. Not only this but the site could be improved with the addition of a logo and possibly more content and description on the main page when more work can be added to the portfolio.
Overall I have found this assignment to really test my skills and progress my knowledge in a range of different areas, which will aid my work ethic when in industry. Although there are many elements of the portfolio which could be improved, the client was very pleased with the finished result, which in the end makes the process worth it.
Once the website had been finished to the best of my ability in the time frames which had been given to me, the website was finally shown to the client to collect together their final thoughts on the design, functionality and overall website. When meeting with the client for the final time they had mentioned that they were very excited to see the finished design as they are going to use it to demonstrate to future employers which is very positive.
On first view of the site the client was very excited by the slideshow of work along with the mix of colour and separation within the first section of the website. In the first mention the client stated that the really like the colour combinations as it emphasises the work on the first section, along with clearly showing the entry into the next section of the site. When moving onto the ‘About Me’ section of the site the background colour choice was greatly enjoyed along with the choice of images and layout of that section of the site. The text was mentioned in the conversation as some parts had been taken out so that section of the site was not cramped with text, but after reading through the information which had keen kept on the site the client was very happy with the overall result.
Continuing to scroll through the website, the client also mentioned the use of the social media icons which have been placed underneath the ‘About Me’ section which they thought worked well as to add opportunities to contact the client. The ‘work’ section of the assignment was also a positive as the client really liked how the site looked on a mobile view with the click through to the responsive images which can be seen on each separate page. The desktop view was also enjoyed, but the client did mention that they thought more animation elements could be added to the site, but due to the time constraints I was not able to include as much animation to the site as once hoped. Other than the slight lack of animation, the client was very happy with the layout of each project and said that each piece of work stood out against the backgrounds and having their individual pages really emphasised the size of each project.
When at the bottom of the page the contact section also went down well, being linked to the client’s email allowed for response to the data which would be sent, providing an enjoyable experience whilst on the site. The difference in the layout of the contact section between the mobile and desktop views also worked well together and provided an interest for the user if viewed on different devices. Finally the footer at the bottom of the page also provided opportunity for the user to move across to different social media platforms, which the client really enjoyed.
Overall, the client was very pleased with the finished site and the main aims for the site had been completed within the time frames that have been given for this assignment. As well as potential users being very impressed with the work which is being displayed on the site, the client was overall very pleased with the finished site and enjoyed almost every aspect of the site. As there had been many setbacks whilst developing the site, the client was very supportive of the work which had been developed and mentioned that they are so happy with the site which had been created and in the end was very glad that the site was not developed using WordPress as the originality of the site is exactly what they were looking for, in comparison to a WordPress developed site.
As the end of the assignment is coming closer the final touches to the website were going to be applied before the hand of the site. The results from the user testing showed that there were a few more simple issues which could be changed on the site before the final hand in, to ensure that all elements of the site work and are suitable for the user.
The first element which was changed included the social media icons that had been used through the site, as the images were not clickable, so URL links were added to allow the user to go through to the social media if they were interested in contacting the client using other methods, or if they wanted to learn more about the client through different avenues.
The layout of the grid was the next element to be changed, allowing for the white space between certain elements which had been used to show where the grid started and ended, making it easier to style, but was not needed when the site was finished. When changing the layout it was noticed that the ‘Contact Me’ text had been placed above the red line dividers, which made it seem as though the there was no title for the contact section. So the two were changed using the CSS grid method and placing the grid-area for each above one another in the table which had been created.
The last elements of the site which were changed included the opacity of the navigation bar, which was made darker, allowing for it to be seen easier against the background of the site and making it more obvious to the user. After this the final element to be changed was the footer text, which stated ‘Designed by: annabelspain@hotmail.com’, of which could be linked to an email, making it easy for any users to contact myself if they were interested in a website. This was done using an anchor tag with a href link to my email address, and then styling the text with no text decoration properties.
After adding these elements, there were many other sections which I would like to have included, but I was generally happy with the outcome within the time frames which had been given.
Once the site had been developed to the standard in which I was happy with, it was time for the site to be user tested, to change any final issues which the site which can be seen by the target users. In total three different users were asked of their opinions of the site to collect together the different opinions and thoughts on the site. When taking each user through the site, the desktop view was looked through first with the questions to the user being;
- What are your thoughts on the website?
- Do you believe there are any elements of the site that do not work with the layout/ scheme/ demonstration of the client’s portfolio work?
- What do you like about the site?
- Are there any elements which you could see improvement?
- Would this site demonstrate to you what the user does?
- Final thoughts?
The first user to test the site was a student who is currently studying the same course as the client, of which is Interior architecture. Having a user within the same industry allowed for any issues which could be related to the target sector to be noted and then changed before the assignment was over. Also, having a colleague of the client allowed for someone who knows the work and style of the client well and could mention improvements or changes to suit the client’s personality more.
- I really like the site, the different segments work to display all the different parts of the site and also link to some of the work which is actually in the site. How the work is shown is really easy to access and the different pictures of the title pages gives an insight into what each project is about.
- It might be easier to have links on the burger menu to the different pieces of work as it would be another way to access each piece. In the ‘About Me’ section the ‘dance of the cranes’ is quite a large piece and might be worth making it bigger so all the detail is easier to see. Also, it would be good to have the images clickable so they can be enlarged and looked at closer as there is text on some of the images that is difficult to see.
- I like the segmentation with the red lines, it makes the site well structured and clearly shows the different parts. The slideshow at the top is also quite fun.
- I think on the pages with the work on them adding some back buttons to the main website might work, because the burger menu is not too obvious. Also there is quite a lot of spare space on the left hand side of the contact section which could be filled with something, it looks quite bare.
- Yes, this does demonstrate a portfolio of an interior architect student.
- I really like the site, although I think a few small changes are needed to improve it.
The second user to test the website is within the field of interior architecture and is a part time lecturer of the interior architecture course at the University Of Brighton and has many years experience within the industry. From being within the industry for many years will provide feedback from looking through many different applications along with knowledge on how to demonstrate portfolio work.
- My overall thoughts of the website is that it is a very original idea, as most students have a physical portfolio compared to an online portfolio, but I like the idea. It is very clear from the top of the page that it is demonstrating some form of architect’s portfolio and I like how simple the design is. I really like the colours throughout as it does not detract the attention away from the work.
- The only thing I would say that could improve the look of the the work on the site, would be to enlarge the size of the image of work on the ‘About me’ section as it not clear why it is there or what it is showing. Although I do think the overall looks better on a mobile version.
- The colours work really well together with the work and the layout of the site, along with the overall demonstration of work. The amount of text through this site is also good as it sticks to the point of what the employer would want to see rather than rambling on.
- The navigation bar on the site is not that obvious and could defiantly be changed, possibly make it darker so it is easier to see and does not look like it is a part of the page. I also think that maybe it would look good to add something to the slideshow section on the desktop version as I feel like there is a large amount of spare space there in comparison to the rest of the site.
- It could be made clearer by making the statement that she is an interior architect student somewhere on the site in bold, making it more obvious.
- I think this is a good representation of an interior architect’s portfolio of work and has been demonstrated in a fun and exciting way.
The final user was another member of the industry who had worked within interior architecture for their whole career and has knowledge of hiring within the industry. with this in mind the user criticised the site in the mind of an employer.
- This is a very nice simple looking website, I like how it shows all of the work which has been placed well throughout the site. It is very different to websites which have been shown to me in the past which I like.
- On the pages which are showing the work, it might look better with a grey background on the white pages as the white work on the white background really washes it out and makes it look unfinished. Although the colours chosen for the site work well and do not take anything away from the actual work on the site.
- I like the slideshow at the top of the page, it is eye catching and makes me want to explore the rest of the site. The red lines also work at dividing the site apart, but I think that on the contact section the title for this should be placed below the lines rather than above them.
- The contact title should be moved below the red lines and possibly add the red lines to the bottom of the site below the contact form but above the footer. The navigation bar is also hard to notice as you had to point this out to me, so this should defiantly be darker.
- Yes this does look like a website of an interior architect.
- I like how the site looks and how
Overall from collecting together the opinions of potential users for the site, there are a range of different elements which would be improved and changed to make the site more appealing for the target user. Although there were a lot of different parts to the site which could be improved and developed on, the general response to the site was very positive and showed that the site would work well within the industry at demonstrating the work of the client. One of the users mentioned that the site was very original and is a layout of which they had not really seen before, which was very positive as one of the main asks of the client was that the site was different and could be noticed clearly between different designs. Overall the response was very positive and although there were many chances of improvement, I am happy with the outcome from the users.
Bibliography:
Chris Knowles. 2019. 8 UX Research Methods to start using in Web Design. [ONLINE] Available at: https://www.growthdrivendesign.com/blog/ux-research-for-web-design-8-methods. [Accessed 10 May 2019]
Complete Beginner’s Guide to UX Research | UX Booth. 2019. Complete Beginner’s Guide to UX Research | UX Booth. [ONLINE] Available at: https://www.uxbooth.com/articles/complete-beginners-guide-to-design-research/. [Accessed 10 May 2019]
How To Conduct User Research Like A Pro (Step-By-Step Guide). 2019. How To Conduct User Research Like A Pro (Step-By-Step Guide). [ONLINE] Available at: https://careerfoundry.com/en/blog/ux-design/how-to-conduct-user-experience-research-like-a-professional/. [Accessed 10 May 2019]
