Business graphics 2014 Anna Heath
Research Existing Web Design Elements and principals of design Developing a portfolio Content
PORTFOLIO 1
The principals od graphic design are 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, noncommunicative, 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.
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. -‐ PORTFOLIO 3 -‐
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.
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.
PORTFOLIO 5
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.
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
PORTFOLIO 7
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
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.
PORTFOLIO 9
Chosen Colour Schemes First photograph
Second Photograph
Fourth Photograph
Third Photograph
PORTFOLIO 1 1
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
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.
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
PORTFOLIO 1 3
Finalized Logo design
Developing Logo
Â
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
PORTFOLIO 1 5
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. Â
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,
PORTFOLIO 1 7
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
Home
Work
PORTFOLIO 1 9
About
Gallery
Playing around with the layout to get a feel of the site, I have included my own images to decide on the theme I want before I make any final decisions about this layout, I have experimented with a few templates and now I have decided to create my own.
Contact
PORTFOLIO 2 1
Refini ng Portfo lio
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)
Refining Site
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.
PORTFOLIO 2 3
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, and interpret variety of audiences both
White space or negative space is the area surrounding positive
Gallery
PORTFOLIO 2 5
about me