Responsive Project Report By Danielle Harrison
1
Matthew Savage Photography
Yoke
7 11
Keith Baldock Artist 13
Sophie Davey Photography
Air Up 17
BEAR
Companions Pet Shop 23
15
21
P.A. Kelsall
Future of Bacon Packaging
27
Home Page
Navigation
Home Page
Matthew Savage Photography To design a website for a photographer which showcases his work.
Why I Chose The Brief I had been taking to a photographer that I know that I was interested in web design and that was what I wanted to do. This prompted him to ask me if I was interested in designing his website, as he had thought about getting one for a while. I was, but I wasn't confident in coding it as it would probably require javascript which I have no experience of. I also would want to design something quite creative and advanced, which I wouldn't be able to build. This led me to ask a coder I know if they wanted to collaborate with me, as they also knew the client. This meant that I was now doing a collaborative brief. I have always been a huge fan of the photographers work, so I was really excited to start this project because I really wanted to do his images justice and design something that really reflected them. The Clients Wants The client wanted to be quite involved with the process, and being a creative, had a lot of ideas. They wanted it to be monochrome, clean and simple, which was something I could definitely work with. They also wanted a lot of input regarding layout and typography, but due to conflicting schedules we wasn’t able to meet up and discuss this.
3
What I Considered I wanted to make sure the design used the images to their maximum potential as they really are phenomenal and the client has travelled all over the world to get some of these shots. This meant that I wanted the design to be responsive - I discussed with my coder if this would be possible, which he said it was, so I was very relieved about that. Another thing to consider then, was how the mobile version would look, so I added that onto the brief as it would be necessary to show the client and the coder. But I also wouldn’t start the design until the client had chosen all of the images they wanted to include on the site, as well as labelled the albums and sent them to me. This meant I could make design decisions based on colour, layout, navigation, size and format. Format was particularly important as the client had a mixture of portrait, landscape and panoramic images as well as video. The client was really cooperative with this process, and worked to my deadline as well as providing me with contact details and making decisions with me on pages and content that were to be included on the site. The client has worked for names such as ASOS and BOSS, and he is particularly interested in fashion photography so therefore wants to attract such clients. So I want to create a design that appeals to these potential employers, and suits a fashion editorial style and layout. The last thing to consider was whether the coder had the ability to develop my design. This meant I had to communicate well with them throughout the design process before I presented the work to the client.
2 Mobile
Scroll Through Album
The Solution I sketched a few designs first, as well as thought about how the user would navigate from page to page. I quickly went into Fireworks and InDesign to create the design. The client didn’t have a logo, nor did he really want one - just the title of his business. So I created something really simple that could be used on the site and still be recognised as the logo but using the same typeface on the rest of the site. To pick the typeface, I went on Google web fonts and chose Raleway. This is because it comes in the two different weights which is necessary for my design, plus has a low page loading time. Because of the amount of high resolution images on the site, I needed to minimise loading speed down where I could otherwise it would unnecessarily increase, affecting the user experience. It is also a clean sans serif, so fits in with the clients ideals for a minimal site. To optimise the viewing for the user, I decided that a design with full background images would be best so there is no white space. Not only does this limit distractions for the user, but it makes the most of the space no matter what device you are on. This also shows a contemporary and advanced design, which reflects well on the client and his work. Where navigation was concerned, I tried a few different concepts before settling on the final design. Previously, I had extra pages for ‘Contact’ and ‘Work’ - the latter would have images and
links of all the albums. I then thought this was actually unnecessary and decided to move all of this information into the sub navigation, as it reduces the time the user takes to find the content. Now on the Home page when you hover over Contact, the information drops down for the user to see which is a much quicker experience. I think it looks a lot more contemporary too, which fits in with the clients he wants to attract. So when you hover over the Work page, all of the available albums drop down for the user so they can easily and quickly access what they want. Another feature which makes it quicker for the user to view photographs is by having a link to the specific album on the selected background image on the home page. Due to the mixture of photograph formats, I thought about how to lay them out. I decided that having the pictures seamlessly next to each other in the album is the best option, with arrows that allow the user to scroll through. Portrait and landscape images reach the max height of the browser, whereas panoramic images have a black background so that they fit on the browser completely length ways. To really show a contemporary and sleek design, I decided to have no background on the navigation so you can see the photographs underneath the text. The decision to do this was because it portrays an advanced design and has high aesthetic value which in turn reflects well on the photographs.
5
Presenting To The Client To present the work to the client, I created some mockups on desktop as well as mobile so that they could see how it would look when finished and have a sense of professionalism. I also had versions where you could see how you would scroll through the albums to give the client a better idea of how it would work. I sent the work via email, and the client loved the designs, stating he was really impressed with the work. He wanted a minor change on text, but that was not a problem.
What I Learnt I really enjoyed this project, as I am most interested in web design and want to develop this area of my practice. This is to gain experience and have more portfolio pieces to show that I am a credible web designer. By collaborating with a coder, it also meant that I could be more creative with my design without having to compromise it due to my limited developing skills. I could also create a responsive design which will be made, and that is something I couldn't do myself so working collaboratively has enabled me to do this. I am also a fan of the photographers work, so it was great to work with him and do the photos justice with my design.
6
Yoke To submit a poster ready for screenprint around the theme of Dialogue. Why I Chose The Brief This was an exciting chance to be part of an exhibition, as I had never been in one before prior to this. It was also a chance to support not only students on the course, but the design community in Leeds which is thriving at the moment with exhibitions and events happening all of the time. I also love screenprinting, and thought the concept of getting paired with another designer would be a great opportunity to network as well as enjoy print. What I Considered The brief requirements were that it was an A3 poster that is prepared for screenprint and 300dpi. I needed to make sure that my design worked in one colour so that it would have the best result when paired with another design, as it would be reproduced in one colour. I also wasn’t going to choose the colour, so the design needed to work in any colour and not be biased to a particular one. When using photographs I needed to make them halftone images in Photoshop first, which I had to learn how to do.
Airport Photograph Poster
Conversation In Code Poster
Exhibited Poster
Three Mini Posters with Soundwaves Design
What I Learnt I worked really quickly on this project, so I showed myself that I can produce work competently when I am pressed for time. It was also a new, exciting experience to be featured in an exhibition, as well as a confidence boost that my work had been picked to be featured on one of the bigger posters.
The Solution I actually created three poster designs for the exhibition with different concepts behind them and different content so the curators had a few options to combine the posters with. I wanted to do several because it was a small brief, so I could produce them quickly. One was vector based, the second was typographical and the third was a photograph. The first poster I created was based around a past conversation I had a couple of days earlier combined with my love of digital design. The conversation piece was just dialogue between me and a vendor when I ordered an ice cream in my hometown which is a seaside resort. What made it different was I wrote it out in code - using classes to change colours and forms to represent questions as well as working as a legitimate website. This shows my combined love for digital and print, and aimed to provoke the viewer into reading into what it said and seeing if they could work it out. The second poster was a photograph which I had taken of my friend in an airport. I love travel and thought it would work well with an illustration on top of the design. The reason I chose this particular image is that there is so much dialogue that happens in airports due to them connection people from all over the world. This can be from when people meet each other after a long time, or when they say goodbye to people getting on a plane. The concept for the third poster was to record conversations that happen in my kitchen on a daily basis with my housemates, and convert that to a visual form. I did this through using the soundwaves of the recordings I made and live tracing these to turn them into a poster. I thought this would overlap well with other designs as it is quite spaced out, yet has a strong concept behind it.
The Exhibition Being able to see my conversation in code poster paired with another designer was really fun as it showed how someone else had interpreted my work and I didn’t know what to expect. My soundwaves poster also got featured a few times on the mini posters around the exhibition which allowed me to see it being used in different ways each time. It also gave me an insight to what students on our course can achieve in such a short space of time, and I enjoyed keeping up with their progress throughout the project. It was a great turn out on the opening night, and a lot of designers contributed so it was really inspiring to see.
Soundwaves Poster
10
Home Page
Keith Baldock Artist To design and build a website for a local artist and take it live. Why I Chose This Brief The clients original website was very outdated, and I knew I could drastically improve its appearance and functionality. It was the first website that I would take live, and I really wanted that experience as there was a lot I didn't know about it so I thought this would be the best way to learn. I also wanted to test myself and see how quickly I could produce it as I had been practicing a lot of coding at the time this project arose. I had never created a portfolio of images through code before, so I wanted to learn this new skill for future projects.
view his work and contact him via email, so this needed to be visible throughout the site. The client and his audience is maturer, so the site needed to be easy to use and navigate through as well as something they are familiar seeing. He also wanted a photograph of him on the home page so that customers felt he was more approachable. What I Considered I needed the site to really easy to navigate and use due to the older target audience, so this needs to be reflected through the design and user experience. I also needed to consider the complexity of the design because I would be coding it and my knowledge of that was basic. Luckily, the design needed to be simple to increase usability for the client and audience.
The Clients Wants The client wanted all of his paintings to be showcased so that customers could view them online and order prints from him. He didn’t want an e-commerce site, just a way for people to
11
The Solution The previous site didn’t have a logo - just a PDF version of his printed brochure, so I created a simple one that could be used on the site. While I made this I retrieved all of the content for the site which included all of the images, and rewriting the content on the original website. I couldn’t copy the text because it was all one image - so I also took this opportunity for the client to revise and change it if needed. I kept a simple colour scheme of navy, black and white to reflect his traditional values as an artist and portray a professional tone of voice. For typography, I used a serif as this is what a maturer audience are more used to due to them reading more printed books. I kept the layout simple and functional, but contemporary and clean. The home page highlighted his products, about him and an image of the artist. I also included the contact information on the footer, so that it was always available on every page. The rest of the pages were showcasing his artwork, and I labelled the navigation as well as arranged the paintings in their respective albums. The original album titles were Seascapes; Aviation; Misc and Animals. Misc was too vague beforehand, so I changed it to Lincolnshire Scenes which sounds more professional and focussed, whereas Animals previously had paintings of animals, wildlife, flowers and nudes so I felt Nature was more appropriate. Once I had the design finalised, I went to code it. This took me a day to do which surprised me because I had allocated more time for myself. What took the longest was inputting all of the images as there was so many. It went smoothly as the design was fairly simple, and I used Lightbox to create the image portfolios. The next day the website went live, so the project was resolved over a space of three days.
Album Page
Presenting To The Client The client was very happy with the design, which is why I was able to code it and take it live as soon as the design was signed of. I will maintain the website and update it when necessary, as the client wouldn’t be able to himself and I didn’t know how to create a CMS at this point. What I Learnt This was a valuable project to me because I wanted a live website project and this was my first one. I learnt vital skills such as improving my coding skills, working with Lightbox, hosting and launching a site. The opportunity to build the site was the most important thing to me, because it gave me a chance to build on this new skill. This set up my confidence for taking on more web projects, as well as furthered my realisation that I want to be a web designer. To Improve As the website is aimed at a maturer audience, I would have liked the website to be more accessible. By this, I mean I wish I knew how to make typography responsive so that it fit on all screen types as well as giving the user the option to make it bigger if they need it. For it to be responsive in general would have been a huge improvement as although it looks good on a 13” screen, it looks very small on a 27” iMac. The client was happy with the outcome, and I know how it needs to be improved, I just don’t know how to code it yet.
Business Cards
Sophie Davey Photography
The Clients Wants The clients focus when it comes to photography is travel, urban, landscape and architecture. I wanted to reflect all of these topics in the business cards so that clients know she has a wide range of expertise subjects. She likes monochrome images, as well as simplicity and minimalism. I could carry this through into the design easily and reflect the images accurately.
Design a set of business cards and a logo which will be used as a watermark for a photographer.
The Solution I did a couple of sketches then went straight onto screen to try them out. When designing the logo, I kept it really simple by choose the font Roboto and altering the kerning to make it justified, and used two different weights to show contrast. I used a sans serif because of the clients wishes for the design to be minimal and clean. To make the logo stand out and portray a photographer, I created an aperture to replace an ‘O’ in her name.
Why I Chose This Brief The client is a photographer who approached me asking for a logo and business cards. I agreed to do this because I admire the clients work and I wanted to gain experience with getting cards printed as it isn't something I had researched previously. I knew that it would be a quick brief to produce so I took the opportunity.
13
Watermark
I sent this first design to the client to see her thoughts, and she loved it. I sent the client a PNG file of the logo in white so that they could use it as a watermark on their photos. I then moved onto the business card design which also took a relatively short time to create, meaning the whole project took less than a day to design. On the back of the cards, I have used five different photographs that the client has taken so that she can choose which ones to give particular clients as they feature different subject matters. I printed them myself first so the client had some to use, but I started sourcing where would be best to get them professionaly printed. Printed.com had a lot of options to choose from as well as being very cheap. I gave the details to the client and advised on the best options from lamination to size and format. The client can also choose multiple designs in the same order to be printed which works out for the design I have created.
Presenting To The Client The client was really happy with the outcome and has been using the watermark on all of her work which is pleasing to see. She has been implementing it since I designed it which I am happy about because her work is now protected. She has also taken on more freelance work since. What I Learnt This was a fun and quick project for me to turn around, and I didn’t expect the client to be so pleased with the outcome. As the logo only took me ten minutes I thought that I would need to do a lot more revisions, so sending it to the client early saved me a lot of time. I had never spent a lot of time designing business cards previously, so this was a good chance for me to try a lot of designs, which I did. Now I am a lot more confident in producing them, as well as printing them since discovering online printers.
14
Air Up To create a logo for a local hip hop artist called Air Up, and an album cover for his latest EP, Reflections On A Local Level. Why I Chose To Do This I had been approached quite a while ago to produce a logo for this artist, but I didn’t have the time. So when this module started I approached the client again asking if he still required one, which he did. He also mentioned he was releasing a new EP, so I offered to do the artwork for that as well. The client said I can have full creative control and was open to anything that I suggested, so of course I jumped at the chance! I like the clients music and was flattered by their trust so I knew it was going to be a fun project that I wanted to get started on as soon as I could. The Clients Wants The client also collaborates with a producer sometimes, to which the name changes from Air Up to Air Up & Withers. So I had to create a logo that could work on its own and when it is being used as a collaborative. As I am also doing album artwork for the client, the title of the EP is Reflections On A Local Level. He only needed a front design for it as it will be released digitally, and so there is no need for a back design. When I created the logo the client did make a statement that it would look great on a white background for the album cover, but gave me full creative control to do whatever I felt was appropriate. The Solution For the logo I created a custom typeface that was exclusive to the artist and producer, working in different formats and scales. There are huge contrasts in the weight of the stroke to reflect the variation in the music the artist produces. I created a sans serif as it is a new band so I wanted to reflect the contemporaneous. As I had free creative control over the album artwork and wasn’t pointed in any particular direction, I decided to do three designs for the client. This meant I could do completely different designs so the client would like at least one of them and have a choice. As the client had suggested the logo should appear on a white background I designed this one first so he could see what it looked like but I knew he would prefer one of the other two. The second design was purely typographical, and I experimented with two colours, overprinting and manipulating text. I loved this design and I tried so many different variations with placement and colour to make sure that it was readable. However, the third design is what the client chose. This was the most conceptual piece with the illustration reflecting the album title. It shows trees which are reflected in water underneath, and where the base of the trees meet is level. I used grain and the width tool to create depth and interest as well as overprinting colours. I then showed these three designs to the client, and although he liked them all he thought the design with the trees was the best solution. Presenting To The Client The client was really positive throughout the project, and was really grateful that I did multiple designs quickly. This made my design process a lot easier and fun because I wasn’t worried about the pressure of what the client is going to think. Throughout the project I sent the client revisions to see what he liked regarding colour choices and finally presented him with the three final designs to give him the choice.
15
Album Album Artwork Artwork
What I Learnt I got to experiment with Illustrator, doing things that I hadn’t before, such as using grain as texture, overprinting and global swatches. I improved my skills using this programme and although I use it all the time, I became more comfortable when using it due to practicing new techniques. It also gave me experience interacting with a client frequently, and I think it helped me a lot that the client was really positive about the work I was producing and made me more at ease about showing my designs. This has increased my confidence when presenting work to a client, and from this I think I have learnt to make more of an effort when presenting the work. By this I mean mockup up designs so the client can see what it would look like in context, and it is definitely something I have implemented since this project. It is a lot easier to propose work with templates than I thought beforehand.
To Improve Although the client was really happy with the designs, I felt like I could have done more because it didn’t take me long to produce them. Also, now my skills have improved on lllustrator drastically, I would redo the final design and improve it so much. I have used the width tool, brushes and the grain effect extensively now and I know how to use them better so I would have liked to implement my new skills here.
16
Full BEAR Tabletop Playset Full BEAR Set
BEAR A YCN project to design the back of BEAR Alphabites cereal for kids with the focus of a letter on each box. Why I Chose This Brief This was a collaborative between me and Sarah Heal, and when looking through YCN this is the one that stood out to us both. Sarah loves packaging and illustration, while I wanted to improve my illustration skills and knew we could think of some great ideas for this brief. The Brief Requirements The existing BEAR Alphabites cereal features a letter theme on each pack, and they have asked for designers to continue this theme with new ideas. Points made were that currently, games are quite short, can be aimed at parents and don’t offer a lot of fun to children and this needs to be changed. They wanted kids to feel excited about the next pack and to think of a way that would make them want to collect all of the boxes. Another key factor was making kids learn without realising that they are doing so. We took all of this onboard to create a interactive and simple solution packed with facts and bold illustration.
Full Playset
The Solution The company has a natural and ethical ethos, and this is reflected in the ingredients and name of the brand BEAR. To reflect this we created designs based around woodland scenes so children can learn about Bear, his friends and natural habitat. We also aimed to encourage children to be more outdoorsy through highlighting different facts about it due to the big video game culture here. We wanted to look at being both ‘educational and crafty’, which was asked for on the brief. Therefore children can cut out the components on the pack and create their very own tabletop playset. I designed little stands that slot into the characters and objects so that children can prop them and play with them. At the same time however, there are plenty of information on the back of the boxes referring to all of the characters included so that the child can learn about everything during the week at breakfast time before they build the set. There are facts about Bear and his friends, a mini search game on each box and even a create-a-character feature. This balance of education and creativity ensures that the children learn without realising they are doing so, another brief requirement. By having slots for the components, no glue is needed to create the playset - only scissors. This makes it a lot easier and quicker for it to be assembled. Some components don’t need slots such as the campfire, and the oak tree which uses the fold in the edge of the box to stand up.
What I Did The style of illustration was inspired by 1950s golden design, and Sarah was already competent with this. To work to her standard and style was certainly a challenge, and although I was a lot slower than her at producing the work, it all fitted in with the rest of the designs. I learnt so much about using brushes, grain textures and stylising illustrations throughout this project and my Illustrator skills have also improved. Although hard work, it was lot of fun producing characters and rewarding afterwards. We both worked on the same boxes so we had a lot of input on each others designs. We shared the work out for the content of the boxes as well. We had fun choosing the box themes and characters to include on them together. Then I provided all of the information on the Rivers box and half of the content on the Camping and Treetops boxes. The facts were an important part of the boxes so we wanted to have equal decision making when doing this. We thought about how they were relevant, whether the parents would approve and most importantly, if they were interesting. I designed the sides of the boxes, taking the necessary information from the existing packs and transforming them into the style we had been working on. I wanted to do the sides so that there was a space for the slots to be put, as well as looking more consistent and professional when taking photographs of the boxes. I think I did a good job creating a consistent but readable design which fit in with the project. When testing the components we did this together, checking if the slots were the right size and if everything stood up. When alterations needed to be made, I did this. When it came to printing the designs, I did this because I didn’t mind waking up early and getting everything prepared for print. This included adding a bleed, creating outlines on text and making the artboards the correct size. We wanted to photograph everything properly in the studio so it looked professional - this was how the judges would see our work. We set up in the studio together, but then I took over as Sarah had to leave. I was apprehensive at first, but I soon got into it and took clear photos of everything that we needed. Once I had finished up there, I selected all of the best photos and sent them to Sarah. When it came to the boards, I created the layout for them while Sarah edited the photographs to be ready for them. We worked together on the content and submitted the project together.
20
Treetops Box
Overall I absolutely loved the outcome for this project and the only thing I would have wanted to change was my illustration skills. It would have been more efficient if I was quicker doing the designs and had better drawing skills. Having said that, I have now improved from doing this project. Our method of working was to share everything and work together on the same things. This was a good way of working for us because we are together all of the time and we were completely comfortable with altering what the other person had done and making suggestions easily. The designs were constantly evolving and changing through each other’s input so I think we made the right choice doing everything together. This was made a lot easier through the use of Dropbox too as we had our own folder where we placed everything for each other to view and alter.
Companions Pet Shop To create a logo for a local pet shop called Companions Pet Shop, which would be applied to the store front sign. Why I Chose The Brief I wanted to do start doing some branding for this pet shop, as I knew that at some point I would be asked to more collateral and perhaps a website for it. It is local to my hometown, so I was excited at the prospect of having my work on signage that I, and people I know would see it. I haven't done much logo design, so I thought this would be a good opportunity to do one, plus I liked the subject.
What I Considered I wanted to create a universal logo that could work in green, as well as monochrome and appeal to both old and young audiences. This is because of his varied customer base and footfall. If it was going to work in printed material, on screen as well as on signage it needed to work at a variety of scales and resolutions. The shop sells a variety of products such as food, bedding, treats and housing for rabbits, cats, fish, hamsters, birds and ferrets, but with a main focus on dogs. As its priority is for dog products, I thought the logo could reflect this in some way so that people realise this, but still showing that it caters for a range of pets by having ‘pet shop’ in the title. Although the client wanted to compete with major brands like Pets At Home, I had to bear in mind that his shop is on the Grimsby Market, which is actually very small. This means I needed to tailor the logo to this so that it attracted the correct market. Looking at existing pet shop logos, they were quite tacky and generic, and although I wanted it to be obvious so that people recognise it instantly, I still wanted a concept behind it.
The Clients Wants When talking to the client to see what they wanted, they actually had some ideas in mind. The client had asked me to use green, include a paw print and compete with brands such as Pets At Home. It had to attract new and loyal customers, as well as old and young. I was happy with all of these requirements, and thought that they would represent his shop well and was something that I could definitely work to. The client had already done some designs himself but didn’t like any of them and wanted me to produce something more professional.
21
Presenting To The Client I created two boards for the client explaining my justification and two further revisions of the logo so that there was a choice. I was worried the client didn't like the logo at first as I had to pester them to look at the boards, which took four days. I wanted them to look at it as soon as possible to gain their feedback and make any necessary changes while I had the time as I was working to a strict schedule. The client was happy with the design, and said that it fit his business and brand. They are thinking of bigger plans for the company, including moving location and setting up a website, so until further decisions are made regarding that, the logo won't be turned into a sign for the existing shop. What I Learnt I completed the logo in half a day after doing a few digital revisions, which I was really pleased with because it shows how quickly I can design something that I can charge a lot for. It meant that if the client wanted something changing then it wouldn't have been a waste of my time because I didn't spend long on it. I also enjoyed creating my own typeface - I like working with clean sans serifs, and I found it natural to just design my own when I couldn't find one that I liked. I also learnt a couple of new tools on Illustrator by doing this to achieve the rounded corners. Considering I hadn't really done any logo design previously, I was also happy with how I combined my own concept and visuals with the clients wants, as I took them all on board. I was also surprised at how quick I produced it as well, as I was quite apprehensive that I wouldn't be able to generate an idea for a while.
The Solution I created a custom typeface for the logo so that it would be exclusive to the brand. It is a rounded sans serif, to create a friendly and playful tone of voice. By being in block capitals, it portrays a sturdy and bold design which reflects on the products being sold. The contrast between the friendliness and block capitals shows a practical solution. It will also stand out to customers passing by because it is striking and doesn't blend in with other signs in the market. I chose a green like the client wanted, competed with existing brands and had a reason behind it. It is an outdoorsy green to relate to dog walkers who go on fields and for animals such as rabbits who live outside. The paw print suits the client's wants as well as lets potential customers immediately what the business is through imagery. Placed in the 'O' and next to the 'C', it also resembles a collar tag when turned on its side, which gives another sense of purpose. The dog bone around the final design emphasises the focus on the dog products that the shop sells. It also creates hierarchy between the word 'Companions' and 'Pet Shop'. I think this was important as 'Companions' is the actual name of the shop. It is also a rounded illustration to fit in with the typeface and highlight the friendliness of the brand. Overall the feel of the logo is clean, friendly and functional. Although contemporary, it still has a lot of aspects which make it resemble a pet shop so is accessible to all audiences.
Overall I did enjoy this project as it has made me more confident with working quickly, logo design and thinking of concepts, as this is something I was worried about not being able to do well. I was also able to create the typography which I like doing, and gained positive feedback from my peers which also boosted my confidence. However, I would have liked the client to have communicated with me more, from looking at the design sooner to keeping me updated on the new plans for the business, as I could have done more for them in regards to designing a website or different types of signage. I felt like perhaps as I offered to do the work for free I wasn’t taken as seriously, because of the delays the client took in responding to my emails about looking at the design, and not mentioning his ideas for expanding his business. I felt like I could have helped him produce bigger and more extensive branding when expanding if he had contacted me about it.
22
P.A. Kelsall To design a website for a plumber based in Lancashire. Why I Chose This Brief As I was already collaborating with a coder on the Photography By Matthew Savage website, we decided to work together on another project. This time he had been approached to create a website, but he knew design wasn’t his strong point so he asked me to do that part instead. I was happy to do the project and return the favour, as well as expand on the web design in my portfolio.
The Clients Wants The coder had already done a design for the client, which was smart and clean in my opinion. But the client thought it was too boring and didn’t like white space. I knew that I could work around this by using colour and a different layout arrangement. The client wanted his logo to be blue rather than the current green, so I recreated that as the logo available was only a low resolution image. The client also needed the Gas Safe Register on the website to show customers that he is a registered tradesman. This was an absolute must to be featured.
What I Considered I needed to make sure that the design I created was feasible for the coder to develop, so I worked closely with him. It was also his client primarily, so I kept him updated throughout the design process to hear his thoughts. I listened to his input as well as relying on my own decisions. The client is an established plumber throughout various areas of Lancashire, so I needed to reflect a professional and credible business.
23
What I Did I only started the design work once I had all of the content, including writing and the images to go on the site. This was so I can work my layout around what needs to be included. I used the blue in the logo throughout the site to keep it colourful, but paired that with grey and white to portray a professional and neutral tone of voice. I included the contact details and Gas Safe Register logo on the footer, so that these would be seen on every page the user visits. The contact details needed to be easily accessible so I thought this worked well. The layout is kept clean, simple and consistent on every page. Having a full width banner on each page keeps it interesting and contemporary, and each one has varied content to keep it relevant. I also added some of my own content so that I could fill more space, to fit in with the clients wants of having little white space. I made the added content realistic so that I could show the client it had a purpose of being there, such as services provided, why to choose their business, and testimonials.
24
Presenting To The Client I presented the website to the coder first of all, and he was very happy with the design and happy to show it to his client. When he showed the client the design, he was also happy with it so it had the green light to start getting developed.
View Gallery
Overall I was really happy with this project as although designing for a plumber isn’t the most glamorous, I think I managed to create a professional and clean design without compromising on aesthetics. Looking at existing plumbing websites I didn’t find any well designed examples, so I am glad to have made this business stand out amongst the crowd. It was also another opportunity to create a design where I didn’t have to compromise due to coding skills, so it was a fun project to complete. It’s also another website to add to my portfolio which is beneficial as I can also show people the live version.
26
Future of Bacon Packaging Submission
Future of Bacon Packaging To design a premium range of chilled bacon products for Danepak. Why I Chose The Brief At the beginning of the course I loved food packaging, and thought that I wanted to do that as a career. However, it soon became clear that I didn’t enjoy it as much as I thought I would. All the maths, nets and crafting of it didn’t appeal to me and I became more interested in designing for the screen. So I thought by picking a packaging project I could give it another go and see if my opinions changed once I learnt more about it. If anything though, it has made me dislike packaging even more - again for the same reasons.
The Solution For the aesthetics I decided to go with a black background, limited colour palette and typographical led design to portray a premium and established brand. Three fonts have been used in different weights throughout the packaging to make different segments of information stand out, increase aesthetic quality, as well as increase legibility. I used white text over the black to achieve maximum readability. There are five different products in the Danepak bacon range, so different designs have been made to accommodate these. Different coloured pigs have been used to represent the different flavours - smoked, unsmoked and maple-cured. I chose a flat style over skeuomorphism or a photograph of a pig as some consumers may be put off by this. The weight of the bacon needed to be visible on the packaging, and this is usually presented discreetly. I placed on top of the pig illustration, which represents livestock branding and gives more purpose to the illustration. As it was a packaging brief, I had to think about the materials used as well, and if they were suitable for chilled meat products. I decided the outer packaging would be made out of waxed cardboard, as this is waterproof. This means it won’t turn soggy whilst in the supermarket’s display or consumer’s fridge, and so will preserve the design and inner packaging which the outer packaging protects. I chose a pillowbox net for the packaging as this shows a premium feel and is different to how current packaging looks, so will stand out on the shelf. There is also a window in the outer packaging because customers like to see the fat on bacon, and this is a big factor in whether they buy it or not. This allows the consumer to judge the bacon easily before they pick it up. At the same time it is a sturdy package to protect the bacon and allows the information on the back to be easily read. As for the inner packaging, I made a grip seal bag for the bacon to be contained within. This was done by taking an existing resealable food bag, and using a vacuum sealer in the 3D workshop to change the size to fit the bacon and the packaging. To make sure it is the correct size for bacon, I measured some and took a photograph. Then I printed it and placed it onto mountboard - this was also used for the photographs to show how it would appear. Grip seal bags are made out of polythene which are suitable for containing food. They can be recycled with other polythene materials, and by being resealable it also means the consumer doesn’t have to purchase their own grip seal bags to put the bacon in. This preserves the meat in the fridge so isn’t wasteful, which means this choice has sustainable qualities. I used the lasercutter when I printed my net to get all of the correct creases and a perfect cut because it was quite difficult to do with a scalpel. I wanted to take photographs of the products in their range for the boards. I created a make shift studio using white paper as a backdrop next to a window and used an iPhone.
29
The Submission For the submission, I created 3 design boards explaining all of my design decisions and process. I also filled out a claims form which was a requirement explaining why I thought I would win. I bought two flat pack boxes to package the products and boards and sent it off. Two weeks later I was emailed with my results which was the Gold Award - so I had won the competition. Overall I disliked this project because I didn’t feel like my idea was very good - this was due to the fact I didn’t have a lot of knowledge on what materials was appropriate, and I was limited in what I could produce as I don’t have the skills or facilities. I didn’t feel like my design was very innovative although I had tried to think of the best outcome. However, to win the competition was a nice surprise.
30
Module Evaluation
I have really enjoyed this module, as I was felt I was ready to start doing live projects for clients. The process of completing projects for clients and interacting them was definitely a needed experience, and a valuable one which as prepared me for more work. It was also interesting to see what was expected of me from clients.
Here is a summative evaluation of the Responsive module as a whole.
I enjoyed being able to choose my own briefs, so that I can do more web design projects and complete projects that people have previously asked me to do, but I didn’t have the time. As I am most interested in web design, I had the opportunity to design three websites, and build one of them myself. This is beneficial to me because I can include them in my portfolio to not only attract more clients who want web designs, but to show that I am a web designer. I found it easy having briefs lined up, because I have been asked to do work prior to this, such as Air Up. But I couldn’t do it at the time due to having too much work, so being able to incorporate it into this module was beneficial. I also heard people would need some design work, such as Matthew Savage Photography and Companions Pet Shop, and I was able to offer my services because I knew that I could use it as work, and so doing me and the client a favour. When it came to competition briefs, although it was fun choosing what I wanted, I think I made the wrong decision when it came to the individual brief and I didn’t enjoy it at all. It didn’t benefit me in any way because I don’t like packaging, but the only silver lining with this project is that I won the competition.
31
I was surprised how quickly I was able to complete projects, and it gave me a confidence boost as I thought that they would take me a lot longer. The briefs in this module are definitely the quickest I have worked. I think than when you’re doing work for a client you want to impress them and show how efficient you are by completing something quickly rather than wasting time on the project, so you are more motivated to get on with it. I have found that this also benefits me, because if they want changes doing then I feel like I have enough time to go back to it, and when I don’t charge clients I’m not bothered because it hasn’t taken up a lot of my time. With saying that, since doing these projects for this module, I will never do work for a client for free again. It also made me feel good when clients were surprised at how quickly I worked, notably for Matthew Savage Photography, P.A. Kelsall and Keith Baldock Artist. These were all the website briefs that I did, and I think this could be for two reasons. People expect websites to take a lot longer to design because they are quite big and I finished each design in a day, but also because I really enjoyed them I was really motivated to start and complete the project to show the client what I could do. I worked a lot better on the fast-paced briefs, but when it came to the individual competition brief I felt like I dragged it out a while. I think this is because I started it in the November, and the deadline wasn’t until March. This made me think that I had a long time to do it, and I kept putting it off because I wasn’t enjoying it.
I’ve definitely learnt and improved on skills throughout this module and been able to try skills that I wanted to learn. I’ve never really been great at presenting or proposing work once it has been finished, so I have improved on my mockup, boards and photography skills. This has been really important throughout the module because I want to look professional when presenting work to clients. For the competition briefs I had to produce boards, and I wanted to include photographs so I had to make time to do that. I was apprehensive about using the photography studio because I had limited experience in there and I wanted to get them perfect as this is the only thing the judges would see of our products. As I took most of the photos for the collaborative by myself, I felt a bit of pressure at first. But I soon got into the swing of it and was comfortable putting the equipment away. The outcome was good, and I would be confident in doing it again. For several of the briefs I produced mockups to show the client so they can see their work. I did this for Matthew Savage Photography and Air Up so they could see how their work would look as opposed just an image of the design. I definitely think it is a good idea producing mockups because not only does it look more professional, but it makes me feel more confident about the work. Although I can picture what it will look like when printed or used, that doesn’t necessarily mean the client does. Through using Illustrator throughout the whole module on every project, I have improved using that. I have picked up little shortcuts and learnt about new tools that I hadn’t used before. These included how to use grain textures, the merge tool on the pathfinder and using brushes. When I built the website for Keith Baldock Artist I also improved my coding skills. This was the first time that I used Lightbox, which helped me create an image gallery for his portfolio. This was also the first time I took a website live, so that was a new process that I had wanted to learn for a while, and was valuable to me.
32
I definitely have learnt how to interact with clients more, and this has been one of the most enjoyable parts of the module. It’s so exciting to produce work for someone and send it to them knowing that they could use it and it will be seen by lots of other people. Although, I do get quite nervous when I send it incase they don’t like it. I have been fortunate throughout this module that my clients have all like the work that I’ve produced. Some have asked me to make changes but I have been happy to do that because its ultimately their work, and I want to make them happy. No one has asked me to do changes that I thought were unjustified. It has also been satisfying to work with real life clients as this is something that I hadn’t done before. I never felt under pressure, and I think this is partly because I worked quickly on each project so that I never became too attached to a design and I knew that I could just change it if they didn’t like it. The only project that I would have felt rejected for if the client didn’t like it was the Matthew Savage Photography website. This was because I thoroughly enjoyed the project and had been really excited about starting it. I made sure the design was absolutely appropriate to the client and had thought about everything from optimising the photos to user navigation and I was really confident that I had done the best that I could. I was really nervous when I showed it to him, but his reaction was really positive so that was a big relief. He had a couple minor changes he wanted to make regarding the type, but that was fine. That gave me a big confidence boost. The only client that I had who was a bit frustrating was for Companions Pet Shop. This was because the client asked me several times if I had started working on the logo yet, even though I had said I was busy with other work first, so I made time for it that week. I produced the logo with all the clients requirements and a custom font that I created. I then sent two boards to the client with three logos on for them to choose, and the concept underneath them. I kept asking the client to look at them, and they did - four days later. This was inconvenient for me because I had allocated time for any changes before that due to a tight schedule I was working to. The client said that they were happy with the design - but they had been thinking about moving their business to gain more upmarket customers and sell higher quality products. This has changed the audience and would have influenced my design decisions had they communicated this to me. So for now, a logo isn’t needed until they sort out what they are doing with their business.
I loved the collaborative brief, it is one of the favourite projects that I have done this year. I also loved working with Sarah again, which we did last year. We have improved a lot since then, and knew that we wanted to collaborate this year as we now live together and already work together all the time. We had already been helping each other improve skills since the beginning of the year, so I thought this would be a good opportunity to further that. However, when Fred warned that people who are best friends and live together shouldn’t work together we did attempt to find another partner. Alas, this was unsuccessful and we decided to pair up. We didn’t think we would fall out because we are really honest and straight with each other anyway. We chose the YCN brief, BEAR. We thought of a few ideas for it when we first read it, so we knew we would be able to get started on it straight away. Sarah loves illustration and wanted to do some more for her portfolio while I wanted to improve on my illustration skills, so it was a good choice. Although most people split their work down the middle we very much worked together on everything. We shared files so we could work on and alter which each other had done. This may have slowed us down more and wasn’t as efficient, but we got a result we were both really happy with, and the design kept improving throughout the process. We got the work done in the end, and although stressful, I wouldn’t change the way we worked. I think it was actually beneficial that we lived together, because we could always work on it and ask for feedback. I particularly asked for feedback a lot because I wasn’t very confident with my illustration skills, and I wanted to work to Sarah’s standard and style, so she knew what to suggest. I did feel like we didn’t have a lot of time to produce it, and we did want to do more initially. I think I would have enjoyed the process of it more if I wasn’t as stressed to get it finished, but it was rewarding when everything was finished and we had the photographs. I do like working in a group, but I always have done so it was good to do another collaborative brief. I look forward to seeing the results of YCN in June!
33
Regarding the individual competition brief that we had to pick, this was the only project throughout the whole module that I haven’t liked. I don’t like packaging, yet I chose a packaging brief. I did this because I felt like I should give it another chance to see whether I like it, and improve my crafting skills as you had to produce the packaging for submission. Throughout the project I realised that I had little knowledge on what materials were suitable for food packaging, and I didn’t have the resources to make the packaging. This frustrated me throughout as I couldn’t think of an innovative solution to reinvent bacon packaging and I didn’t think I could produce a good mockup. I wished I had chosen a different brief at the beginning which would have been more beneficial to me, but I stuck with it. I did a lot of research and thought of a lot of ideas, but I still wasn’t happy with my final resolution. I felt like I spent more time on it than I should have because I was trying to think of the perfect answer. But in the end, I just did the next best idea that I had, which was a reasonable solution, just nothing amazing. It answered the brief, but I just wasn’t happy with the outcome. When I sent it off for submission, I actually won the competition. However, I don’t feel any better about the project because I didn’t enjoy it, and I don’t think that it benefitted me in any way. I think this shows that I am a bit of a perfectionist and spend too long on a brief trying to get it right, and setting myself high standards. I don’t think this is usually a problem, but I need to learn to know when to just move on and design with the ideas I have so that I don’t run out of time and cause myself stress with it.
Overall, I have enjoyed this module and I feel a lot more prepared to have clients in the future. I wish I had time to have completed more projects because there was a few more websites that I could have designed. But I knew that if I took anymore on I would have less time for my other modules and my work/life balance would suffer. I am happy that I have managed to do some logo designs as I hadn’t really done any before, and expand on my web design portfolio. It has been a really beneficial module to me and it has definitely prepared me for working at my web design placement at twentysix digital and interacting with new clients.
34