The Brief

Anastasia Rattigan from the Online courses team at the University of Reading develops Massive Online Open Courses (MOOCs) alongside the FutureLearn platform to expand the University’s portfolio of online courses. She had proposed two academic animations to be used by the Microbiology department, and have them catered for two different user groups, those studying with the online courses or those on the undergraduate degree in microbiology. The animations themselves were asked to encourage prospective students into microbiology, stimulating recruitment and be used as revision material for first year students on the course. Therefore, they had to be succinct and effective in delivering their messages. Also, the client wanted to communicate that University provides a fun and engaging but also academic approach to the learning available amongst the courses.

Research

Client Meeting

Anastasia approached us asking to discuss the parameters for each animation and meet the rest of the team of clients. At the first meeting we delved deeper into the scope of each animation and gathered viewpoints from both Anastasia and members of the Microbiology department. It was a great discussion where they presented their goals for the project and asked what would be professionally achievable in the time frame given. We also discussed the contents of each animation, ‘The Tree of Life’ and ‘Microbes at War’. Both animations were vast in content and the clients expressed how they wanted each part to have purpose and not waste time. The latter animation required an amount of scientific knowledge that neither of us could really put into practice, however we agreed with the clients that they would supply this difficult content and explanations where appropriate. Understanding these specifications meant that we could achieve the animations with the client’s perspectives in mind allowing a more successful outcome in the long run.

Style of illustrations

The illustration style of the animations was crucial to determine for both us and the client, in order to keep consistency across the animations and other MOOcs across the FutureLearn environment. The general consensus was that they should be biologically accurate without being too detailed, but also not too far into the other side of the spectrum being too cartoon-like, stressing that they were against the idea of characters for each microbe or bacteria. They favoured the idea of hand drawn images at first, stating that this style reflected the scientific diagrams usually associated with the course. We reassured them however that digitally produced vector illustrations would be more fitting for the kind of animation we were delivering, as well as being easier to implement and animate. We researched different existing illustration styles used for microbiology and decided on flat vector images.

Design Process

Scripts

To ensure academic accuracy and to cover everything necessary, our client provided us with a rough written script highlighting what needed to be in each animation and the order in which it needed to flow. These scripts were detailed and roughly timestamped, providing the foundation for us to produce corresponding storyboards.

Storyboards and Illustrations

Storyboards allowed us to visualise the key frames of the animation, and these were sent to client incrementally for approval. Using scientifically approved representations of the images, we sketched the layouts for each section of the script. To maintain a level of consistency we contacted the client regularly to receive feedback in terms of how well the images matched the script, the narrative of each scene and whether it was matching the goals they had in mind.

When designing the illustrations it was vital to ensure that they were not only visually engaging but also biologically accurate as they would be used as a learning aid. It was important to consider how each illustration would be moving in the animation so that they could be easily manipulated when animating. In terms of colours we were informed that pink or blue bacteria were only these colours since they had been stained to be visible under a microscope, and they wished to reflect this in the final images.

Animation Process

In order to animate to the best of our abilities and fulfil the client’s needs, as a team we had to do quite a lot of self-directed learning of Adobe After Effects. At the time it was new software to the majority of our team and using it appropriately would help both parties out in the long term. When we wanted to create a specific effect or transition on our images we researched videos and forums to find the best way of achieving it. This practice not only gave us valued experience of a new software, but also helped us develop our skills at self-directed learning and independent work.

After all the required illustrations were created, we began bringing them into Adobe After Effects and animating them. This involved altering the prepared illustrations individually, giving each one micro tweaks in ‘frames’ to simulate movement. We then began assembling the illustrations into the desired composition and applied the transitions appropriately. During the animation process in order to test timings of each scene, the script had to be recorded and played over the animation. Assessing the playback this way allowed us to make changes to the times according to the tone and delivery of the script. Once a good level of progress had been achieved, we sent our current developments through to our clients. On the topic of feedback, we received several changes ranging from minor alterations to major composition tweaks. This resulted in some complicated adjustments that eventually paid off in positive return feedback. Animation files can be fairly large and one issue we encountered was lengthy rendering times to video files. This was a laborious setback that prevented smaller changes to be made at a time, costing up to 12 hours for some instances. Whilst long this did allow us to be more vigilant as a team, making sure less mistakes were made and each scene doubly checked before its render.

