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.

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].