Jennifer Hall

GRAPHIC DESIGN | PROFESSIONAL CONTEXTS

[jennyhall8]

Sawdust Design

Sawdust specialise in bespoke, innovative typography, brand display typefaces, visual identities and image-creation. Their website is well designed similarly to the likes of Firebelly design, using a two column grid. When a project is selected the images increase to the full width of the screen, further displaying the high resolution and image quality. Although, this feature can as a result slow down loading time therefore may not be most appropriate.

[jennyhall8]

Lynda.com Tutorial 

As part of the Graphic Communication in Context module, I wanted to explore the purpose of iconography and learn more about the process of designing such icons. The Lynda tutorial I watched based upon this taught me how to create icons with visual clarity using simplified messages. I was most interested in the creation of minimalistic flat icons created using simplified shapes with minimal detailing.

It is beneficial to firstly sketch out your icon idea, then open the image into illustrator and begin layer a series of elliptical and rectangular shapes. After doing so the ‘Pathfinder options can be toggled to either ‘unite’ areas or ‘minus front/back’. Once you have the desired shape an ‘outer glow’ can be added to create a sense of dimension.

[jennyhall8]

Firebelly Design

Firebelly is a design studio based in Chicago, I came across when searching for inspiration on ethical design practices. Their website is immaculately laid out using even columns of images and minimal text. I particularly appreciate the use of large high resolution images which scale to the size of your screen. The project pages also show a small element of the development process, which I find fascinating.

An element of the companies website I feel is lacking is a fixed header which scrolls down with the rest of the screen.

[jennyhall8]

Lynda.com Tutorials

Creating PDF Forms with InDesign with Michael Murphy

Creating an Interactive PDF Brochure with Mike Rankin

Creating an Interactive PDF Magazine with Mike Rankin

InDesign: Fixed-Layout EPUB Interactive Techniques & Publish Online with Keith Gilbert

I watched a variety of online Lynda tutorials to help with my knowledge of creating an interactive PDF. Each of the tutorials were very helpful and taught me how to add drop down text, skip to pages in a document from a content list, hover over images and videos. All of which techniques I have applied to my own PDF document for other areas of the course.

For example, the process of adding a button to a document starts with selecting the object you wish to have interactive capabilities, then following on to (Buttons & Forms) ‘button’, name the button and select ‘hidden until triggered’. Choose an action ‘show/hide’ then amend the visibility options to your preference.

[jennyhall8]

Links to Social Media Platforms

Behance: https://www.behance.net/jenniferhall8

LinkedIn: https://www.linkedin.com/in/jenniferhalldesign

Twitter: https://twitter.com/jhalldesigner

Pinterest: https://uk.pinterest.com/hall9689/

Wix Website: https://jhall832.wixsite.com/jennifer-hall-design

[jennyhall8]

Wacom Tablet - Tutorial 03

During the third tutorial using the Wacom Tablets, we created slightly more complex drawings than previous. Again using the Wacom to create an outline, I then duplicated the layer and selected the ‘Multiply’ effect, which retains the dark areas of the sketch. It is important to name the layers you are working on accordingly, as it helps when amending areas as it is clear where they have been separated. After creating a new layer, I used the ‘Polygonal Lasso’ tool to select the area I wished to colour, next I selected the ‘Mask’ tool at the bottom of the layers panel (select artboard [ ] & add mask to selection). The ‘Brush’ tool can then be used to colour over the area and only the selected section will be affected.

I have really enjoyed working on the Wacom tablets and I think it would suit my style of work to use the tablet when rendering my designs. I hope to continue using the tablets placed around the studio to better my knowledge and skillset.

[jennyhall8]

Human After All Design

Human After All is a London based creative studio who’s work caught my eye, from their refreshing approach to design and their desire to create purposeful design which communicates a message. The company uses a lot of colour and illustrations within their work, thus developing a clear style. An element of their website I liked was the option to narrow down their work by providing different collections in the form of icons (Digital, Branding, Publishing...).

[jennyhall8]

Wacom Tablet - Tutorial 02

Tutorial 02 gave me the opportunity to experiment with not only Photoshop but Illustrator too, which is my preferred choice of the Adobe programs. Using the Paint Brush tool, similarly to Photoshop you can create a new brush by accessing the Presets. The main difference between Photoshop and Illustrator is that Illustrator is vector based and Photoshop is Bitmap. Once the presets have been selected either a Bristle, Calligraphic or Pattern brush can be chosen. 

When drawing shapes the outline can be drawn using the Wacom and colour can be added through this process - Expand appearance > Pathfinder > Merge. The outline can be copied onto a new layer above and each separate area can then be coloured in, adding highlights and shading.

Tips: Double click the Paint Brush tool on the left menu and Tool Options will appear (Fidelity = Accuracy).           Object > Path > Clean Up - Erases any stray points

[jennyhall8]

Wacom Tablet - Tutorial 01

From the three tutorials available (Print Making, Laser Cutting & Wacom Tablets) I decided to sign up for the Wacom Tablet training sessions, in order to learn and develop a new skill. Initially we were showed how to set up the tablets for use, when connected to a PC or Mac. Once all of the cables had been plugged in and the screen tilted to the preferred angle, I began calibrating the tablet by accessing the Wacom Desktop Centre settings. Calibrating ensures the upmost accuracy when using the pen to draw or navigate around the screen. 

Photoshop is a program often used with the tablet to draw or edit photography, I created a new document in Photoshop to begin experimenting with the tablet. I created a series of Brushes to gain a better understanding of how the pen works with the tablet, to do so I ‘toggled’ the brush panel from the tool bar at the top of the screen and ticked/unticked my preferences. 

Tips: Square brackets [ ] will reduce/increase the size of your brush          To access Pen Pressure (Shape Dynamics > Pen Pressure)