Reflection

Organisation and Teamwork

Our team communicated through a messaging group, allowing us to delegate tasks and troubleshoot any technical issues quickly and easily between us. Staying organised was efficient this way, however the collaboration aspect on each animation became tough. This was due to the difficulties of sharing large files between us and After Effect’s disadvantages of collaborating on large scale animations. We overcame these by working in the same spaces and agreeing on changes before they were implemented.

Client Communication

Since we had a team of clients, sometimes messages became lost in translation as they were passed from team to team. Multiple channels of communication and pathways meant that feedback had to be gathered from separate parties and then sent back over, delaying the process. As our clients were also working as full time lecturers, it was hard to find times when everyone was free for meetings and it also meant that production was quite slow while we waited for scripts and voice overs from the educators. Client communication was consistent however, with them expressing their sympathy with the large files and slow rendering times needed to produce their deliverables.

Overall impressions

The final feedback was positive, explaining how each animation had been successful in terms of smooth compositions and conveying their original goals. The clients expressed their gratitude and were receiving positive feedback from their users. Our collaborative efforts meant that students could revise using these sources and further their learning experience for their own education.

“Thank you so much for sending the animations through, they are looking great! We’re all really pleased with them.”

– Anastasia Rattigan, University of Reading

 

The brief

In the second term, Part 1 students are required to design a website, however, they are given the guidelines and logos in advance. The brief of this job was to design the brand guidelines for a minimum of two local businesses, which will then be used by the Part 1s. The guidelines must include logos (colour, black and white), fonts and colours. The local businesses that can be designed for include: The washbox, Reading garage, Trilogy Reading, The Village Florist and The museum of Berkshire aviation. The brand guidelines must be different to what already exists. The main goal of this real job is to create a high quality and memorable set of logos and guidelines that can be used on screen in both a desktop and mobile environment.

In the initial briefing meeting, the main considerations, final deliverables, and schedule were discussed.

The main considerations when designing the guidelines are that:

• The logos need to be scalable as they will be used primarily in a mobile environment
• The logos should be shown in different colour variations including black and white, reversed, and versions that work on both a dark background and light background.
• The guidelines should use Google fonts so that they can be easily accessed by all students

The final deliverables include:

1. A minimum of two logos for local businesses, including black and white, reversed and colour
2. Accompanying brand guidelines including typefaces and colour scheme

As these guidelines were needed in time for the beginning of the Part 1 project, the turnaround was very fast. The first client meeting was on the 7th of January, and the final deliverables were required by the 28th of January. The scheduled allowed for two feedback meetings in-between the initial briefing and final deadline.

 

Research and ideation

The research process began by identifying three key areas to explore:

• Research into each local business to learn more about what services or products are offered, in order to create a unique logo concept
• Research into the audience of each business, so that the logo is representative of this group
• Search for logos used in mobile environments, to identify which elements make the logos successfully scalable

The research process allowed an insight into the key to making successful logos for mobile applications. This included: avoiding using light strokes, small text, and overcomplicated designs. It also reminded the importance of testing the logos at an appropriate size to ensure that they are sufficiently scalable. Furthermore, it became apparent that the logos should be instantly recognizable, and therefore summarise the services or products offered by the business.

As a result of the research, as well as the fast turnaround, I initially decided to design guidelines for two businesses: The washbox and The village florist. However, after initial submission, I was asked to design a further set of guidelines for Trilogy.

 

Design development

The businesses that I designed guidelines for are:

• The village florist, a local florists that creates bespoke bouquets
• The washbox, a laundrette and dry cleaning service
• Trilogy Reading, a unisex hair salon

