March 2019 archive
From looking through the user testing results that had been collected, it was noticed that there were a range of social media sites which came up to be included within the site. Before deciding on which social media to use, the different types of which the client is currently using needed to be determined, allowing for a clear knowledge of which links can be put onto the site, along with which links would be more favoured within the industry.
To begin, a meeting with the client was scheduled to go through all of the social media which the client is currently on. From this it was learnt that there were not many sites which the client was actually on as they personally do not enjoy social media. Although they had been using Facebook, Pinterest and had recently downloaded Instagram, although they did not have LinkedIn which was brought up a few times within the user testing and would be beneficial to add to the collection of professional social media. After suggesting this to the client and offering to create an account for them, the client decided that they did not want to have any more social media at the moment, and that in time they will create an account which can be added into the site at a later date.
When researching into the social media which the client currently has, the overall view of the social media was kept professional, allowing for a clear view of how the client works along with their hobbies and interests. When looking through current interior architect’s social media accounts there were a range of similarities which could be seen between the client’s social media and those of others within the industry.
-
-
AI
-
-
Client’s Pinterest
-
-
DHD Pinterest
Along with comparing the client’s social media to that of competitors and agencies, the social media was developed by adding more posts which are related to interior architecture on Pinterest, Instagram and advancing connections with those in the industry. Following different interior architecture companies and influences allows for more interest to be shown in the subject across the different platforms which possible clients or employers could take an interest in.
Bibliography:
IA Interior Architects. Facebook [ONLINE] Available at: https://www.facebook.com/interiorarchitects/ [Accessed 29 March 2019]
I29 Interior Architects. Facebook [ONLINE] Available at: https://www.facebook.com/i29-interior-architects-190319081010539/ [Accessed 29 March 2019]
Pinterest. 2019. 14 Best Archi images in 2019. [ONLINE] Available at: https://www.pinterest.co.uk/yazzie_v/archi/. [Accessed 29 March 2019]
Pinterest. 2019. 50 Best DHD – Commercial Office Design images in 2019 | Architecture interior design, Commercial office design, Interior architecture. [ONLINE] Available at: https://www.pinterest.co.uk/dhd_nyc/dhd-commercial-office-design/. [Accessed 29 March 2019]
Pinterest. 2019. 691 Best Commercial Architecture Design images in 2019 | Architectural drawings, Architecture, Architecture design. [ONLINE] Available at: https://www.pinterest.co.uk/architectsideas/commercial-architecture-design/. [Accessed 29 March 2019]
Yaz Verg. Facebook [ONLINE] Available at: https://www.facebook.com/profile.php?id=100010472973504 [Accessed 29 March 2019]
ᎽᏘᎦMIᏁ (@yaz_verg) • Instagram photos and videos . 2019. ᎽᏘᎦMIᏁ (@yaz_verg) • Instagram photos and videos . [ONLINE] Available at: https://www.instagram.com/yaz_verg/. [Accessed 29 March 2019]
#interiorarchitects hashtag on Instagram • Photos and Videos . 2019. #interiorarchitects hashtag on Instagram • Photos and Videos . [ONLINE] Available at: https://www.instagram.com/explore/tags/interiorarchitects/. [Accessed 29 March 2019]
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.
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 4
-
-
Style Tile Option 1
-
-
Style Tile Option 3
-
-
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.
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. 
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.
