Graphic Design Unit 3 Coursework Sketchbook

Graphic Design Unit 3 Shane Thornton

Opening Statement Advertising is my initial starting point within my personal project as throughout AS level I have gained a good understanding of branding and rebranding within businesses. I would like to further my skills within this project because I enjoy the PR and publicity within the branding side of graphics. I feel this is because you have a lot to do to get the target audience attracted to the desired company you are promoting. Within the AS Coursework I created a logo for a book publishing company, which I had to represent in a continuing theme throughout the product to make the company distinctive and engaging to the target audience/customer. I also created a logo, advertising and products in the AS Exam, which has helped me to decide on a specialism to continue in the future as a possible career.

I am aiming to research numerous designers and artists, I will use graphic design websites to look at for inspiration, for example Behance. Over the years I have found numerous designers and artists who are not so well known or nor have they had much work published. This means I can explore what people do within my age range or students at University. Taking the mainstream approach and looking at well know artists seem too much of an easy approach. I may look at some more mainstream content to get ideas of what they

do and how I could incorporate it within my project. Whereas browsing through an archive of work on websites, to me, this is expressing your research skills and digging beneath the surface to find something new and innovative.

An artist I know I am going to look at is Louise Sender as she has produced some work evolving around websites and branding.

Within my project I aim to produce promotional material for my desired company which I am thinking about aiming around me and integrating my photography work within the website as an online portfolio. I will also aim to produce an array of promotional material to promote my business through business cards, flyers, posters, magazines, and the website.

I hope to keep a contemporary and minimalistic style running through out the project, this appears to be the theme to following in the current trend as less is more!

I aim to go around and research numerous companies and businesses around the Isle of Wight to see what they are doing in order to follow the modern day criteria. I may even consider looking at some of the islands leading web designers to see what they are doing to get the best out of a small business, and to make them into a successful company.

Throughout this project I will also gain further knowledge of Dreamweaver. I know the basics to medium difficulties as I have designed websites for a number of businesses and companies in the past from builders to tourism accommodation providers.

A selection of limitations that are going to come into account within the project are the colour schemes, which I am going to follow the current style of Flat User Interface (UI) is a minimalistic design approach that emphasizes the usability. Flat UI features clean, open space, crisp edges, bright colours and two-dimensional/flat illustrations. This kind of graphics is great for viewing on a Retina Display for example on the iPad 4. The font I shall use will be determined after a load of experimentation along with the colour schemes but I expect I shall use some sort of sans font keeping with the modern theme. The images will be thumbnails on the website so you get an over view of what the image is about. When you hover the images they will fade and once they are clicked on, they will enlarge into a lightbox to around 800px x 800px so they are not too large and coming off of the page but big enough to see the detail of the art work. I will then run it through an image optimiser to compress it to the smallest file possible without loosing the quality or detail.

Behance As I have mentioned in the Opening Statement, I am going to be using Behance as my main form of inspiration within this project because it is filled with useful designers who are up-to-date in the modern style of design and I hope it will inflouence me as much as I am hoping it will.

WEB DESIGN mood board

Advertising mood board

Louise Sender

Analysis 1

LOUISE SENDER Louise Sender is a student who is studying Graphic Communication (BA) at School of Visual Communication in Denmark. She has designed websites, packaging and typography within her previous artwork in her portfolio.

She is not a mainstream typical graphic designer who covers the basics of logo design for loads of businesses, she is small scale like an average student would be at. Her piece of work that I am analysing consists of logo design, booklets, letter heads, envelopes, business cards, web design, and many graphical elements within the style she has opted for.

The style of her work is keeping to the modern theme of things keeping everything simple but effective less is more. She focuses on Branding, Typography and Motion Graphics. As I’m going to be going down the web design route, I chose this designer who has previously constructed a website in a modern style as it would be easy enough with the skills I have learnt over the years to reconstruct as a study and modify it to create a response into my starting point.

She uses a photograph at the top of the web page with the simple logo typography photo over the top representing the business in mind. I also like this website design because it works with my photography portfolio theme I am after. The layout is simple and modern which keeps with the simplistic starting point and modern theme. The websites layout is

constructed by interlocking images together in the main content of the page. The photographs fit together with the 10/20px border around them as well as the text dotted about on the page. The crisp text on top of the solid white background enhances the overall feel to it. I will aim to explore the detail within the website and put together a response of a site made in the style of hers using my content. I. e. My photographs and text relating around my photography course. I’ll replicate the fonts by finding out what font is what and getting a web font version so it will work on any computer or PC. The word “sans” is a French word that means without, therefore “sans-seif” means without the fancy bits added to the typeface which makes it look more square and crisp. ‘Feet’ can be found at the end of each letter which ate the red bits shown in the graphic. Serif fonts such as Times New Roman, Garamound, Century Schoolbook are genuinely used within newspapers and magazines because it is suppose to draw the eye to the page and make it easier for the reader to follow. Sans-serif such as Arial, Verdana, Tahoma are genuinely used within websites because the majority of the time sans-serif is much easier to read on the screen due to pixels. Having a sans-serif fonts are better on the screen as where the type