Before designing the logos in Adobe Illustrator, I began by hand-sketching some initial ideas for each business. However, due to the short turnaround, I very quickly moved to work digitally. The village florist creates bespoke hand-made bouquets, and so the concept for this logo was based around a hand-drawn style. Therefore, I scanned in my initial sketches, as well as illustrations found online, and created vectors using the image trace tool. From here, I was able to see which illustration worked best when scaled down to a size appropriate for mobile. For The Washbox logo, the concept was to combine the various services offered to create a clean logo. During the first feedback session, I presented a variety of options for these two businesses and gained guidance on which to pursue further.

Once making a decision on the final logos, the next stage was to choose appropriate typefaces and colour schemes. The typefaces chosen for The Village Florist, aimed to be sophisticated and delicate, representing the services and products offered by the business. Similarly, the chosen colours had the same aims, as well as avoiding being too powerful and overbearing. The aims for typeface and colour schemes for The Washbox, was to create fresh and clean branding.

As I was asked to design for Trilogy after the initial submission, the turnaround time for these guidelines was even more limited than the previous set. Similarly, there were no dedicated feedback sessions scheduled for these guidelines. Therefore, I began to work in Illustrator straight away. I began by image tracing images found on royalty free websites, as well as creating my own icons. The initial concept was based around the name trilogy, and so I created three icons representing the business and combined them into a logo. After creating this initial concept on illustrator, I emailed the client requesting feedback on this particular concept and whether to go ahead with this design, from here I was able to begin creating the rest of the guidelines. When researching other salon logos, it was apparent that the branding of many were arguably stereotypically feminine, especially with the use of colours. Therefore, as Trilogy is a unisex salon, I aimed to create a neutral colour palette that was not perceived to be branded towards a particular gender.

Overall, I believe I was successful in my aims when creating these logos and guidelines. However, If I had more time I would have liked to explore further concepts, as well as experiment with different typefaces that I am not familiar with.

 

Guidelines in use

Below shows a selection of screenshots of my guidelines being used in a variation of Part 1 web projects.

 

Feedback

After the guidelines had been distributed to the Part 1 students, a meeting took place in which they shared their feedback, both positive and negative.

The village florist

Overall the main criticism was surrounding the colour scheme, as there is a big contrast between the dark and light colours. The students stated that they would have liked a colour in between this range, as the paler colours were deemed difficult to use. However, overall the feedback about these guidelines was generally positive, especially with regards to the typefaces.

The washbox  

Some students found that the logo was not very ‘clean,’ for example the hanger line does not line up properly when the logo is enlarged. Likewise, when the logo is made into a vector, the hanger goes very thin, but the other elements do not. The feedback with regards to the colour scheme was mostly positive, however, some believed that the lighter colours were too light to use, and also that there was not much differentiation between the available colours. The typeface choices were well received.

Trilogy

The feedback for these guidelines was mixed; for example, some students liked the typeface choice, others did not. This feedback could be argued as subjective, as they did not report any issues with using the typefaces, only that they did not like them. Other feedback included that the colour scheme appears ‘masculine,’ and is very muted.

 

Reflection

Upon reflection, it is apparent that in the future colour schemes choice need to be considered more carefully, as the majority of negative feedback related to this element. This is especially the case with ensuring a large range of colours are available, and minimising the contrast between the options. Similarly, it is important to remember the intended use of these projects is for mobile, and ensure that this impacts the design decisions. This job has also allowed me to improve upon my Adobe Illustrator skills, as prior to this job they were fairly limited. However, this being said, the logos could be improved by being crafted in a neater manner, without any minor errors or misaligned elements.

Furthermore, the feedback from the Part 1s allowed me to gain insight into elements of this project that I can improve upon in the future, for example choice of colour schemes, and typefaces.  Likewise, the feedback taught me to carefully consider how the guidelines and logo will be used, and in what environment, which in this case was within a mobile application. Overall, the main skill that I have taken away from this job was the ability to create high quality guidelines whilst working towards a tight deadline.

 

 

Summary
Second Sight is a book publication of Margaret Atwood-inspired works done by Part 3 English Literature students of University of Reading.

I worked alongside Dr. Madeleine Davies – my client – and a student from the Margaret Atwood module, who both edited the students’ entries, while I designed, copyedited, and typeset the entirety of the book. Over 100 copies of the book were printed and published by the University in the first print run. It acted as a souvenir for the students involved, showcased on Open Days, and also sent to staff within the university, staff from other universities, Atwood critics, and Margaret Atwood herself.

