3 digital showcase
DESCRIPTION
Third Project of Five from Second TermTRANSCRIPT
DIGITALSHOWCASE3
3
What is a portfolio website? What is a title portfolio website used for? This book explores what a portfolio website is and follows the journey as I attempt to design and film my own while applying it to a context.
A student on the BA Graphic Design Programme, this book holds my ideas, thoughts and views on portfolio websites. While it shows my skills, design and abilities in attempting to film my own.
4
THE BRIEFIt was clear that upon reading the brief I was being told to self brand myself, this would be done through creating an online portfolio website and a brand stationary set. The website would be used to publish the work I produce and myself as a Graphic Designer.
I was being instructed to create a digital portfolio of the work I have produced both at uni and in the private world of design. The format of the online portfolio would be an online website, this would allow me to send the link for the website to companies around the globe so they can see my work. This acts as a quick quide to what my work looks like, so companies will be able to see my design style.
There are certain things that I have to think about when producing my website, the design style and if the systems I have incorperated are most suited to displaying my work. I also have to think about subjects such as user testing, this is to see if people can navigate around the website easily, and to see if there is logic and order behind the website. Another major factor that I am going to have to think about in the production of the portfolio is the show casing of my work to a professional level.
Image 1 - A stationary set used as branding items, for
the design organisation know as Musse.
5
6
RESEARCHThis brief started with me researching into websites produced by other designers, this would allow me to see what content is found on a Graphic Designers website.
I started by looking at content and it was clear that upon looking at variuos websites there was always three sections that were common across all the websites I looked at. These were: work which displays a portfolio of the latest work produced by the designer or organisation, about which reveals information based around the subject and the last section was contact so that if the website viewer liked the work they saw they were able to speak to the designer or organistation.
7
RESEARCH
I believe that I would have to build these sections into my webstie because they are important and it keeps in with continuity across other designers websites. This would allow for easier navigation for the user as they wouldnt be looking for a seciton of the website that isnt there.
With the designing aspect of the website I feel that having these 3 sections is what will help with my project logic. These sections are needed for the website to make sense. The contrbute to the flow of the website, they cover all the topics for a client to understand the story of my work.
Top Left Image 2 - A screenshot showing the
navigation and areas found on Ged Palmers website.
Bottom Left Image 3 - A screenshot showing the
different topics that are found on Mike Perry’s portfolio.
Top Right Image 4 - A screenshot allowing you
to see the side navigation betwwen projects Benjamin
Frederick Haskings has under taken in his freelance time.
8
After deciding the sections that where needed, I went on to research into the different design styles there are for a webiste. In the layout of a website it was shown that there are certain routes you can go down to prouce a layout. These include a table layout, a fluid layout and a responcive website layout.
The table layout is the oldest and most traditional, in the past it had its benefits as it allowed the designer to easily structure their website. However this layout option was popular at a time when most computer monitors were small and of similar
Above Image 5 - A screenshot that shows the
table design implemented by <HTML GOODIES/> acorss
their website.Right Image 6 - A snapshot
of the tbale design that is used by the Pensylvania
University in old sections of their website.
9
sizes the table layout of a website would fit well inside it. But now a days compter monitors come in varying sizes, this means using a table layout which cannot adjust its self to the width of the varying screen sizes. Will leave a lot of unessecary negative space that does not look visual pleasing.
The website on the left shows a traditional table layout of a wbsite, although it had its benefits in the past it is out dated and not necessary anymore with web design.
10
The next layout option I looked at was fluid layout, this modern technique of laying out a website is beneficial. This is becasue, although you are restricted by the screen width. You are able to have elemants of the website, change and alter themselves depending on the screen width. This gives the impression the website is different for every users screen. This is beneficial cause no matter how big you have your browser the webstie adjusts its self to a desktop brower size.
However the negatives of a fuid website include that they are hard to code unless you know expert coding skills for both html and css as they are the languages used to code fluid layouts. Another negative of a fluid website is that, the coding is not compatiable across all platfroms and web browsers the coding would of been read differently and the layout will look differnet.
Below Image 7 - This is the front page of Michael
Paul Youngs Portfolio and it is a clear example of fluid
layout in use as the website resizes itself according to the
website browsers size.
11
There was a variety of designers and companys websites that I looked at for fluid layouts as it compliments a variety of subjects. This is because if the designers have a modern design style. Using coding that allows your website to change its self is very modern, so I believe this layout style to be appropriate to a range of designers.
Right Image 8 - Shown is the homepage of Deux Huit
Huit, It is a clean, modern example of fluid web design.
Below Image 9 - Here is the more apporach to fluid
layout web design, that has been apporach by the Flow
Festival Design Team.
12
13
The final layout style that I looked at was responcive web design. This type of design allows for the containers and elements used in your coding to adjust themselves to the screensize. Responcive Web Design is the newest style in layout design for webpages. Why it is used is because less code is used in comparison to fluid layouts, however it has more benefits because it means that the full screen size has been take advantage of.
When researching into designers web pages there where a few who used responcive web design. The two that I liked the most and felt had the best design style were FILMGERBEREI this was because of the large type and clean visula system implemented. While I also liked the deisgn style taken by Belgian design agency Chilli, THis was because the work was shown neatly and professionaly. While the celan minamilistic visual system applied to the website, is similar to my design style.
The benefits of this web layout process include that you dont have to design three different websites one for desktop, tablet and phone. The website adjusts its self according to the sreensize it has been open on and the what the coding specifies for that screen ratio.
However the draw backs are, great coding skills will be needed to produce the html and css files that create the website. Another drawback is good mathamatical skills are needed to figure out the ratios need to adjust text, width for element containers and the scaling of pages.
Top Left Image 10 - Is a great example of responcive web deisng, that was created by
the FILMGERBEREI team.Below Image11 - A
responcive web design portfolio that will adjust its
self to the screen size when it is opened up.
14
15
INTIAL DESIGNSWhen creating a webstie and you get to the design section the first logical step is to produce drawn wireframes. This consists of placing squares and rectangles on a page to see where you would like element containers to go
In my design I want to use the whole width of the viewers screen. This means the div containers that I am going to use in my coding will have to be able to adjust their own width depending on what screen size they are opened up on. This means that with my design I am going to have to take into consideration the average screen size so that images can adjest proportinally to them to.
The design that is shown is a wireframe for the main page of the website that I want to produce. I believe that creating a long scrolling website will look nicer than having a navigation pbar and other pages being found from that. On the front page you can find the portfolio, about and contact divided up into two sections. This would allow someone visiting the website to see my work, then if they like what they see. The are able to find out who I am and how to contact me when they are complete.
Left Image 12 - This is me writing down the rules that I would like to apply to my CSS pages, these build up the visual system that I am
going to implement.
16
The next step after desiging the main page for the wesbite was to go on an design the template for a project page. On this page you would find information and photographs of the work that I produced. As this is only a template for a project, each porjects html page may change depending on the types of photographs and how many are taken for each individual project.
The wireframes that are shown show how I would like the website to look. However features and areas may change depending on weather or not I can code sections and if coding for certain features excist.
Near Right Image 12 - This is the wireframes I have
drawn up for the pages that I am going to use for my
project pages.Far Right Image 13 - A
wireframe I created for the main page of the website.
17
18
19
DIGITALISATIONThe next step after drawing up wire frames is to go on and produce the website by digitalisting these ideas using code. I chose to hand code the website as it is the way I felt I had most control in trying to implement my visual system.
I decided to use Adobe Dreamweaver instead of other text based editors as it is the software that I have had the most expeirnece and use with. This meant that I knew I had the skills and knowledge to be able to code the webframes that I had drawn up.
I started by coding the portfolio page for the website that would house the 3 sections of the site, the portfolio, the about and contact sections. I felt this would be a good page to start with because it is the main focus of the website.
Right Image 14 - This is a screenshot showing the coding behind the
homepage of the website.Below Image 15 - This is a screenshot showing the
coding behind the projects page of the website.
20
The area that I focused on next was creating a CSS document that I would link to all html files I created. By producing a css page, it means that all pages would have the same visual system in place and they woulld look similar. This is because the CSS document would apply the same characteristics to every html file linked to the website. The only thing that would then be able to change these characteristics is futrther coding applied to each html file.
Below Image 16 - A screenshot showing the
coding on the CSS page that is linked to all my html files.
21
I then went on to produce a template for my pages that would hold infomration and photographs on the work I produced. I decided to create a template as it would keep continuity throughout all my work pages.
After I had coded the template I went about inserting the text and photographs that I had taken for each project that I had undertaken. This meant that I had to retake photographs of all my work in a professional manner. By doing this it would make my website look a lot more professional and would attract a more impressive client.
After taking photographs of my work, I placed them into photoshop and chose my favourite compositions. I then used tools to edit the photogaphs to make them better and then for each project I applied a different background colour behind each photograph. This was to create a smaller visual system for each project with in a larger visual system. One that is used across the whole website.
Above Image 17 - This is a photograph that was taken
of my display book.Right image 18 - Showing the same photograph after
editing, it is now more appropriate for the website.
22
23
With my website complete, I went for a tutorial with Maclom. We discussed the useability of the site, the composition and navigationa throughtout the website. He spoke to me about the typography and typeface I have used in the website and how it will adjust its self in cohenrance to the responcive web deisgn I used.
After discussing the website, it was clear to see there where a few areas that I would have to change before I could submit a final website and make it live. The feedback that I recieved is shown in the notbook pages shown.
Left Image 19 - A notebook page showing the feedback
from my tutorial with Malcom about my website.
24
USER TESTINGAfter implementign the feedback from my tutorial with Malcom the next logical step was to get user to test my website and gain feedback from them. I organised a series of tasks for people to attempt to do on my website and got the to write down their answers and responces.
The questions that I asked are to test the websites navigation, reponce and userbility. I feel they reflect all the users need when operating my website. The questions range from simple tasks to, ones that would would test the skills of more experienced users. I have given the questions to 3 people of varying ages and abilitys. This is to give my self a wide range of responces.
You can see the reponces that I have recieved and the users feedback written underneath the tasks that I set them to do.
Right Image 20 - This is the feedback sheet that I recieved from Emma
Anderson, it shows her results from my user testing.
25
USER TESTING
26
27
The feedback that I gained has been essential as it allows me to seethe weaknesses and stengths with in the wbestie that I created. With this knew knowledge I was able to tweak my website so that any major weakneses I got from the feedback was resolved.
I believed that after adjusting the website to the users needs and what was wanted. I felt the website was complete and ready to be made live for the public to see and use.
Left Image 21 - This is the feedback sheet that I
recieved from Louie Gilpin, it shows her results from my
user testing.Above Image 22 - This is the feedback sheet that I
recieved from Alison Belcher, it shows her results from my
user testing.
28
FINAL IMAGESAfter sorting out the bugs and issues with the website, the final site was complete. It was hand coded and designed by Benjamin Gilpin and the intential idea was to be used as a portfolio to display my work.
The website produced is a long scrolling webpage that has all 3 sections on it that are needed for a logical Graphic Designers portfolio website. You start by scolling down the weboage and find the most important information, the work that I have produced. After this if you like the work and what you saw, the next section that is revelaed to the user is about me and how to go about contacting me.
Another feature that I coded into the website using responcive web design, is that if you resize the browser window. The content will adjust its self to fit the screen. This means you only have to code one website to fir on desktop, tablet and phone as the site adjusts itself to the screen size.
Right Image 23 - This is a screenshot of the front page of the website, it introduces you to who I am and what I am in the first few secods of
visitng the website.Next Page Top Left Image
24 - This is a screenshot of the projects page for my
display book.Next Page Bottom Left Image
25 - This is a screenshot of the projects page for my
SWISS Air Extension.Next Page Right Image
25 - This is a screenshot fshowing the homepage of
the website.
29
30
31
32
33
34
EVALUATIONThis is the section on where you can read how I felt I did through out this project. You will be able to see where I felt my strengths lied and where I think I need to improve.
This was my favourite brief of the unit of work as I felt it was one that allowed the course members to use technology and software that a lot of them wouldn’t of used before. I feel this project is the project that I produced my best work on through the unit of work. This was because as it was a self portfolio I was able to execute my ideas and what I had imagined as my self portfolio to how I liked it. When doing research I was able to look at designers that I feel had similar design styles to me and large designers to see what draws people in to have a look at there website.
I feel i pushed my knowledge with this project as I worked with Adobe Dreamweaver, software that not everyone on the course knows. While I also I feel I pushed my self as when coding my website I was able to code it so that it adjusts itself depending on the screen size it has been opened on. This is an idea that I do not feel many other students thought of. I feel that I have expanded my knowledge of website design and further my coding ability.
On the next few pages you find my personal
evaluation and how I feel I did on the breif along
with my refernecing .
35
I feel areas that I lacked in was doing more user testing and getting people to test my website to the best of their abilities. This would of been more beneficial to me as it means more problems with my website would of been brought up. Thus allowing me to tweak the website so it suited a broader audience.
36
REFERENCINGImages - Image 1 - Behance. Stationary Mock Up. (2014). [online image]. https://www.behance.net/gallery/18872561/Free-Stationary-Mockup-(Psd-Smart-Object) [Accessed on 2nd January 2015]Image 2 - Ged Plamer. Ged palmer. (2015). [online image]. Available from: http://www.gedpalmer.com [Accessed on 3rd January 2015]Image 3 - Mike Perry. Mike Perry. (n.d.). [online image] Available from: http://www.mikeperrystudio.com [Accessed on 3rd January 2015]Image 4 - Tumblr. Benjamin Frederick. (2015). [online image] Available from: http://benjaminfrederick.tumblr.com [Accessed on 3rd January 2015]Image 5 - HTML Goodies. CSS Layouts Without Tables. (n.d.). [online image]. Available from: http://www.htmlgoodies.com/beyond/css/article.php/3642151 [Accessed on 3rd January 2015]Image 6 - University of Pennsylvania. Creating Web-Pages in Dreamweaver using Tables for Layout. (n.d.). [online image]. Available from: http://www.sas.upenn.edu/computing/lrc/documentation/dreamweaver/makingpages [Accessed on 3rd January 2015]Image 7 - Michael Paul Young. HomePage. (2015). [online image]. Available from: http://www.michaelpaulyoung.com [Accessed on 3rd January 2015]Image 8 - Deux Huit Huit. Deux Huit Huit. (2015). [online image]. Available from: https://deuxhuithuit.com/en/ [Accessed on 3rd January 2015]Image 9 - Flow Festival. Line Up. (2015). [online image]. Available from: http://www.flowfestival.com/en/ [Accessed on 3rd January 2015]Image 10 - Filmgerberei. Filmgerberei. (2015). [online image]. Available from: http://www.filmgerberei.ch [Accessed on 3rd January 2015]Image 11 - Chilli. Homepage. (2014). [online image]. Available from: http://chilli.be/en [Accessed on 4th January 2015]
Websites - Julia Kostreva. (2015). Julia Kostreva. [online]. Available from: http://studio.juliakostreva.com Accessed on 5th January 2015] - Kate Moross. (2015). Kate Moross. [online]. Available from: http://katemoross.com [Accessed on 5th January 2015]
37
- Mike Perry. (2015). Mike Perry. [online]. Available from: http://www.mikeperrystudio.com [Accessed on 3rd January 2015] - Site Inspire. (2015). Design and Art Direction Websites. [online]. Available from: http://www.siteinspire.com/websites?categories=73 [Accessed on 10th January]
38