face is more flatter and has square corners which fits within the pixel grid therefore the best font to use on the screen.

The programmes and tools I am going to be using will be Adobe Dreamweaver to create to site layout and style. I will use Adobe Illustrator to create the graphics for the site, as I will be requiring some graphic icons and logos.

I will also consider using Illustrator to create some vector figures if I feel that I need them within the website design. Also, for the images that I will be inserting into the website, I will use Adobe Photoshop to manipulate the images before I compress them to make them user friendly on the website. Within Dreamweaver, I will use coding to create transitions and light box photo viewers to view the enlarged graphic/photo in.

Sans-serif

Serif

Serif (red serifs)

Her Work

LOUISE SENDER Response Photographs I have decided to use photographs that are used within my photography project because I think that it will be very useful to use those images in context because it’ll make the website belong to me therefore be a more elegant response. I won’t just use random images I come across on the Internet. The photos that I am going to use are a variety from news related and event related photo shoots. I will also decide carefully which photos go where and how they are laid out within the page. Layout is a key thing when it comes to websites because you want to know that your readers are looking at the right things at the right time. You don’t want to stick an image in the wrong place because your readers might not take in the full effect of that photo being there, or they may even overlook it. If that is the case what is the point in having the photograph on the page?

The images I’m going to be using are quite vibrant photographs to bring up the website to make it look cheery and happy to make it an enjoyable visit. On this page I’m going to spread out a few photographs that I’ll use on the site just to give an impression of what they may look like before they are placed into the site.

LOUISE SENDER Response Design The second thing I did was is to make a template from the original design by Louise Sender’s website which I made in a Adobe Illustrator. I will now go on from this design and use elements from the template I made from her site, these elements are things like where the images were placed within the page. I will then need to start to plan what I would need to do to make this work within a response to Louis Sender. I want a fully functioning website, not just static image that was created in Illustrator or Photoshop. I want to make it so that you can explore and click on the links click and images which open up into a lightbox. I will create this within Dreamweaver because I have had many years experience of using the program. I like using Dreamweaver because I can use the skills I have learned over the years to produce something as good a response to this artist as I could possibly do.

shanethornton.co.uk/graphics

Final Website... Fully functional at...

LOUISE SENDER Response Evidence

One

Two

Three

Firstly, I started with a new blank Dreamweaver document and set up all the folders to accommodate the files relating to the website design. I created the directory with a folder for the Cascading Style Sheets (CSS) and Images to be placed in for the site to work while keeping the file structure clean and tidy, therefore easy to navigate.

I created a few divs with properties to accommodate the header image on the page at a height of 300px and the width of 100% of the page to make it span across the entire screen.

Within that I created another div to hold the logo central to the header, this is click able to link you back to the main index page if there are more than one page present within the website.

I added a new div as the container to hold the pages content with a width of 960px which is a standard width for a standard website to fit onto the majority of screens. I didn’t include the header image within this because I wanted to have it spanning across the page, if it is presented on a small screen such as a smartphone it would simply not show the overflow.

Four

Five

Six

I then persisted in creating divs within the container div to hold the images and text in a layout, giving each box a set width and height to make everything square and line up to the original design again to keep consistency.

I had a small problem where I couldn’t get an image/div to fit in the desired gap where I was wanting it. I ended up creating yet another div to hold the fire engine and the tractor in one div to keep them both aligned to the left of the page.

After making the adjustments in the previous screenshot the photographs now all line up in a grid so that the images all have a margin around them of 10px to allow the photographs not to merge into one and not look like the original design.

I used fonts similar which were, Arial for the titles and Georgia for the main body of the page.

I moved on to installing even more divs to the bottom of the page to hold the images and the text in the bottom right. Remembering to follow the original layout to keep consistency.

Seven Four

Eight Five

Nine Six

IFinally, then persisted I added in the creating Footer divs divwithin with three the container additionaldiv divs towithin, hold the one images with my andname text in and a layout, location, giving the second each box one a set with width Social and links height and to the make thirdeverything box of ways square to contact and line meup whether to the original it’s via mobile, design again email to or keep the website consistency. contact Iform. had aThis small again problem followed where theI couldn’t house style get of an image/div an off black tocolour, fit in the grey, desired and the gaptitles where being I was in wanting bold, uppercase it. I ended and upincreating Arial, and yetthe another content div to of hold the information the fire engine andand links the being tractor in Georgia. in one div to keep them both aligned to the left of the page.

After Finally, making I added the a few adjustments hyperlinks in to thethe previous social screenshot networkingthe text photographs along with Icons now all forline theup social in networks a grid soto that linkthe to images Twitter,all Facebook, have a margin Instaaround gram and them YouTube. of 10px to allow the photographs not to merge into one and not look like the original design.