A second print run was done due to popular demand, and by request from Margaret Atwood. This was funded by Dr Katja Strohfeldt, the Dean of the school, who was impressed with the whole project. 

 

Restated Brief
After meeting with the client, I was able to gain a better understanding as to what Madeleine’s expectations for this project was. I was also able to ask questions I had concerning the original brief that she provided when I was first assigned to the job. From this initial meeting, I wrote a clearer and more precise brief, detailing what outcomes were expected from this job. 

The restated brief for this project was to create a book featuring the collection of works done by the students in the ‘Margaret Atwood’ module in the English Literature course. This project included designing the cover, as well as designing and typesetting the inside spreads. I worked on this book from initial planning stage to print production, allowing me to learn in different areas and stages. We worked with 30 June 2018 as the rough deadline for the printed books to be delivered to the client. This was to ensure they would be ready for the book launch on 5 July 2018. 

The main aims and objectives of this project were:

• To design and create a book that showcases students’ literary works
• To make appropriate design decisions in presenting the literary works in a book form
• To make appropriate typographic decisions to fully convey the literature

The roles and responsibilities of my client and I were:

• Client – provide relevant text files, visual files and information to be put in/on the deliverables. Provide feedback on time, so that designers can have sufficient time to amend designs.
• Designer – design the entire book, including the cover, and interior pages. Also to make appropriate layout, and type-setting decisions. Provide print-ready files for client.

The final deliverable of this project were the print-ready PDF files, as well as the printed book.

This project had quite a fast turnaround time considering what the project was. Initially, the book was estimated to be around 70–80 pages. However, it ended up being 170 pages, which meant a much longer time was needed to spend on typesetting each page.

 

Research

I did some initial research before I started designing and typesetting.

• Research appropriate book cover designs for this type of book
• Research and gain a good understanding of the kinds of texts and literature that will be    featured in the book, and be able to make appropriate typographic decisions to convey that
• For the cover, research different typefaces, and typographical characteristics that portray the    mood and theme of book contents

The research that I did on these three bullet points all contributed to my design decisions.

 

Design
Cover
The artwork featured on the cover was decided straight after finalising the title of the book, as the client felt that it was the most appropriate piece to reflect the title. This illustration was done by one of the students in the ‘Margaret Atwood’ English Literature module. I decided to frame the artwork by placing it in the centre of the cover, allowing generous margin space, and space for the title and editors names. I thought that this use of space and layout would keep the cover clean and bring focus to the artwork and title, which was what the client wanted.

For the back cover, I wanted there to be a link with the front, so I framed the blurb with a border the same colour as the artwork. This helped create a stronger visual tie between both the front and back cover. This detail was well-received, as the client’s students had noticed it and were delighted to spot it.

Inside
It took quite a while to typeset everything due to the varying writing styles and structures of the English students. I found it a challenge to ensure consistency without altering too much that it changes the students’ writing styles. An example was that there were two pieces that were structured like a recipe. However, one piece used numbers and bullet points, whereas the other one did not. Other examples of pieces that had inconsistent stylisation were the pieces that were written as interviews. In the end, it was agreed between my client and I that we did not standardise said styles, and just kept them how it was written. This was because it was considered part of the English student’s writing personality, so it would be wrong to change it. However, I did tidy up the pieces through in-depth copyediting.

The book is split into different sections relating to the Margaret Atwood book that the students’ piece were related to or inspired by. To indicate the start of a new section, I set the Margaret Atwood book title on a page of its own, allowing for a clear break in between pages of text. Above each title, I also created an illustration of an eye. The open eye motif was to symbolise the start of something, and also links to the title, Second Sight. 

Image treatment
There were six photographs within the inside pages (excluding cover image). These were all printed in colour except one greyscale illustration.

 

Production

We established the paper stocks and paper weights that were going to be used in the early stages of the project. This allowed me to provide a spec quite quickly for the print job. The final spec was:

