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]