I used fonts similar which were, Arial for the titles and Georgia for the main body of the page.

IImoved wantedon toto show installing off myeven skillsmore of enhancing divs to the bottom the webofpage the but pageadding to hold a lightbox the images image and the viewer textto in the the page bottom so that right.when Remembering you click on to follow an image, the it original expands layout into to a larger keep consistency. version of a maximum size 800px x 800px. This is a scrip from a web designer resource site for Java script, CSS and other forms of scripting. This saves time trying to figure out something when it’s there available for you to use, just need to make sure all the correct scripting is in the correct places then you’re ready to go.

Ten I then persisted in creating divs within the container div to hold the images and text in a layout, giving each box a set width and height to make everything square and line up to the original design again to keep consistency.

I had a small problem where I couldn’t get an image/div to fit in the desired gap where I was wanting it. I ended up creating yet another div to hold the fire engine and the tractor in one div to keep them both aligned to the left of the page.

Evaluation My response to Louise Sender came out pretty well because it relates to her original design of three columns on a web page which allows you to view her images along with some brief text on the site to give the reader a basic over view of the what the site and the photographer does.

I used animation so that when you hover over an image it fades out to 70% opacity to indicate it is linked to something, When you click on the image a light box appears with a larger view image which is show on the page. Here you can jump between several images on the page by using the left and right navigate to the next and previous photograph. I will take this style of work, the lightbox, into my final design for my website so that potential clients can see what my work is like before hiring me.

JIMMY LAURSEN

Analysis 2

Jimmy Laursen Jimmy Lauresen is also a student who is a graphic designer who specialises in Branding, Web Design and Editorial Design which can be to do with magazines for publishing. This could be continued on from my original starting point for a photography website portfolio and have the magazine as an extra supplement as a brochure for clients who may be interested in my work.

On the front cover if his ‘Sportsfan’ magazine is a full size photo of a Brazilian footballer with the logo off to the right hand side coming off of the page. Even though half the title is missing it can still be read clearly. The colour of the font is a pigment of colour taken from the shirt to make everything blend. Within his magazine he has got full page titles at diagonal angles in italic with a solid, bold sans font and items of text distributed around the page. The hypenating a title it becomes a key design feature. Moving onto the internal pages the pages where you find the main content, the pages are split into three columns and the text evenly dispersed across the page for it to give the best effect possible and ensure the pages are evenly weighted. The page backgrounds are white and the font colour is black for the titles and headings, and for the main body of text is a red font. There are page numbers on at the bottom of the pages along with the name of

the magazine in the centre which seems to be a consistent footer throughout the document.

Then onto the opposite page there is a photograph with a small caption above it explaining the photograph. The photograph comes out from the spine of the book as stretches across the width of the page leaving a large border around the outer edges of the magazine.

A nice touch within this work is the fact he has used different weightings of font to express the importance of headings and make them stand out from the rest.

I am hoping to respond to this with using my photographs that I am gong to be using on my website and include them into the magazine as a hand out portfolio.

His Work

Jimmy Laursen Response

LOUISE SENDER Response Louise Sender is a student who is studying Graphic Communication (BA) at School of Visual Communication in Denmark. She has designed websites, packaging and typography within her previous artwork in her portfolio.

She is not a mainstream typical graphic designer who covers the basics of logo design for loads of businesses, she is small scale like an average student would be at. Her piece of work that I am analysing consists of logo design, booklets, letter heads, envelopes, business cards, web design, and many graphical elements within the style she has opted for.

The style of her work is keeping to the modern theme of things keeping everything simple but effective less is more. She focuses on Branding, Typography and Motion Graphics. As I’m going to be going down the web design route, I chose this designer who has previously constructed a website in a modern style as it would be easy enough with the skills I have learnt over the years to reconstruct as a study and modify it to create a response into my starting point.

She uses a photograph at the top of the web page with the simple logo typography photo over the top representing the business in mind. I also like this website design because it works with my photography portfolio theme I am after. The layout is simple and modern which keeps with the simplistic starting point and modern theme. The websites layout is

constructed by interlocking images together in the main content of the page. The photographs fit together with the 10/20px border around them as well as the text dotted about on the page. The crisp text on top of the solid white background enhances the overall feel to it. I will aim to explore the detail within the website and put together a response of a site made in the style of hers using my content. I. e. My photographs and text relating around my photography course. I’ll replicate the fonts by finding out what font is what and getting a web font version so it will work on any computer or PC. The word “sans” is a French word that means without, therefore “sans-seif” means without the fancy bits added to the typeface which makes it look more square and crisp. ‘Feet’ can be found at the end of each letter which ate the red bits shown in the graphic. Serif fonts such as Times New Roman, Garamound, Century Schoolbook are genuinely used within newspapers and magazines because it is suppose to draw the eye to the page and make it easier for the reader to follow. Sans-serif such as Arial, Verdana, Tahoma are genuinely used within websites because the majority of the time sans-serif is much easier to read on the screen due to pixels. Having a sans-serif fonts are better on the screen as where the type