Inside pages
140mm x 205mm portrait
Cyclus Offset 90gsm
172pp
1/1 + 7pp in colour

Cover
Cyclus Offset 250gsm
4pp
4/0
Perfect bound

The final files were sent to press on 11 June 2018, with intentions of allowing sufficient time for the books to be printed and bound before delivery by 30 June.

 

Reflection
Overall, I found this to be an amazing experience, as it helped me develop my typography, copyediting, InDesign skills, print production knowledge, and time management. I learnt a lot from my supervisor, Eric Kindel, who taught me a lot on typographic details and copyediting. Towards the end of the project, we went through every page of the book to flag up any issues, and he was able to provide insightful feedback on them. This project has definitely made me appreciate typesetting and the attention to typographic details a lot more. 

One challenge that I faced whilst working on this was working to the ‘deadline’. The 30 June 2018 deadline was not originally set, as it was unclear as to when Madeleine and her student would be able to finish editing the work and prepare the copy for me to start typesetting. This led to a bit of a rush towards the end, as there was a rush to send the final files to press before the client’s funding expired. The reason for the rush was due to the fact that I was not notified in the beginning that the client’s funding had to be used by mid-June. When that was brought up to me, I had to rewrite the time schedule, so that the book was ready to go to press as soon as possible. This caused a reasonable amount of stress and added pressure, but I managed to get all the work done on time.

Asides from that, I thought this project was a success, and an amazing experience. My client was incredibly pleased with the outcome, and gave very positive remarks through email correspondence, as well as during the book launch. I was unfortunately unable to attend the book launch, but Eric and James were able to represent the Department of Typography & Graphic Communication. Below are some quotes taken from Madeleine to express her thoughts towards the book, and the success of the project:

“June, Atwood’s approval of the book is a real triumph. I wanted you to know this, to thank you again for all your amazing work, and also to let your supervisor and James know that the project has had such starry impact.”

“Colleagues in other unis are also asking for the book, and Coral Ann Howells (the star of Atwood studies) has listed the book in her ‘Cambridge Companion to Margaret Atwood’ bibliography.”

The book received a lot of praise and comments from various people. Margaret Atwood herself reached out. Professor Emerita Coral Ann Howells – a predominant critic on Atwood responded to the book as well.

Here are some more responses from people who have received and read the book.

“The volume looks fabulous … I’m really interested in the kind of student project that has produced such a professional looking text, and I suspect I’ll be coming back to you with questions about how it all worked.” – Dr Fiona Tolan, Liverpool John Moores

• shows that it has inspired others to want to do the same

“My CRI groups loved ‘Second Sight’ and several asked whether it is available in the library? Is it? Or could they buy a copy from you?” – Debbie Bark, UoR colleague

“I am so proud that the book is such a success” – Hannah Ralph, student

“There’s even been some sweet Facebook posts saying things such as ‘Margaret Atwood has seen my work!’” – Sophie Harrington, student

• shows the student contributors’ responses to the book

Furthermore, Second Sight was entered for the University Collaborative Awards for Teaching & Learning of 2018/19, and was the winner of the award.

 

Post-project
Though the deliverable has been handed over, Second Sight continues to open up opportunities of mini projects branching from the book. I was contacted by the client again to create poster-sized covers of Second Sight, which are to be printed and displayed in the corridors of the university buildings for publicity, and showcasing our achievements made through this project. 

Background

The client is an Art PHD student at the University of Reading who set out to create a ‘document’ that visually supported and demonstrated his findings on the artist Sol Hewitt. The aim was to create a document that served as an exhibition that demonstrated and mapped out methods that artists could use to create works (like framework/a guide). The document would feature different sections that demonstrated these methods with business logos and material, created by the client. The art works ranged between black and white and colour, as well as larger and smaller dimensions (so quite dynamic).

 

Brief

The brief was to design a document (precise dimensions and materials unspecified). This included organising and compiling the client’s own works alongside written work as well as visual examples of certain methods being put to use. The document was set to be printed on as opposed to digital outcomes and was meant to be adaptable as reading material as well as exhibitory.

