Professional Contexts - Graphic Design for Web Part 2
The brief for Graphic Design for web was to produce a personal website design to showcase our work and to begin to create an online presence for ourselves. After creating a website design in semester 1, these sessions allowed us to improve upon our previous designs and use wix.com to produce a working website that at the end of the sessions would be made live.
To begin designing my wix website, I began by researching practitioners websites and find ones that i found inspiring and consider how my own website could take inspiration from theirs.
One website I looked at specifically was graphic designer Mike Kus’ personal design website.
Mike Kus’ website is a multiple page design that is easily navigated and highly organised. The website features a grid of images of Kus’ work as the first thing you see when visiting the site, which works particularly well in showcasing Kus’ freelance design work. The website is simplistic and minimalist in its design which works well as it provides no distractions from the portfolio of work it is intending to showcase.
Overall the website works fairly well in showcasing the artist’s work but is not necessarily very engaging. Whilst a multiple page design works well in making it easily navigable, I have decided to use a parallax design for my website as I think it worked well in my wireframes and mock designs last semester.
As well as looking at Mike Kus’ website, I also looked at Sagmeister & Walsh’s design website to give myself more inspiration in regards to producing a professional and organised website.
http://sagmeisterwalsh.com
Sagmeister & Walsh’s website is extremely high tech and professional in its presentation and features a feed video of their design offices at first visit to the website. The website also features an organised but busy parallax grid system showing their commercial work and is extremely effective in showcase their design work. Whilst using a parallax design, the website does also feature a menu bar at the top of the page that when clicked on, also opens a sub category menu to easy navigation of the vast amounts of work featured on their website.
The use of a parallax design and a menu bar together is not something I had put much consideration into but is definitely something I will consider when designing my own website. Overall, I think Sagmeister & Walsh’s website design is highly effective in showcasing the work of the company and also the personality of the company itself.
Another artist’s website I considered when thinking about my own designs, was Shepard Fairey’s Obey Giant website.
Similarly to Sagmeister & Walsh’s website, Fairey’s website features a mix of parallax design and the use of a menu bar for navigation. The website is well organised and sleek and makes the most of a grid system to give it a professional look. The website’s colour scheme follows the colour scheme used in the majority of Fairey’s work, utilising a red and monochrome theme which works extremely well in highlight the important parts of the website by using the bright red.
Out of each of the websites, Fairey’s Obey Giant website seems to be the most personalised and fitting of the artist and features a news post/ blog stream penned by the artist himself which works exceptionality well in making the website and artist seem more approachable.
After considering the websites of relevant practitioners, I began to consider the wix templates that I could use for my own website. Wix features a vast amount of designs that are all intended for different purposes from restaurant websites to porfolio pages so I began by exploring the designer template options in order to assess which would be the most appropriate for my self promotion website.
One design website template I looked at was for a web & graphic designers as I thought this would be a good place to start my research. The website is extremely simplistic in design and features a large photograph as a background image with bright and eye catching text over the top. The simplistic style of this website is something I’m interested in however the design is very basic and does not do much to showcase the artist’s work. The use of only two pages on the website also means that there is a lot of repetition as you navigate around the website which is not something that works very well.
One design website template I looked at prior to design my website, was the Graffiti Artist template. The template features a parallax design but also includes a menu bar that links to the information and images further down the page which is a feature I think works really well. This template works well as it is modern and easy to navigate and has no distractions from the work it is intending to showcase. The template also works well as it allows for a grid system to be used for the images and means I can have my portfolio fill the screen as you scroll through it which is something I am keen to have. Overall, out of all of the templates I looked at, this one stands out as being the most effective and useable as a basis for my own design so will be the template I use when I begin designing.
Multidisciplinary Designer
As well as looking at design websites intended for graphic designers and also graffiti artists, I decided to look at a website for multidisciplinary designers as I thought this may have a more neutral, middle ground design to it. The website features a vibrant and bold initial image when you first reach the homepage which works well in grabbing the viewers attention and is rather simplistic and well organised which I think works well but does not necessarily shown any personality which is something I am wanting to implement in my website design.
Consideration of previous design
After selecting a template for my website, I considered whether I would adapt my previous website design to fit the template, or alter the template more significantly to accommodate my original design. Overall, I think the original design for my website worked effectively in showcasing my design work without any distractions and the parallax format meant the audience was naturally lead to see my design work in the order I selected. With this in mind, I tweaked my original wireframe slightly to better suit the template and the wireframe is shown below.
After creating a wireframe, I began to create my website design on wix. My original website design actually created several issues when it came to replicating it in Wix, one issue I was faced with is the photograph grids in wix. In my original design, the portfolio images do not follow a particular grid and instead were fit together based on the original formatting of the pictures. Whilst this looked good in my original design, it was extremely difficult to implement in wix and the website ended up looking unprofessional and clumsy.
With this in mind, I decided to reconsider my original design and opted to also change the wix template I was using, and instead decided to use the Multidisciplinary Designer template. The multidisciplinary designer template was more organised and professional looking and will best showcase my design work. Also it will allow me to stick closer to the original template which means it will be significantly easier to add more work as I go along which would have been complicated to do with the original design.
Creating the new website:
To begin editing the website, I decided to begin by selecting the images and design work I would most like to showcase and organise them in to an order that would be refreshing and not blocks of work that is all the same. I decided to stick with this background image I had created for the previous template, which I had created by photographing my desk set up and creating a blue to purple gradient over the top. Using this photograph natural gave me a colour scheme to work with so I decided to use blue as the main colour for the rest of the website.
With the new template, adding images to the website was a lot less problematic that previously and is shown below. Wix’s image upload system is good as it allows you to store multiple images which means you don’t have to go through finding and uploading an image each time you want to add an image to the site which is good for saving time when designing.
Rather than having the information about each piece of work in the bottom right corner of the image like I had when I was using the previous template, or as a rollover like on my original design, I decided I liked the information being readily available and easily accessible to the viewer. The process of adding text to the website is shown below.
Using a parallax design in wix means tags are needed to attach buttons to the part of the page that they navigate the viewer to. As I added more images, the tags shifted away from where they were intended to be, so as shown below, I had to manually move them to where I wanted the viewer to be navigated to when clicking the menu buttons.
One change I made to my original website design was what happens when you click on an image. In my previous design, if you clicked on an image it would open as a full screen image with text underneath. However as my new design is a lot sleeker and more organised, I decided it would be better if the click took you to an information page about each project, which features more images of the work and a bit more information. The process of doing so is shown below.
The last thing needing to be done on the website was to add an about me section and contact information. For these headers, I decided to stick to my original design and have them together at the bottom of the page, after all of the design work has been seen. I decided to do this as it is a good way of insuring the viewer sees all of the work I am wanting to showcase, even if they have only come to my website to find my bio or contact details. I have also included social media links to LinkedIn, Tumblr and Behance so that visitors to the website can access more of my work and contact details.
Website Evaluation (peer evaluation)
After completing my website, Laura gave me feedback on the design and successes and flaws of the website overall. After looking at my website, Laura said that she thought my header/initial image was effective as it immediately shows what my interests and design style is like, she also found that the information links were effective as it meant the website was clutter free but easy to navigate and scroll through. Laura also identified that the parallax scroll may be slightly extensive and could be improved it was combined with a multi page website, for instance having the info/about me as a separate page to break up all the information and suggested I should consider how the website would work if more work was added in the future.
Website Evaluation (self evaluation)
Overall, I think my new website works well in showcasing my design work. Whilst it showcases my images as well as the previous design did, the clean and organised look to the website showcases my graphic design skills better than the original design did, which looked more haphazard and less formatted. Whilst the website does work well in showcasing my work, it doesn’t necessarily echo the aesthetic elements of my design work, which is mostly illustrative which is something I could improve upon in the future. As the website is extremely organised and sleek it does not have as much of a personal feel as I was originally intending for and looks more corporate than I would have liked.
https://esdunn.wixsite.com/esdunndesign