seen from Singapore
seen from Singapore
seen from United States
seen from Italy
seen from Norway
seen from United States
seen from China
seen from United States
seen from United Kingdom
seen from Canada
seen from Italy
seen from Australia
seen from China
seen from Brazil
seen from Germany
seen from United States
seen from Canada
seen from Czechia
seen from Italy
seen from Portugal
Professional Contexts - Online Presence
Alongside producing a website for self promotion and online presence, I also created LinkedIn and Behance accounts.
Behance: https://www.behance.net/esdunn2838
LinkedIn: https://www.linkedin.com/in/elle-dunn/
Professional Contexts 1 - Lynda Tutorials
List the tutorials you have looked at:
InDesign CC 2017 Essential Training
Summarise the key points from each tutorial (no more than two sentences for each), considering information that you have gained from each video.
The first section of the tutorial videos gives a general overview of how to get started in InDesign and how to add and edit text, graphics and objects along with a general overview of printing a pdf.
The second section of the tutorial videos gives an overview of how to create an indesign document and each of the settings in the document dialog box. The tutorial also gave insight into how to apply text formatting and text frames.
The third section of the tutorial videos gives an in depth tutorial in how to manage and create pages in a document and how to utilise master pages.
Discuss how these skills might be used within your design
The skills I learnt from the tutorial videos will be extremely helpful when producing documents in InDesign and taught me the correct ways to implement basic techniques in order to make my projects more professional and organised and are skills that will be implemented constantly when using InDesign.
Are there any other tutorials listed that you intend to watch?
I intend to finish the InDesign Essential Training tutorial course as there is over 6 hours of information and another 10 sections of tutorial videos, which if as helpful and relevant as the first 3 will be extremely valuable to me. I also intend to watch ‘Working with Illustrator’s panels’ to help me understand what all of the tools available in illustrator can be used for and also
Do you consider Lynda.com a useful resource?
I find Lynda an extremely useful resource as it is always the first place I go to when wanting to find out how to do something, especially when using adobe softwares and is a resource I find easy to follow.
Professional Contexts - Film and Animation
Similarly to in Website Design, the brief for filmmaking was to make an end product to be used to self promote our work. The brief outlined that we were to produce a piece of motion graphics up to 15 seconds long that was a looping film communicating our individual style and skills with a minimum of 14 frames.
Self Promotion Animations and Videos Research
Eric Dyer’s Zoetropes
Zoetropes are an effective way at producing an animated, looping video for self promotion. Unlike most zoetrope artists before him, Eric Dyer creates extremely complex and intriguing animations that feature highly detailed imagery. Whilst I appreciate the style of Zoetropes, I am not sure that it would be the most effective technique to showcase my design work as it does not follow the same stylistic approach.
Rachael Park’s Self Promotional Animation
This example of an animated video is very impactful and has a professional feel to it due to the clean, simplistic icon illustrations and is highly effective in promoting Rachael Park’s abilities and skills in an eye catching but well thought-out manner.
Cinemagraph Artist Research
A cinemagraph is a looping gif animation that features selective movement. Pioneered by creative team Jamie Beck and Kevin Burg in 2011, the cinemagraph is an extremely interesting style of animation and is one that I find fascinating and could lead itself interestingly to the self-promotion animation. The examples below are some of Burg and Beck’s cinema graph pieces that I find particularly interesting.
After considering a number of different animation techniques, I decided to create a cinema graph as I feel it would best suit the direction I want to take my design work in in the future and will also look most at home on my wix website. With this in mind I began to consider how I could create a cinema graph that works as a self promotional piece and decided to create a cinema graph inside of a cinema graph using an experimental cinemagraph I had previously created. I also decided to use a desk set up similarly to the background image on my website to give it a thoroughly link to the website design and also give the website a more personal feel.
Filming of Footage
To film the footage for the animation, I set up a camera on a tripod on the edge of my desk and then tidied my desk slightly before setting the cinema graph on loop on my mac screen. As it is a looping gif, I didn't need that much footage to edit into my gif so only had to do a couple of takes of the shot before I was happy with the footage I had gained.
Adobe After Effects Tutorial
Before editing my footage in After Effects, we had a tutorial on how to edit and produce gif animations in the software. The tutorial we had was on how to produce a stop motion animation using a large quantity of still images to build up a movement of a person on screen and whilst not directly relevant to the technique I have used, was extremely interesting and will be helpful when I next need to use After Effects. The tutorial covered the basics of composition and frame rates (being 1920 x 1080 and a 25 frame rate) and keying and effects settings such as adding transitions between keyframes.
After learning about how to edit the animation, we were lead through the render process. The video had to be rendered as a H.264 codec which produced an .mp4 file we can then upload to the wix website design.
The end walk loop animation I produced is shown below.
Editing in Adobe After Effects
When it came to editing my own animation, I created a new composition and dragged the selected footage into the composition and trimmed it down to the footage I needed. I then scrubbed through the video and selected the frame that I wanted to use as the still image, I then enabled time remapping through the layer menu which produces two keyframes one at the beginning of the video and one at the end. I then marked a new keyframe on the frame that I wanted to be my still image and then deleted the other key frames, leaving only a still image.
After doing so, I then dragged the same video clip into the composition and created so that it will play beneath the still image. Selecting the top layer, I then used the pen tool to select the section I wanted to keep moving in order to make a mask.
After editing the video and rendering it as a H.264 codec .mp4 file and watching it outside of after effects, I decided to tweak the colouring of the video so went back into after effects and tweaked the different effects and settings which really helped improve the video.
After producing the cinemagraph animation using the layer mask, I tweaked the effects of the video in order to give the image a better colour range as the initial footage had a warm tint to it. Finally when I was happy with the animation, I rendered and exported it, the video can be seen below.
Adding Film to Wix.com website
After finishing the animation, I decided to upload it to my wix website. To do so I created a mix pro gallery and uploaded my video into it which allowed me to embed the video rather that using youtube or Vimeo to upload it. Embedding a video into wix means you have more control over the settings of the video and meant I could put the video on a loop.
Making website live
After tweaking the website and uploading my animation, I was ready to make my wix website live so that everyone can see it.
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.
http://mikekus.com
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.
https://obeygiant.com
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.
Web & Graphic Designer
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.
Graffiti Artist
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.
Adding images:
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.
Editing Text:
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.
Adjusting Tags:
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.
Info Pages:
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.
About Me and Contact:
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
Module: Professional Contexts
Workshop: Printmaking
In this workshop, which consisted of two sessions, we looked at the basics of mono-printing and printing on the Risograph. The final product was a small booklet printed on the Riso using artwork created by the students. In the workshop we learned how to make unique, one-off prints uding the mono-printing technique, as well as how to use the Riso, which in turn gave me an idea to print my book for the Visual Communication module on this brilliant machine. This workshop was very useful as it taught us some valuable manual skills that every designer must have.
Professional Contexts - Independent Study - Lynda Tutorials
List the tutorials you have looked at:
Illustrator CC Essential Training (2015) InDesign CC Essential Training (2013)
Summarise the key point from each tutorial (no more than two sentences for each), considering the information that you have gained from each video.
The illustrator essential training tutorial provided helpful tips and information on how to navigate the software. It also gave insight into how to use the software to create artworks and gave information on how to use the tools in illustrator in the correct manner.
The indesign essential training tutorial provided outline how to navigate the software and how to set up the correct document for the work you were making. The tutorial gave insight into how to use some of the more common tools which will be useful moving forward.
Discuss how these skills might be used within your design modules.
The skills that I have learnt from the Lynda tutorials will be of good use throughout most of my design modules due to them discussing fundamental features of softwares I will be using to produce the majority of my digital work. After having watched the InDesign tutorial, I will be able to easily format any documents I create so that they respond to a grid, which is not something I had previously known and will come into a lot of use and further my design abilities. The illustrator tutorial will also be of use as I had not previously used Illustrator and was not aware of all the benefits and tools the software has that I could have been making the most of.
Are there any other tutorials listed that you intend to watch?
Print Production Essentials: Choosing Paper
InDesign Secrets
Graphic Design: Insight and Advice
InDesign Typography
Do you consider lynda.com a useful resource?
The Lynda resource is extremely useful in providing information on softwares and new techniques and will be my point of call whenever I am unsure of how to use a software or design technique as it is a reliable and trustworthy source, unlike other sources.
Professional Contexts - Risograph
After producing mono prints, we were then introduced to risograph printing using the risograph machine. The risograph machine using a master which is sits over a coloured ink drum and is created from scanning a master image in. During the session, the process was explained in detail before we each produced collages using the work we had produced during the mono printing session, the masters I produced can be seen below.
After producing the masters, the groups collages were printed out and collated into a book which can be seen below.
The risograph process is an extremely interesting one and lends itself well to producing mass work and is definitely a technique I would like to explore in more depth.
Professional Contexts - Mono Printing
Mono printing is the process of laying out a thin layer of ink onto a glass surface using an ink roller before laying paper over the top and using pressure to attach the ink to the surface of the paper. The technique is an interesting image making process and one I enjoyed exploring during the session. Below are the images I produced during the session, overall the images were not as strong as I had hoped they would be but as a first attempt I think they were reasonably effective.
After completing the trace mono prints, we were then shown through the reductive mono print technique which is created by covering a glass surface with a think layer of ink and the masking or taking away sections of the ink. The design is then transferred onto a sheet of paper using a roller press and can produce some interesting outcomes. Shown below are the outcomes produced during the demonstration.