Initially, the client and I were working and planning for an A4 format (this later changed to A3). The document was to be printed in colour and able to be put into a ring binder similar to traditional business design specs. The paper stock to be used was traditional business paper also often used in these design specs. Overall, the document needed to look ‘clean’ and minimal in design as it was important for the content to be followed as well as viewed.

 

Research

Due to the nature of this particular project, there wasn’t much research to be done aside from getting to know more about Sol Hewitt. Together, we were creating something new and original, so it wasn’t necessary to look for specific inspiration. I did however have a look through the department’s collection, where we have and keep old business specimens. This was useful as it gave me insight into what we were going for in an aesthetic sense.

 

Communication

Throughout this project, the client and I had regular meetings whenever we were both available for a couple of hours to discuss specific work that couldn’t be done over email. Throughout, the client and I communicated over email equally to meeting in real life. I would personally say that it was more effective to meet up in real life as it allowed for easier communication and direct alteration. I was the only Typography student on the project so that also allowed for a simpler and more straightforward stream of communication.

 

Schedule

The original deadline was not met as we were still working together past that date. This was somewhat predicted by the client as we got to this date. This was due to the fact that from the start of the project, the client made it clear that the document was very much a work in progress. A work in progress can’t really have a timestamp on it due to the fact that it is ever changing and thus, the deadline probably served merely as an estimated time of finishing.

 

Design

Similarly to the research process, the designing process wasn’t a method I was necessarily used to. The way we worked together went as follows; the client would prepare the work in the way that he wanted it to look, then sent it to me to ‘design’ it in a more professional manner (on InDesign by use of a grid system and correct margins etc.), finally it was sent back to the client for approval. This process of working applied to all sections of the proposed document. This method of working collaboratively was different from the work I was used to within the department where I was instead encouraged to come up with design solutions myself. Getting instructed to do specific things (with not as much personal input) although quite relaxing and straightforward wasn’t the most exciting experience in terms of designing. This has made it clear to me that I much prefer being in control and having more of an input into certain projects. However, due to the nature of this scheme and the job that I signed up for, this could be said to be a process that simply ‘comes with the job’ of being a designing within certain industries or practices.

An example of the working process can be seen in figure 1, where the pdf’s demonstrate original examples and work that was provided to me to design. The highlighted pdf showcases a finished design where all of the original prints were compressed to one A3 (the final decided format). This was the process for all sections of the document.

 

 

Feedback

Feedback received from the client throughout the project was constantly encouraging and uplifting. These were always positive exchanges that highlighted the fact that collaboration at this level can be effective as well as pleasant. Some minor feedback received usually was surrounding paper stock and which were more effective, similarly to dimensions of certain art works in relation to each other.

 

Conclusion

Moving forward, I hope that the work I helped the client produce was up to standard and that they can be proud of the way in which their art work looks when organised and designed at larger scale than the comfort of A4. I also hope that work continues to be done and that the work truly reflects the amount of thought that went/goes on ‘behind the scenes’.

 

 

This Real job is aim to redesign Environment Europe website into a clean, fresh new appearance to attract a wider audience and their existing participants to join their education program and consultancy service. The target audiences are the existing partnership companies and universities our client work with, people in the related environment industries and people who would like to know more and involved in environment area.

Deliverables

• Website
• Logo(temporary)

Communication

Through the first meeting with our client, our client wanted to keep all the contents from the original website to the new website as the original website is quite out of date. We did a sketch layout of how the website can be easier to navigate in the meeting. In the beginning, the client did not specify whether he wants a prototype or a website with coding in the real job brief. We restated the brief after meeting our client to discuss the output of the website and was approved by the real job team and our supervisor.

 

The output of this real job is to use a website host platform called ‘Tilda’ to design our client’s website with annual payment subscription to the website host company in order to assign the domain to their original website. We asked about the colour scheme and layout preference in the meeting as well. However, our client does not have a particular interest in mind which we did not have a clear direction of his design approach until we did our first layout draft on Tilda and sent it to him.