face is more flatter and has square corners which fits within the pixel grid therefore the best font to use on the screen.

The programmes and tools I am going to be using will be Adobe Dreamweaver to create to site layout and style. I will use Adobe Illustrator to create the graphics for the site, as I will be requiring some graphic icons and logos.

I will also consider using Illustrator to create some vector figures if I feel that I need them within the website design. Also, for the images that I will be inserting into the website, I will use Adobe Photoshop to manipulate the images before I compress them to make them user friendly on the website. Within Dreamweaver, I will use coding to create transitions and light box photo viewers to view the enlarged graphic/photo in.

LOUISE SENDER Response Louise Sender is a student who is studying Graphic Communication (BA) at School of Visual Communication in Denmark. She has designed websites, packaging and typography within her previous artwork in her portfolio.

She is not a mainstream typical graphic designer who covers the basics of logo design for loads of businesses, she is small scale like an average student would be at. Her piece of work that I am analysing consists of logo design, booklets, letter heads, envelopes, business cards, web design, and many graphical elements within the style she has opted for.

The style of her work is keeping to the modern theme of things keeping everything simple but effective less is more. She focuses on Branding, Typography and Motion Graphics. As I’m going to be going down the web design route, I chose this designer who has previously constructed a website in a modern style as it would be easy enough with the skills I have learnt over the years to reconstruct as a study and modify it to create a response into my starting point.

She uses a photograph at the top of the web page with the simple logo typography photo over the top representing the business in mind. I also like this website design because it works with my photography portfolio theme I am after. The layout is simple and modern which keeps with the simplistic starting point and modern theme. The websites layout is

constructed by interlocking images together in the main content of the page. The photographs fit together with the 10/20px border around them as well as the text dotted about on the page. The crisp text on top of the solid white background enhances the overall feel to it. I will aim to explore the detail within the website and put together a response of a site made in the style of hers using my content. I. e. My photographs and text relating around my photography course. I’ll replicate the fonts by finding out what font is what and getting a web font version so it will work on any computer or PC. The word “sans” is a French word that means without, therefore “sans-seif” means without the fancy bits added to the typeface which makes it look more square and crisp. ‘Feet’ can be found at the end of each letter which ate the red bits shown in the graphic. Serif fonts such as Times New Roman, Garamound, Century Schoolbook are genuinely used within newspapers and magazines because it is suppose to draw the eye to the page and make it easier for the reader to follow. Sans-serif such as Arial, Verdana, Tahoma are genuinely used within websites because the majority of the time sans-serif is much easier to read on the screen due to pixels. Having a sans-serif fonts are better on the screen as where the type

face is more flatter and has square corners which fits within the pixel grid therefore the best font to use on the screen.

The programmes and tools I am going to be using will be Adobe Dreamweaver to create to site layout and style. I will use Adobe Illustrator to create the graphics for the site, as I will be requiring some graphic icons and logos.

I will also consider using Illustrator to create some vector figures if I feel that I need them within the website design. Also, for the images that I will be inserting into the website, I will use Adobe Photoshop to manipulate the images before I compress them to make them user friendly on the website. Within Dreamweaver, I will use coding to create transitions and light box photo viewers to view the enlarged graphic/photo in.

Jimmy Laursen Response In Context

LOUISE SENDER Response I am happy with the outcome of Louise my magazine, Senderitishas a student got all who the is studying Graphic key elements Communication that the original (BA) at School of Visual Communication design had are used with inslanted Denmark. She has designed writing and websites, very basic packaging text that and is typography within herand Helvetica previous the images artwork arein allher portfolio.

She is notasa he cropped mainstream used in thetypical origi- graphic designer nal design whoby covers Jimmy. theWithin basicsthis of logo design Ifor have loads also ofuse businesses, my photographs she is small scale like an then so average again student it’s thewould same be as at. Her piece of work that Irelates website am analysing back toconsists me of logo design, and makes booklets, it in the letter styleheads, with my envelopes, business photos even cards, though web design, it follows and many graphical elements the original design. withinIthe have style my she has opted for.

The style of magazine InContext her workso is you keeping get ato the modern theme feel of what of things the keeping magazine everything would simple but effective look like in less real is life more. andShe as focuses if you on Branding, Typography are looking through and Motion the pages Graphics. As I’m going to bewhat and going the down cover the looks weblike design etc.route, I chose this designer The one mainwho thinghas I am previously pleased constructed a website I’ve gainedinout a modern of this isstyle the as useit would be easy enough of using with InDesign the skills because I have at learnt the over the years to reconstruct beginning I was a bit vague as a study of and modify it to create how it worked a response and I knew into my very starting point.

