Graphic Design (Screen) DES317
- Kyle A. Magowan
- May 15, 2017
- 5 min read
Graphic Design (Screen) DES317
This Blog will detail my production for “Graphic Design (Screen) DES317” with projects focused on many different areas of graphic design for screen. The modal will be broken up into 4 stages.
The first: To create an design manifesto that embodied how we viewed ourselves as creative designers and visual artists.
The second: To create a dashboard interface that would be similar to a conventional employment CV but present the information in a unique and easy to read way.
The Third: To create a responsive portfolio website concept layout design for desktop, tablet and mobile devices. It was important to understand the message that we wanted to give to people viewing the website and to make the three variations consistent stylistically to create a brand for our self’s.
The Forth: To create a short animation that demonstrates how the user will interact with the dashboard or website.
MANIFESTO
The first stage of the manifesto design process starts out the same as any design process....Research! and to do this I jumped onto the internet and headed straight to trusty Pinterest, looking at as many manifestos that I could and started to organize and catalogue them into the ones that I thought the message of the manifesto was delivered clearly and effectively. Once I had my catalogue of manifestos and trimmed it down again to make a simple mood-board of the ones that I thought were the best.
After looking at my dashboard I thought that I was set on creating on a conventional text heavy manifesto deliver a message that was told to me by one of early design teachers while I was still at the SRC Banbridge “your idea has already been done... now make it original” with this hard hitting statement I thought that this would help to make this manifesto stand out but once it came to making it I felt this message was too long and that it needed to be changed to something with is visually interesting but also give a simple message that the user would read in a few seconds. After more research on pinterest looking at different styles, I came across a range of different materials that used the American 50’s style of neon and once I seen this I know that this was going to be the design that I would take on myself but now it was time to make it original.
I took on the conventional idea of a using a light bulb which had been done to death but wanted to see how I turn it into a 50’s neon sign. By using Adobe Illustrator to create the shape which was simple but when it came to adding text I felt that there wasn’t any fonts included within the adobe set that fitted that style I was working towards.
I chose to use a font that i found online as I felt as it was exactly want I had in mind for what I thought was needed – font http://www.dafont.com/neon.font. After the font the final stage was to style up the piece to give it a real neon lighting effect to make the piece come alive against the background.
Dashboard
Now that my manifesto was finished the next stage of production was to work on the dashboard. the idea of the dashboard would be to create a piece that delivered information about myself, similar to what you may find on a CV but the present all the information in a clear and easy to understand format.
The first stage of the dashboard was to research different dashboards and to go that I went Pinterest again looking at hundreds of different designs looking at the elements of the structure to see what areas I could take on myself. A important element to keep in mind was that the dashboard should be designed as if it was going to be viewed on a tablet device.
After looking at a range of different styles, I thought that the best course of action would be to develop a dashboard that uses a similar style to my manifesto as I felt that the style would transfer over very well into dashboard.
Now that I had an idea of what the content of the dashboard was going to be the next stage was the layout of the dashboard and to do this I created three grey templates focusing on layout ideas for the final piece.
For the final design of the dashboard I created two variations both with the same layout but with a slit change in colour I got the advice to change the colour and text after a presentation in class and I feel that the finished piece is much better because of it.
Final Version
Website
Now coming close to the end of the class and with my manifesto and dashboard finalised it was time to start work into web. Before I started to research different styles I wanted to create a modern one page website that could be viewed easily by anyone but to do this I wanted to have a very simple but professional look to the website and I didn’t feel that the chosen style which I had been using up until this point would work for the look I wanted to give. The website would be a portfolio style page for “LOGICAL ORDER” which is my own brand that I have been using for just over 1 year now.
Once I started research looking at different website layouts on Pinterest I saw a common trend between a lot of different pages and that was to use shapes and leading lines that would allow the eyes of the user to follow down though the page. This layout comes from how in the west we read from left-right on any page and view any image in a similar way, so by designing a website layout that uses a “Z” shape style the eyes of the visitor will be able to easily follow the page.
With this style in mind I jumped into creating a grey template layout that used a “Z” layout. There was much experimenting with the background colours and text in the first variation I wanted to use background image but because I didn’t have any of the photos I wanted to use myself I took them off the internet but after a presentation I felt that the best thing would be to use solid background colours and a simple colour pallet and this time when I use a background Image it was one of my own photos.
version 1
Final Version
Animation
The final stage of the animation was to create a Gif animation which would demo user interface for the website to do this i used Adobe After Effects.
Comments