PORTFOLIO 1
Co nte nts
Intro 3 Website Research 4-7 Developing Portfolio
The principals of graphic design, the framework for using elements in the most appropriate and effective manner to create meaningful and understandable visual communications. Elements are the “what” of a graphic designers visual language, and principals are the “how.” When carefully considered and utilized together, they allow graphic designers to “speak” in an accessible, universal, visual language. The elements and principals of graphic design such as point, line, shape, light, color, balance, contrast, and proportion are a graphic designers vocabulary for giving a voice and, ultimately, meaning to any visual communication. Without a reliance on these fundamentals, visual communications will be ineffective, non- communicative, and will not “speak’ to any audience. My goal is to create a clear representation of the work I have created over the passed few years in an effective and communicative designed online website portfolio.
Introduction
To promote yourself as a brand is one of the most important things you can do when trying to enter an industry that is fast-paced, forward thinking and most of all, fiercely competitive. Focusing a lot on how to visually communicate my brand message and developing my research skills in a critical analysis of graphics practice and design development, in this module I will allow me to critically think about how I am perceived in the industry, refining my visual style and promoting myself as a brand. Taking a look at all my design work over the years at Miami State High School gave a clear representation of my aesthetic style, a collection of simplistic yet bold designs witch embody elements of a graphic nature but remain minimal at the same time. I seem to be visually drawn to designs that embody precision and movement \, but I find when juxtaposed with opposite elements is when it really comes to life. I have really enjoyed translating my visual style in my entire body of work and have remained consistent to show a focus representation of myself as a brand. Focusing on:
PORTFOLIO 3
Research
Website
This is an example of a web designed portfolio by a Graphic designer Oliver Gibson uses a landscape layout with sub drop boxes. He uses a simple plane white background in contrast to the vibrant images that then seem pop off the page, leading the viewer’s eye from left to right of the page. Through the use of colored text in this web design it gives a flow to the design. Allowing the eye to easily be guided down the page instead of confused where to look first. Color is a great way of getting the audiences attention. Bringing the viewers attention to the vibrant blue logo (Work) first then flowing to the black and white images Gibson has selected. -‐ When you click on an image a side bar opens with the content of that page. -‐ Most designs can be more interesting by visually dividing the page into thirds vertically or horizontally, in this case the designer has placed his most important content within the rule of thirds, creating many points of interest. And attracting the eye to key elements on the page. -‐ -‐
Typography & Frame In Web Design
This is a second portfolio design, showing a consistency of color and tones, an easy simple design. -‐ Showing a aqua green border to focus the eye to the center of the page. - The designer has used three different font types to create a hierarchy that is consistent and balance. He has used a bold serif text that is easy and clear to read for the headings, this captures the attention of the viewer first, then he used the same text however lightly lighter and allot smaller for the subtexts,( the less important information however still captures the viewers eye.
If there where to be any more improvements in this design I would suggest to have distinct elements at the top or change the border to be slightly lighter to attract more attention to the type at the very top of the page.
PORTFOLIO 5
Web Design
This portfolio web design is a very creative insight into this designer’s personality and work. It shows a clear simplistic layout, however, the design is very effective in communicating his Graphic design abilities. Clearly, Cody is an experienced graphic designer. This web design is simple, eye-catching and interesting. This is what I will be aiming for in my design. Using a similar simplistic approach. The designer has used Photoshop to generate some interesting portrait. Showing off his Photoshop creativity and the ability to manipulate elements and principals of design firstly I recognized the figure ground image, an effective perceptible figure ground relationship occurs when the eye can identify a figure distinct and separate from its compositional background. This perception is solely dependent on the design principal of contrast. -‐
I found Cody’s typography style to be intriguing as well, Instead of using capital letters or underlining his focus text he has enlarged and bolded his text. This creates an effective hierarchy with the texts used, smaller and light text used for the body, directing the eye to guide the eye to the headings.
Web design
Web design allows you to get creative with communicative design, breaking the rules a little and playing around with images, colors, fonts that you don’t normally see on traditional web designs. This example of Andrew Shanley’s web portfolio, Andrew is an established graphic designer. Andrew has used a hand writing front and swirly arrows on his homepage, this gives the impression of a designers work in progress, giving simplicity and a certain creative style to the site, already getting a feeling of what kind of work you will e seeing on his site from the content of Andrews homepage. Andrew uses the fundamental elements of design to his advantage, catching the eye of the viewer and giving an aesthetically pleasing feel to the web design, shown by the layout of images on the page sitting the images just off the center of the page, this technique is called the golden mean, it is thought by many people to offer the most aesthetically pleasing proportion, placing the center of interest, by lacing important elements or focal point) of the design within the visual center of a piece is another design trick. The visual center is slightly to the right- of and about the actual center of a page.
PORTFOLIO 7
Developing Portfolio
. Researching the types of web portfolios I have gathered an understanding of what is most fundamental in communicative design researching a variety of these portfolios has broadened my understanding of graphic design and also outlines the content of a portfolio, co-inside with the elements and principals of design The most common of these elements through the portfolio web designs I believe to be, contrast, space, form and grid. By using these elements to my advantage I can start to create my own portfolio web design
“The challenge is for the graphic designer to turn data into information and information into messages of meaning” Katherine McCoy (B. 1945). American. Educator. Graphic. Designer
Developing PortfolioSketches
Layout Three- column page grid based on the square planning module, this is an effective organization tool for the design and the layout of the online portfolio, this type of page provides maximum flexibility and continuity. Allowing a range of narrative and visual information placed in a meaningful and accessible manner for the reader to access easily. Allowing different typographic elements and blocks of narrative text providing a unified visual voice.
For example, this is a screenshot of a London, United Kingdom magazine/2011, this page showing a threecolumn grid, displaying different scale typographic elements and blocks of narrative text are set flush left, ragged right, and hung from a set of integral grid datum’s in this report from Our vision Our Mission.
By visually dividing the page into thirds vertically or/and horizontally and placing the most important elements within those thirds it will make the design more interesting
PORTFOLIO 9
Colour scheme Colour is one of the most powerful communicative elements in a graphic designers language. It provides visual energy and a variety in what we see and experience on a daily basis. Colour is used to attacked attention, group elements, reinforce meaning, and enhance visual compositions. It can also immediately communicate an emotion or an attitude, provoke a response, create emphasis and to further strengthen an established hierarchy. Deciding on a simplistic design I will be using a monochromatic colour scheme in most of the portfolio, along with analogous colours from the cooler side of the spectrum, shadows of deep forests and the coolness of the water make blue, violet and green. Natural cool colours appear to have more depth, thus expanding the illusion of space. In choosing an exact colour scheme, I used an app on my iPhone called Adobe Colour that created a colour theme by scanning a chosen photograph and picking key colours in that photograph. I have chosen four photographs that was taken by my dad in England, 1993, the photographs captures the natural cold colours and lighting of a winter landscape, basing the background on the lighter based colours, and the text in the body with darker based colours maximizing the contrast using a hierarchy from light to dark colours, making it easy for the eye to flow down and across the page on screen.
Â
Â
Chosen Colour Schemes First photograph
PORTFOLIO 1 1
Second Photograph
Fourth Photograph
Third Photograph
Colour Schemes
Black White Grey represents conservatism, traditionalism, intelligence, and seriousness
Green, creates a sensation of, Durability, reliability, safety, honesty, optimism, freshness
Blue, creates a sense of Depth, Stability, Professionalism, Loyalty, Reliability, Honor, trust
PORTFOLIO 1 3
Personalized Logo To further communicate my graphic abilities and to stand out from the rest of applicants I am creating a personal brand logo to represent me, using a simplistic based theme however incorporating a range of visual elements to catch to attention of the viewer. To promote yourself as a brand is one of the most important things you can do when trying to enter an industry that is fast-paced, forward thinking and most of all, fiercely competitive. Focusing a lot on how to visually communicate my brand message and developing my research skills in a critical analysis of graphics practice and design development
Research existing Logos Today most logos are based on flat design, Flat Design is simplistic graphic style achieved by removing extra elements such as shadows, textures and gradients normally used in a 3 dimensional effect, flat design strips away the original orientation and decoration, resulting in a clear communication and minimalist design.
o Designing my logo o Gestalt principals o Research well known symbols o Something knew, unique symbol o There is inspiration everywhere, I questioned what do I represent, what symbol will define my graphic abilities? o Considering the golden mean o Something recognizable
Developing Logo
After looking through some of my previous visual work, I started to get a better idea of what style I wanted to portray in my business card. These are some initial designs. I was immediately drawn to minimalist geometric shapes I like the idea of negative space, the graphic lines and minimal style resounded with me and formed a basis of my development work. My style if quite minimal and simple with strong graphic elements… Using thing lines in my initials I began working with a triangle shape make of geometric pentagon, I wanted to create my own shape using my initials as a basis, making the logo personalized as a representation of myself. I just linked structural compositions and graphic lines, using my illustrations I created my finalized logo. PORTFOLIO 1 5
Finalized Logo design
. Business card
Â
To get some inspiration I began looking at innovative business card designs mainly on pintrest, looking for potential colour ideas and typefaces, I wanted to make sure I kept to the style of work that I developed in communicating my designs,. I created some illustrations and collages that embody the color palette I enjoy working with mainly the cooler tones of the natural environment (shown on pages 11-13), basing my logo as a starting point for the development of my business card. I wanted to convey a minimal design with graphic elements and interesting injection of contrast of black and white to visual communicate my style. Placing overlapping transparent rectangular shapes over one another making the center point in high focus as the transparent shaped overlap there is a progression of transparency, allowing the white text to stand out from the background, this also created movement forcing the eye to move constantly to the center of the composition of the logo and text.
Crop & Bleed Bleed is a printing term that referes to printing that goes beyond the edge of the sheet before trimming/cutting. The bleed is the area that is to be trimmed. As you can see in my business card, the background colors and shapes extened into the bleed , however the important content such as the logo and and text remains away from the edge of the document Crop marks also known as trim marks. Lines that extend the edges of the document, used to inform the printer where to trim the page between the safe zone and bleed. The printer print on a large sheep of papper and trim to the desired sixe, as shown in my business card beside. Â
Finalized Buisness Card.
PORTFOLIO 1 7
Content To effectively showcase my best work I have created over the passed twothree years, I have sketched a model of content to clearly understand what I will need to be including =, as I now have a good idea of what is included in a portfolio prom the pervious research I can now refine my own work.
Graphic Design (digital media) • Revit
Conceptualizing sketch Â
Webpage
m o H
e
Initial sketches
In order to capture the attention of the viewer it is most important that the home page is intriguing at the first sigh. According to the wall street journal, the average browser forms a reaction to the cover in the first 8 seconds of browsing. Considering that I have a little amount of time to crab the attention of the viewer I will be considering many elements to attract their attention to my work. My Home page design should include: Balance, proportion, unity, contrast, rhythm and harmony. I am striving for a neat clean open design using plenty of white space to provide emphasis to my work.
PORTFOLIO 1 9
Work o Built environment: most recent work, using snap shots of my book. o Posters: Typography poster in Photoshop (self portrait), defining contrast poster, montage me poster, all including added annotations. o Photo restoration in Photoshop. o Sketches: choosing a selected group of sketches, to showcase my ability to develop my work with added annotations o Projects: snapshots of all three booklets with a brief explanation about each book.
About me o I am 18 years old, full time student at Miami State High. o o Currently studying, Design and Communications at Bond University, the program Student For a Semester. o Cert 2 in technology and media. o I love the ability design can give, to express your emotions and messages through visual communication. Â
Gallery My gallery includes a group of chosen snap shots of my work overall showing some things I wanted to include in my work pages but weren’t as relevant but worth recognizing to further enhance the response I will get from the company Director of Virtual Graphics, showcasing my ability to illustrait whitch will inhab=nce my creative ability in developing prodotypes.
Refining Portfolio
Refining my work I have selected a useful website generator Wix.com to assist me in communicating my designs in a simplistic and clear way. The site offers a range of templates that are easy to use, making it easier to spend more time of the layout, content and aesthetic appeal of the design.
Experimenting with some templates I created my first product of the portfolio
Refi ning Portf olio
After researching more about the golden mean there is a simplified grid version that I have found very useful when planning the layout to attacked the viewer to the main focus of each page Using a grid as means of easy and clear visual communication, identifying that my original portfolio was just off the grid lines I have now allied each main element of focus to clearly communicate my intended focus information.
Using the golden mean to make a grid of main focus points will maximize interest in the web design Golden mean = 1.168 Size of page w/1.62 (rounded) H/ 1.62 = The golden grid when done to each side. (Shown beside)
PORTFOLIO 2 1
For a successful and completed design ( a composition) is made up from many interacting elements. In order to achieve a successful communication to my intended audience I must organize these elements to create an engaging and useful communication sending the message to the viewer that I can successfully communicate my skills as a designer. Looking back to my planning phase I reconsidered the layout used on the homepage. Making sure I have made a clear layout that is easily followed Looking over my portfolio (snap shot of the original shown on the side) many times in preview mode I realized that the layout wasn’t entirely functional, as there are 5 different pages creating unneeded space, I slimmed this number down to 3 by including the contact and work information on the home page.
Further Development We drive meaning from the visual data we are presented with: colour’s, textures, angles and more all contribute to To achieve a successfully completed design (a composition) it is made up from many parts and elements, taking these elements to my advantage to create an engaging visual communication to the company director of Virtual Graphics that I am capable of designing clear visual communication, that my target audience, the virtual graphic director of a leading design graphics company. White space or negative space is the area surrounding positive space. The figure e(or the main elements) is the positive space, the background is the negative space. The use of negative space can provide an eleagent stage for the remaining elements and refers to the portion of the page that is not devoted to illustration or text. Giving the webpage a simplistic and balanced promoting a sence of luxury, elagence, or sence of mystery. This webpage will a mixture between a formal balance, placing elemts with equal equal distribution to convey integrity or trustorthyness and an informal balance uses elemnts that counterbalance one another. Can promote a casual, energetic or trendy atmosphere. This is shown in the home page snap shots beside.
PORTFOLIO 2 3
Gallery
About me
PORTFOLIO 2 5
2 Belrose Blvd Varsity Lakes Gold Coast QLD mailto:annaheath123@hotmail.com 047-9087-888 Dear Robert Half, I am writing to you this letter regarding the position available for a new Virtual Designer at Top Global Design Agency. My name is Anna Heath and I am currently attending Miami State High School and enrolled in student for a semester at Bond University, studying Design and Communications. My course has allowed me to explore all aspects of communication of brands, products, to utilize the key elements of graphic design and has given me a powerful combination of targeted creative skills and an insightful industry perspective, including Adobe Photoshop and Illustrator. Throughout my course I have developed visual communication skills in research and critical analysis of graphics practice and design development, which is a key skill required for this position. I have full understanding of what it means to be part of a tea and develop and deliver design ideas effectively. Having enveloped a extensive rage of illustration skills and design ability. This will be useful when creating concepts, prototypes and final production versions of a diverse range of digital assets for mobile phone and tablet future platforms. I am extremely keen to be apart of an innovative company that created world-class language technology, transforming digital applications that successfully target challenging real- world language problems. Your success in the consumer market and production of high-established partnerships with industry shows your brands commitment to the importance of the consumer, which is something I have learnt is vital when creating great customer experiences. My broad knowledge on the use of Adobe Photoshop and Illustrator will allow me to design, create and present innovative digital solutions exerting my visual literacy skills and contributing to a team that is passionate about its technology and products. My experience with graphic design has enabled me to expand on my communication and promotion skills demonstrating critical thinking and identifying strengths and team driven environment, expanding my written and spoken communications skills to both clients and partners. I would look forward to the opportunity to put my knowledge to use and work within a company that places high importance on the experiences it creates for consumers. Yours sincerely, Anna
PORTFOLIO 2 7