To save the brush I had created I opened Preset Manager (at the bottom of the brush panel) and clicked save. This is a great tool to reduce time if working on a different computer to save/load the brush, as opposed to recreate it again. Considering I had not used a tablet before, I think that the session went well and I was able to follow each step accordingly. I like using the tablet as it gives rushed sketches a more refined professional look.

[jennyhall8]

Final Stop Motion Video Upload to Wix & Evaluation

To upload my self promotion video into my Wix site it was important to ensure that the file did not exceed 15mb, this was to prevent the video from slowing down the load time of my site. I chose to display the video as a focal point of my Home page where it would be most visible to viewers and selected the ‘loop’ option in order to repeat the video continuously. The video was created 1920 x 1080 (average screen size), so the video works well when stretched to full screen size on the site and the white background helps the video to fit in with the theme of the site.

Overall I think the video works well in conjunction with my site to promote myself as a professional designer, the video states my technical skills and the process I carry out when completing a design. I have also stated a email contact towards the end of the video and a selection of social media icons for people to potentially follow my work on. I consciously chose a white background layer to ensure the video fit within the theme of my site, however I could include more of a focal colour such as red within the text to break up the black and white scheme.

Another aspect I would consider revising would be the inclusion of the logo within the video, this is because of the secondary inclusion of the logo in the header of my Wix site. This may appear a little overpowering to see two of the same illustrations on the Home page, however when viewing the video on another site such as Youtube the logo would be an essential element.

[jennyhall8]

Stop Motion Video - Final

In conclusion, my final video effectively encompasses all of the individual aspects I hoped to include within the video design. The 15 second limit pushed me to make each element clear and concise, with a focus on me as a brand and my attitude and knowledge as a designer. The video works well as a piece of self promotion because it promotes my brand identity and provides relevant information clients would be interested in. 

As previously stated, if the time limit of the video was extended I would have liked to include more elements such as high resolution images of my completed work, or details of work experience I have completed.

[jennyhall8]

Rendering the Stop Motion Video in After Effects

To create the video in After Effects I directly brought the Illustrator file into the program and created a new composition at screen size = 1920 x 1080, frame rate = 25 and duration = 15 seconds. The separate layers created in Illustrator can then be amended individually using keyframes and other effects the program provides. The layers can be moved and reorganised or can be toggled using the ‘eye’ tool to show or not show the layer, this can be helpful when working on a particular segment of the video.

Once all of the effects have been applied and you are happy with the play back of the sequence, the video can be rendered for output. To do so you ‘add composition to refer queue’ and amend the settings to which the video is exported (Video codec: H.264). You can then select where you would like the file to save and hit the render button.

[jennyhall8]

Rendering my Second Stop Motion Draft in Illustrator

In order to improve upon my original design I wanted to amend the moving lines at the start of the composition to something more eye-catching. I chose to create a series of layers of squares at alternate sizes and stroke widths. This would allow me to bring the squares into the video at a growing opacity and change their position/growth rate using keyframes. 

Moreover, I created separate layers of duplicate elements in a focal colour of red, as applied within my Wix website. I thought that this would ensure that the video fits seamlessly into my Wix website composition.

[jennyhall8]

Stop Motion Video - First Draft

In my opinion, the first render of my video was quite successful and I am happy with the overall look and feel of the composition. I was able to render my storyboard effectively in the way I initially hoped. However, on analysis I thought that the video did not effectively communicate a sufficient element of myself or my design work, as it just showed my logo. In order to improve upon this I hope to create more elements to include within the video, taking more inspiration from my initial research. For example including such things as stating that I am a graphic designer, what I specialise in, how I approach projects and some relevant contact information. 

[jennyhall8]

Rendering my Stop Motion Video Design in Illustrator

In order to create my stop motion video I decided to use Adobe Illustrator, to compile the layers of my animation in an ordered fashion. The way in which I hoped to render my video meant it was important that I used layers, to separate each element of my design. I created a new composition with the dimensions of 1920 x 1080 pixels and an RBG colour format, which is most appropriate for web use. I followed on from taking influence from my initial storyboards and began layering up elements of my stop motion design. Naming the layers was important at this stage, so when uploaded into After Effects I could clearly identify which object I was amending.

I began creating the animation with my logo, separating the initials in order to be able to load them individually within the video. I then created lines which would move and cross over the screen whilst my logo would essentially load in the centre. 

[jennyhall8]

Storyboarding my Stop Motion Video Design

Before rendering my stop motion designs in After Effects, it was important to plan out my ideas in the form of a storyboard in order to identify any possible problematic areas, or areas in which I could improve. My initial ideas were to have my logo as a key element of the video, using crossing lines to accentuate the overall impact of the composition. I would then place more text into the video, stating my technical skills, design process and contact information. 

A potential problem that I came across through carrying out the storyboard process was that my logo alone may not be sufficient enough to communicate my role as a graphic designer. Therefore to resolve this issue I hope to state below the logo ‘Graphic Designer | Communication & Brand Development’.

[jennyhall8]

Further Stop Motion Design Inspiration

When researching stop motion video’s I came across a particular video in which I particularly liked and hoped to take inspiration from within my own work. The video initially shows a range of square shapes alternating in scale, opacity and stroke weights, it follows on to show a logo fading in from 0% opacity to 100% opacity. I appreciated how the shapes have been included to attract a viewers attention immediately and create a focal point within the composition. 

The simple black background colour ensures that a viewer is concentrating on the focal element and does not distract attention from the moving parts of the image. The logo hereafter takes precedence and text promoting the brands website slowly appears, this video is simple yet I think works well as a short composition. As my Wix website includes a generous amount of white space, I would continue this approach into my video and potentially use a white background layer.