She uses little andadidn’t photograph know what at the I top of the web pagedoing. was with the This simple madelogo me able typography to photo over learn how theto top change representing the stylethe of business in mind.and text I also how like tothis lay out website the image design because it works on the with pagemy where photography the bleedsportfolio theme I amsafe and after. margins The layout are so is simple that conand modern which tent isn’t keeps cut with off when the simplistic printed. starting point and modern theme. The websites layout is

constructed by interlocking images together in the main content of the page. The photographs fit together with the 10/20px border around them as well as the text dotted about on the page. The crisp text on top of the solid white background enhances the overall feel to it. I will aim to explore the detail within the website and put together a response of a site made in the style of hers using my content. I. e. My photographs and text relating around my photography course. I’ll replicate the fonts by finding out what font is what and getting a web font version so it will work on any computer or PC. The word “sans” is a French word that means without, therefore “sans-seif” means without the fancy bits added to the typeface which makes it look more square and crisp. ‘Feet’ can be found at the end of each letter which ate the red bits shown in the graphic. Serif fonts such as Times New Roman, Garamound, Century Schoolbook are genuinely used within newspapers and magazines because it is suppose to draw the eye to the page and make it easier for the reader to follow. Sans-serif such as Arial, Verdana, Tahoma are genuinely used within websites because the majority of the time sans-serif is much easier to read on the screen due to pixels. Having a sans-serif fonts are better on the screen as where the type

face is more flatter and has square corners which fits within the pixel grid therefore the best font to use on the screen.

The programmes and tools I am going to be using will be Adobe Dreamweaver to create to site layout and style. I will use Adobe Illustrator to create the graphics for the site, as I will be requiring some graphic icons and logos.

I will also consider using Illustrator to create some vector figures if I feel that I need them within the website design. Also, for the images that I will be inserting into the website, I will use Adobe Photoshop to manipulate the images before I compress them to make them user friendly on the website. Within Dreamweaver, I will use coding to create transitions and light box photo viewers to view the enlarged graphic/photo in.

JIMMY LAURSEN

LOUISE SENDER Response Louise Sender is a student who is studying Graphic Communication (BA) at School of Visual Communication in Denmark. She has designed websites, packaging and typography within her previous artwork in her portfolio.

She is not a mainstream typical graphic designer who covers the basics of logo design for loads of businesses, she is small scale like an average student would be at. Her piece of work that I am analysing consists of logo design, booklets, letter heads, envelopes, business cards, web design, and many graphical elements within the style she has opted for.

The style of her work is keeping to the modern theme of things keeping everything simple but effective less is more. She focuses on Branding, Typography and Motion Graphics. As I’m going to be going down the web design route, I chose this designer who has previously constructed a website in a modern style as it would be easy enough with the skills I have learnt over the years to reconstruct as a study and modify it to create a response into my starting point.

She uses a photograph at the top of the web page with the simple logo typography photo over the top representing the business in mind. I also like this website design because it works with my photography portfolio theme I am after. The layout is simple and modern which keeps with the simplistic starting point and modern theme. The websites layout is

Analysis 3

constructed by interlocking images together in the main content of the page. The photographs fit together with the 10/20px border around them as well as the text dotted about on the page. The crisp text on top of the solid white background enhances the overall feel to it. I will aim to explore the detail within the website and put together a response of a site made in the style of hers using my content. I. e. My photographs and text relating around my photography course. I’ll replicate the fonts by finding out what font is what and getting a web font version so it will work on any computer or PC. The word “sans” is a French word that means without, therefore “sans-seif” means without the fancy bits added to the typeface which makes it look more square and crisp. ‘Feet’ can be found at the end of each letter which ate the red bits shown in the graphic. Serif fonts such as Times New Roman, Garamound, Century Schoolbook are genuinely used within newspapers and magazines because it is suppose to draw the eye to the page and make it easier for the reader to follow. Sans-serif such as Arial, Verdana, Tahoma are genuinely used within websites because the majority of the time sans-serif is much easier to read on the screen due to pixels. Having a sans-serif fonts are better on the screen as where the type

face is more flatter and has square corners which fits within the pixel grid therefore the best font to use on the screen.

The programmes and tools I am going to be using will be Adobe Dreamweaver to create to site layout and style. I will use Adobe Illustrator to create the graphics for the site, as I will be requiring some graphic icons and logos.

I will also consider using Illustrator to create some vector figures if I feel that I need them within the website design. Also, for the images that I will be inserting into the website, I will use Adobe Photoshop to manipulate the images before I compress them to make them user friendly on the website. Within Dreamweaver, I will use coding to create transitions and light box photo viewers to view the enlarged graphic/photo in.