Our client was very keen on this project which he sent email regularly to check on the update of the website and we arrange three face-to-face meetings in total. Our last meeting in May was the most helpful. This is because our client did not send us any information about the use of images or infographics for us before which we had some difficulties in selecting which image or tables should be inserted in different sections. As we did not have permission to access their company’s Flickr or photography account either.

 

Design Process

Before the first meeting with our client, we had to know the structure of the existing website, we analyzed the existing website. After analysis, we found some problems on the original website.

 

One of the problems with the original website was that there were too many items on the menu bar. This made it difficult for users to navigate the website. Due to this reason, we made a decision that creating 5 large categories and putting the existing menus into sub-menu.

• Education (Educational program with Publication)
• Research & Consultancy (Projects)
• Art (our client’s fundraising website)
• Network (clients they worked with and the company members including volunteers)
• Take Action (Contact page)

 

 

On the previous landing page, the spacing between the paragraphs and paragraphs was too narrow, these made the web pages more cluttered and it difficult to read the contents. To solve this problem, we had set typesetting for this website.

Secondly, there was too much information on the landing page. In the redesigned website, we created 6 blocks that show each of the six projects, allowing users to find out more about the areas they are interested in.

After meeting our client recommended us to use Tilda to redesign the website. Tilda had a variety of design templates but they were limited in design. This was a challenge because it was limited in design and could not reflect client requirements such as the adjusting image size and adding social media icons. As our client wishes to edit the website in the future, we need to keep the design within Tilda design blocks. So that it will be easier to amend for our client.  Our client wants to fundraise through the Saatchi art, however, Tilda does not have Saatchi art gallery icon. So we decided to design the top part of the header with the zero block feature(free design layout by us which is not limited by Tilda)

 

 

 

 

Another challenge was to connect the Facebook account and twitter stream to the website on the news section. We overcame this challenge by using coding. This stated that Tilda is not capable in every feature to build a modern website. 

 

 

Logo

Although redesigning our client’s company logo was not in the real job brief. Our client asked us to redesign it. We did a mockup of the likely new appearance logo to our client according to his requirements. Our client can keep this as a reference in the future use and open a new real job to redesign their logo if needed.

 

Finalise

When we finalised our design after approval from our client, we will send them instruction on how to edit the website with specification on the type size of the website. So that the website will still be consistent.

 

Learning outcome

Time management is extremely vital in the real job project. We had planned out the time wisely for this project at the beginning. Due to the limitation of ‘Tilda’ that we had to wait for our client to pay for a subscription for us to access those design blocks to fulfil the layout and our client did not give us enough information about the diagram and photography use which slow down our progress. On the other hand, during February and March, both of us was busy with our coursework which we failed to find a balance between this real job and our course. The original deadline of this project was the 2nd of May and thankfully our client was understanding and he postponed this project to the end of May. Through this real job experience, we learnt that we should make a clearer and tide schedule between our course and the project and sufficient communication will contribute to the success of the project.

 

Restated Brief

The aim of this project was to rebrand a charity website, the charity (Signpost) being based in Essex with the aim of working with people who are struggling to find employment and training. This was my first real job project so I must admit that nerves got the best of me and that I didn’t start off as soon as I did, such as with organising a meeting with the client and supervisor, but when I did eventually get there it ended up being quite alright. My first supervisor meeting basically informed me of everything to do, there was a lot to remember going into this project so having this meeting really helped me make heads and tails of the whole process.

After that the next stage was to set up the client meeting and establish the brief, since the client was in Essex it would be more beneficial for everyone if meetings were organised via email and happened over Skype video calls. The client’s old website was hosted on wordpress, so this would be the program that the rebranding would be happening on, and it certainly wasn’t the greatest looking website ever made.

Research & concept

The next stage was to look for inspiration of other websites, Signpost already has its own branding however it was necessary to see what other charity websites were doing with their website and establish a similar look/structure through a moodboard. Websites such as ‘Rainbow Trust’, ‘Action for Children’, and even ‘Freebooks’ all have a consistent design style with appropriate use of the branding colours on the screen making the overall page more vibrant and friendly to look at over a plain white background.