AGNESE Agnese is a graphic designer who has been drawing since her early childhood, for as long as she can remember. Her interest grew into graphic design because of the variety of communication tools available and the ability to convey a message to the world. This lead to her focus being increased on illustration and graphic design along with studying computer animation. By looking through her portfolio on Behance I get a good understanding of what she is focused on, she goes down the route of branding, cartoon art, digital art and Illustration. I chose to study her work because it consists of the branding industry which is a route I will have to explore when creating a logo, and doing PR for my company with such things as letter heads, business cards, envelopes, flyers, brochures etc. I have in the past experimented with different forms of branding because I investigated logo design in my AS Level coursework and exam which I hope to explore further to a higher standard, and explore colour theory in logo design.

By examining her work I notice immediately that she uses vectors and font to brand her products for the client. The next main element is the colours used. The main colours that are used within her designs is red (#DC3F44) and a turquoise (#9BCFC5). Agnese uses flat colours with no gradients, key to modern Flat

UI (User Interface) design. The benefit of using vector icons is that they are easily recognisable and simple so it prevents the design from being over crowded. Also they look effective at anyscale without being confusing and in difinative to what the graphic is representing.

I’m keeping in mind that less is more within the minimalist era. The effect given off of the final designs. Especially the business cards.

The white logo on top of the dominant red background, it enhances the overall effect and makes it stand out from a complex design that may otherwise be overcrowded and not be as eye catching. The simplicity of the poster is very powerful too as it doesn’t look crowded and using only the two colours, turquoise and red, it’s cheaper the print than it may be if it consisted of four to five colours.

The logo, the logo within it self is very important mainly because it gives you a lot of information, for example the ‘Latviesi.com’ is telling the audience two things, one is the name of the company ‘Latviesi’ and the second thing is it also tells the potential customer who may see this on a poster or the business card in fact, this tells them the web url too. A multipurpose logo is very informative in giving the customer more information within one thing. Also the font itself, from my research, they have used a font called ‘Lobster’ and vectorised the text

and played around with it slightly to make it flowing and unique to the company.

When I come to create my logo I may take key elements from this logo, for example the web url as the company name but I will most likely choose a different font to represent my company. This is purely because it looks too fancy and dated for my company.

Her Work

I have been looking around for companies that are relivent to the name of the company name as the url in the logo, here are a few examples I have come across which are fairly popular in the UK. The majority of the logos are just one colour, it’s only amazon which has an orange arrow under neith to represent their company, the icon that is the iconice symbol that is accociated with them. Hotels.com has just the one colour which is shaded to give it some depth and increase the complexity.

Agnese Response 1.

2.

3.

4.

5.

6.

ShaneThornton.co.uk ShaneThornton.co.uk ShaneThornton.co.uk ShaneThornton.co.uk

ShaneThornton.co.uk

ShaneThornton.co.uk

7.

I experimented with different fonts to be similar to the original font used in the design by Agnese.

All I did here was copy and paste the ‘ShaneThornton. co.uk’ several times and changed each font to try and match the original and get a replica. Personally number seven worked best as it follows with the original design.

The designs from one to six are fancy fonts which don’t really suite the theme. I went for the red instead of the back purely because of the theme style.

The final logo design which was keeping in the style of Agnese’s logo idea, to keep the constancy going. I used the font that I found was near enough to the font she used I presented it on the red background and another on a plain white background to compare results. I think the red is vibrant and catchers the attention for the viewing public but when i comes to print, i think the red text on white would be best because it would be cheaper when printing on a mass scales.

Putting my logo onto her business card design was just a simple touch that meant taking the image and my logo through Photoshop and using the Transform tool to stretch the logo to fit the original image. I did this to see my design in context and see whether it would work or not if it were to be put into print. I think it works, it’s simple and easily recognisable.

For a response to her poster, I used a photograph of the Needles and the light house and vectorised it with the Pen tool to make it follow the simplistic design she had previously designed and created. I also created my own vector of the poster background too by using the dimensions of the poster and then made the dark lines by using a line and using the blend tool to evenly disperse the lines across the page.

Replicating her figures was rather interesting because I meant I could play with the positions of the legs, arms, hair styles, trouser lengths etc. I kept with the same colours to keep a close relation to the original.

I could continue this further into my own design by changing the colours, using different objects and positions that the characters are in.

This designer might only be a brief analysis, but it has given me ideas of how my design could be for my final piece.

Maurizio Pagnozzi

LOUISE SENDER Response Louise Sender is a student who is studying Graphic Communication (BA) at School of Visual Communication in Denmark. She has designed websites, packaging and typography within her previous artwork in her portfolio.

She is not a mainstream typical graphic designer who covers the basics of logo design for loads of businesses, she is small scale like an average student would be at. Her piece of work that I am analysing consists of logo design, booklets, letter heads, envelopes, business cards, web design, and many graphical elements within the style she has opted for.

The style of her work is keeping to the modern theme of things keeping everything simple but effective less is more. She focuses on Branding, Typography and Motion Graphics. As I’m going to be going down the web design route, I chose this designer who has previously constructed a website in a modern style as it would be easy enough with the skills I have learnt over the years to reconstruct as a study and modify it to create a response into my starting point.

She uses a photograph at the top of the web page with the simple logo typography photo over the top representing the business in mind. I also like this website design because it works with my photography portfolio theme I am after. The layout is simple and modern which keeps with the simplistic starting point and modern theme. The websites layout is

Analysis 4

constructed by interlocking images together in the main content of the page. The photographs fit together with the 10/20px border around them as well as the text dotted about on the page. The crisp text on top of the solid white background enhances the overall feel to it. I will aim to explore the detail within the website and put together a response of a site made in the style of hers using my content. I. e. My photographs and text relating around my photography course. I’ll replicate the fonts by finding out what font is what and getting a web font version so it will work on any computer or PC. The word “sans” is a French word that means without, therefore “sans-seif” means without the fancy bits added to the typeface which makes it look more square and crisp. ‘Feet’ can be found at the end of each letter which ate the red bits shown in the graphic. Serif fonts such as Times New Roman, Garamound, Century Schoolbook are genuinely used within newspapers and magazines because it is suppose to draw the eye to the page and make it easier for the reader to follow. Sans-serif such as Arial, Verdana, Tahoma are genuinely used within websites because the majority of the time sans-serif is much easier to read on the screen due to pixels. Having a sans-serif fonts are better on the screen as where the type

face is more flatter and has square corners which fits within the pixel grid therefore the best font to use on the screen.

The programmes and tools I am going to be using will be Adobe Dreamweaver to create to site layout and style. I will use Adobe Illustrator to create the graphics for the site, as I will be requiring some graphic icons and logos.

I will also consider using Illustrator to create some vector figures if I feel that I need them within the website design. Also, for the images that I will be inserting into the website, I will use Adobe Photoshop to manipulate the images before I compress them to make them user friendly on the website. Within Dreamweaver, I will use coding to create transitions and light box photo viewers to view the enlarged graphic/photo in.

Maurizio Pagnozzi The designer I have chosen to analyse is Maurizio Pagnozzi who is currently studying Graphic Design and Art Direction at ILAS Designers School in Italy. Previously, Pagnozzi studied Graphic Design at Scuola La Tecnica of Benevento. I chose to look at his work because of its consistent design and modernism which is something I was looking for to study. His aim is to create work that combines strong concepts with a functional and solid effect.

I chose to analyse two different pieces of work from his design archive because I firstly liked the green hexagon design with the words ‘MACRIDE’ written within the middle of the design. She has used 3 rectangles positioned within a hexagon to create an origami effect.

By the looks of it he then moved onto addding colour to the rectangles, he has chosen the main colour to focus on as being green which is a good natural colour for design because it’s not considered to be sexist, as blue can be accociated with boys and pinks for girls. It’s not so much the case nowerdays by having a natural green colour is soft and not dominent either. Green also means harmony which may have a relation to the design. Anther thing with colours is that if the colour blue is used it gives you a cold feeling where as red is warm.

Just another key graphic design tip to keep in mind when doing further work. She has ap-

plied green gradients to the rectangles to the to give some depth. The closest match to the font that she used that I could find was ‘Arial Bold’ purely due to the solid type face and simple lining. This has been arranged with 3 lines of text telling you the name of the company.

After doing a bit of research into the design itself, the name ‘Macride’ is the name of the Greek nymph, daughter of Aristeo and Autonoe. According to mythology ‘Macride’ raised the baby Dionysus which is the Greek God feeding him honey. From what I can tell, the hexagonal shape of the logo is inspired by hexagonal shape of the cell in a beehive which is very clever.

Within the design there are 3 rectangles, these represent three boys; Maurizio, Christian and Denise which is an acronym of ‘Macride’ which when joined together make a hexagon. They said the green gradients were used as different shades of their characters. I looked up the reason for using green and came back with that this colour communicates the strength of youth and the hope which is interesting.

Even though I originally thought this piece of artwork was very simple it turns out it isn’t really, there has been a lot of thought that has been put into it to create a modern and contemporary design.

For her ‘psd’ design she used very basic tools to creat her logo, this is something I was very keen to look at because again it was fairly simple and minimalistic which is following my design theme for the project. What she basically did was to draw a red circle within the art board and added a red gradient this time, again, red it simbolising warmth which is great for the company to give a welcoming feel to the public. She has used a font which appears to be fairly thin for the actual design and has joined the letter ‘s’ to the ‘p’ and the ‘d’ which is something simple which gives of a good effect.

Maurizio Pagnozzi Study To recreate the original logo I firstly drew a hexagon shape to have six exact sides for the rectainges within the logo to fit into semetrically.

I then drew a rectangle that would construct the background of the logo. Then truplicated it and rotated the shapes so they were in the correct places.

To insert the coulours I used the original the eyedropper tool to select the two colours at either side of the rectangles to create a gradient simular to the original.

MA CRI DE

To recreate the font was simple as they used Arial Bold and gave it a white type face. To give it some depth she added an outer glow which made the text appear to be coming off of the page.

I desided to do two studies for this artist because I got so into their style of work and came to grips with how it was constuctied so quickly, I found myself looking at more of her work which made me think I could rospond to this fairly easilly and quickly. I firstly started with a basic circle to come up with the outline shape background shape.

I added the colours to the logo by using the eye dropper tool and selecting two colours from the original to create a gradient for the red background and then added an inner glow to great a 3D look.

The font for this was very difficatlt to find to i decided it would be easiers simplier to go a create a replicar font face that would match the original design to keep with the style and flowing theme.

Maurizio Pagnozzi Study Incontext I put the two final designs in context by utilising the design and laying it out where it should be layed out on a business card. The overall simplistic effect that these cards give off are powerful but easy to read which is good for people looking at the company and wanting an answer quickly. The two textured context images was a cartrage paper texture and I applied my design from Illustrator into Photoshop and changed the blend mode to ‘Multiply’ and then to the right is the final result.

MA CRI DE

MA CRI DE

Maurizio Pagnozzi Response

SH ANE TP

For my response I decided to keep the same shape and the same font but used a different colour which in this case I used blue. The reason why wanted to keep it very similar to the original piece is because the original design is very effective and anything drastically different wouldn’t really look the same as the original

by Maurizio. I made sure that I used the same gradients and the same shadows he used just in the colour blue not green. When doing the design for my response I’ve made sure that gradients were in the right places and that they went from light to dark in the same direction as the original does. I also made sure each section of the piece was the right shade of colour. Again this artist is only briefly looked at but the previous one but I feel like I have good understanding of what it is he does and it may influence me in my design for my final piece. The one other thing I changed was the text within the design from ‘MACRIDE’ to ‘SHANETP’ that means Shane Thornton Photography but I kept it short and abriviated so that it would not mess up the design and loose the effect that is already being given off of it.

Final Piece Prep

Websites & Logos

Existing Website Designs The next few pages from this point on will be filled with several designs of websites which will then be used to inspire me towards getting a final piece which will be a website for myself.

The website will be based around my photography as I am an aspiring photographer as well as an aspiring graphic designer. The designs I have chosen have been bought off of several websites from a Google search of modern day website themes and styles. Some of these website designs have won awards others have not.

The majority of these websites, the ones that have not won an award, are off of graphic design inspiration websites such as Web Designer Depot. I use the Web Designer Depot quite a lot on a regular basis to give me inspiration to keep up with what is happening in the world and keeping me influenced of how style/themes are changing month by the month. I use this site to keep up with the latest trends.

Once I’ve picked around 10 designs off the Internet I will then start picking out key elements that stand out to me and I’ll see how/ if I can use them within a final piece for my graphic design coursework. My final piece will be made on Dreamweaver but I will design it in Illustrator so I can get a clear understanding of how everything works and where is going to go. It seems daft making it from scratch straight into Dreamweaver and not like it. This would just waste time. Where as in Illustrator you can move items about relatively easy and get a thorough understanding of what I want for my design. These websites will also help me choose a colour scheme along with fonts.

For my final site I want it to be quite basic and fresh along with being modern because I don’t want it to become clattered as I’m trying to promote the work within the site not the site itself.

Get Started >

Latest on Flickr

Logo Designs Shane Thornton Photography Shane Thornton Photography Shane Thornton Photography Shane Thornton Photography Shane Thornton Photography Shane Thornton Photography Shane Thornton Photography Shane Thornton Photography Shane Thornton Photography

Very Basic, if not, too Basic + Boring

Shane Shane Shane Shane Shane Shane Shane Shane Shane Shane

ShanE thornton photography

Shane Thornton Photography

ShanE thornton photography Final Logo!

Final Piece

Website

Evidence

One The first thing was is that I opened up a new document in Dreamweaver and started from scratch, I think starting from scratch makes it more personal. I have to decide which DIVs to use and where and what colours I’ll be using. I started off using a DIVs as all the content of where everything is going to go and I can start right from the beginning. After getting the header images and boxes in the right places, and once I got the navigation bar sorted I moved on to doing the page content. As for

Two the content I wanted four circles where I could have circles with my latest projects in with the title underneath, followed by a Readmore button. I also wanted these so that when your mouse hovers over each project it faded. I got this to work by using since CSS which is the stylesheet for my website.

Three Once I got the projects all laid out how wanted it, I then added some more DIVs to the bottom half of the page, I just wanted a social media box where I can have links to my social sites as well as a quick brief description of what I do followed by the footer at the bottom of the page with the copyright information within it.

bibliography Behance - www.behance.net Web Designer Depot - www.webdesignerdepot.com Awwwards - www.awwwards.com The Best Designers - www.thebestdesigns.com Anything else were Google searches - www.google.co.uk

View my website live at...

unit3.graphics.sha

anethornton.co.uk