This developed from a moodboard and into a branding proposal mainly because I began to add things such as proposed branding colours and typographic and designed treatments of what the new website design COULD look like, this helped the client visualise the sort of things that the new website could do and feel like once designed and he was pretty happy with it to say the least. There was a lot of back and forth on this document as a branding proposal turned out to be more complex than I thought, there were a lot of considerations to take into account such as making it clear that the type used for the document wasn’t actually part of the branding proposal. Another aspect which I’ve found interesting (and will never forget) was in how I showed the colours, Having them simply in a row doesn’t really say much to the client meaning that it would be more appropriate to make the boxes bigger or smaller depending on much of that colour would be used on the page (such as with green being the most used whilst gold and dark green being the least used).

Design Development & Deliverables

Next began the wireframing, the document for this was straightforward as this was basically a duplicate from the previous document, however the things shown on here were completely different to before. The design for this had to be compatible to show a sort of contents page for the wireframes, so that the client could easily go back and forth between pages from corrections (which was actually what happened, this was also useful for his board meetings), I didn’t go all out with the overall style of the wireframes as I mainly wanted to quickly show where certain elements could be placed. However for future reference it may have been more useful to have had some text prepared for this stage, as later on it was awkward building the page and then realising that the column that was meant to have a certain amount of text on the wireframes only had less than half intended, this was not such a huge issue along the road as I worked with the client in terms of telling him whether or not a page needed text and how much of it/what needed to be said along the lines of.

The next stage would be to actually start drafting the website on wordpress. Admittedly this project had originally began as a pair, however there were problems which caused progress on this project to be halted, from this it was in the end sorted out and drafting of the website could begin

WordPress drafting

This was my first time using wordpress therefore going into it was very overwhelming, the UI seemed very complex to grasp and a lot of the features are there without any explanation as to what it does (leaving the only solution to basically look for online tutorials). However I did find that wordpress’s way of building a website was very groggy, what’s meant by that is that the way in which images and text work on here is very reminiscent to how images and text works on Microsoft Word. This obviously could not do so I delved deeper into what could be done about this issue, I was more concerned as to how the client would be able to work on the website and update it in the future after I’m gone (especially if he or anyone in the charity didn’t know how to code) so anything to make it easier for him would make me happy.

In my research I found that wordpress ran on themes and plugins that were basically like having extensions with special functions built in added onto the website, to explain in brief a number of plugins I used added:

• Image carousel for the home page.
• Contact form, although this is off the client can simply turn this on and it will appear on the contact page.
• Optimised search engine, and so on.

The number one plugin that resolved the problem of maintaining the website for the future was definitely the ‘Elementor’ plugin. It eliminated the tedious use of wordpress’s default way of adding stuff to the page by simply drag-and-dropping elements onto the page, there is a row based grid at work but that’s okay because the website was built using this one plugin which made the whole process fast and efficient especially when compared to coding which would’ve taken not even 5x as long.

There was a lot of back and forth with the client in terms of what was needed on the website and what could be added on/changed next, this was a very lengthy process which after discussing this with my supervisor it basically came down to what was necessary on the website as it had been in a launch-able state for quite some time. However this does not mean that I had to make changes all based on the client’s wishes, a lot of what he said came from members of the board and also funders of the charity which made the changes in a way necessary to be made in order for the website to be able to launch. In the end we sat down together and went through the content on the website one last time before it was finally in a launch-able state.

Reflection

I must confess, this project took a lot longer than it should have taken. There were a lot of problematic factors that occurred throughout sure, but I blamed mostly my inexperience with time management for the client and also pushing people to do things that need to get done. With this project I feel like I’ve gotten confident with talking to clients about projects and making sure that they basically stay on task as well as making sure that I work efficiently by being more ruthless with my time early on so that I have more time to work on things in the future.

Another interesting aspect I’ve learned is about wordpress and appreciating the things that it is able to do, from my understanding it is very good at making posts (such as blog posts or articles) especially since the typo network is on wordpress. Mentioning that, the client did have an idea of having a sort of blog posts for each of the charity’s centres, even though I couldn’t do this I let him know that through wordpress it was certainly possible to do in the future.