‘The All-New Range Rover’ – Final Designs for my FMP

Well, with the end of the FMP now reached, although I stand have to actually submit the project, here are my Final Designs for the Range Rover re-branding project.

‘The All-New Range Rover’ – Brochure:

I have included some images from inside the brochure, but because of the large turn-in, I didn’t want to open it too far obviously. I’ll include screenshots from all of The All-New Range Rover PDF brochure later on in this blog post.

‘The All-New Range Rover’ – Leaflet:

‘The All-New Range Rover’ – iPhone 5 (iOS 6) App Design:

These are the annotated pages from the PDF file I will submit for the project.

FMP: Evaluation

Well, for this blog post I shall be evaluating and reflecting on my Final Major Project for my HND 2 Graphic Design course before concluding it by submitting it.

The Designs:

What are the strengths of the designs I have created? Why is this the case?

I would say that all of my designs are very strong and highlight what could be achieved with the rebranding of the Range Rover promotional items. They follow a consistent theme, an example being the monochromatic cover images that direct the eye onto the car. The designs also look professional and I have received very pleasing feedback on them.

Brochure: I was delighted with how this design turned out. The printing courtesy of Blurb, really bought out the excellent photography from the Land Rover press pack and the colours are represented as they should be.

My design really shows the Land Rover brand off well, and highlights the premium nature of the Range Rover, and how it has moved into a new audience sector. I was also really pleased with the size of the brochure I chose, as it is not too large to cause the audience to have to scan across the pages when reading, everything is conveniently placed.

I showed people the final result at college, and was very pleased with how the design was received. I got all positive feedback with people astonished at how professional it looks. People have said that they would not know if someone gave them my design and said it was the actual Range Rover brochure, which makes me very proud indeed.

Leaflet: The main strength here was that it continued the identity across from the brochure, and is also of a premium finish, reflecting the Range Rover well. I am pleased with the information on there, it entices the audience to follow Land Rover for further news by giving them the details they need, but is uncluttered, allowing for the information to make an impact rather than get lost by being in a long passage of text.

App Design: Using another medium of design helps to show how flexible my design is, working for both print and digital. Having a well designed intuitive app that the audience would appreciate is very handy to have with the rise in smartphone usage. A large sector of the audience now demand to interact with products using apps such as the one I have designed, and I feel I have met those demands.

What are the weaknesses of the designs I have created? Why is this the case and how could I improve it if I did this project again? 

Brochure: I think the only small thing I would change with the brochure I would have made would be to have found a way of better organising the vector illustrations on the ‘Key Data’ spread. I had to make a compromise there, and I think a better solution could have been found if I had more time to have thought about it.

Leaflet: Printing was the only thing here that was less than ideal. I had originally planned to use a certain paper stock, but when this failed, I used a back-up option I had, which produces a perfect print quality, but was only one-sided, so I had to spray-mount the two sides together, making it thicker than it would be in reality. Again, with more time, I could have sourced different paper, although I did have an sample order placed through college for some paper that did not get processed due to an admin error, and I do think a suitable paper type may have been in there.

App Design: With more time, I would have been interested in seeing how the app could have functioned when the phone was in landscape mode, as well as creating a version of the design for a tablet. I could have also explored an Android app potentially, but I felt that due to the different style, that could lead to a whole project itself.

My working practice:

How was my time keeping been throughout this project? When did I work best?

I think my time keeping has been good with this project, especially considering I have never undertaken a project of this magnitude before. I have had to juggle this project more than any other due to time considerations regarding the printing of the brochure. Every deadline has been met along the way, most with minimal hassle.

This project has seen me work far more independently than before, allowing me to work productively at home for a lot of the project. I found going into college was only really needed for feedback and to print my leaflets. Other than that, it was more of a distraction than it has ever been before.

Was my brief realistic? Did I ever think I had asked too little or much of myself?

Well, I would say my brief was realistic as I have managed to achieve everything I set out. This was helped by setting a reasonable open brief, as this could alter according to my research to ensure that my project was relevant to the audience of the Range Rover.

I do however think I asked way too much of myself for this project, and should have done one less element, and focused on the others more in-depth. I didn’t realise how long the brochure would take to design, and with it needing to be sent off earlier than I expected for printing, it put unnecessary pressure on me.

How was my research useful to the project and/or myself?

Research was incredibly useful, as it allowed me to tailor my designs to what was required, as well as understand who I was designing for. The Range Rover audience is very varied and I wanted to create designs that could cater for everyone. Researching the competition allowed me to assess the standards I needed to meet and/or exceed.

How did I experiment and create ideas for this project? Was this effective?

The first forms of experimenting came through sketches, mind-maps and lists. However, I soon founded I wanted more realistic forms of seeing my ideas come to life so soon started designing on-screen as such and experimenting there. It set me on a good path which I continued throughout. Overall though, evolution was the key factor here, as once I established the initial designs and was confident they would work, then I spent most of my time on refining everything so it was perfect. If I had a idea, then I would just try it out and see where it took the design.

What parts of the project did I enjoy? Why was this the case?

I have to say I have really enjoyed this project, as it focused on one of my favourite interests and is something I would like to specialise in as a designer. This really gave me the drive to push on no matter what and create some great designs.

What parts of the project did I not enjoy? Why was this the case?

Dealing with the time pressures, I found I had to work harder than expected for the whole duration of the project, and I had to make some snap decisions that I wish I could have taken time on. However, this is part of being a graphic designer, and with more experience, this issue will reduce.

How did you make sure feedback gained was effective?

By asking people something I knew they would be able to answer. For example, when collecting feedback from audience members, it was very different to that of asking other students in the graphics group, or even tutors. So I would ask the audience members whether they felt the information was clear, understandable, did the aesthetic match what they thought of the Range Rover etc. while I asked the tutors and other members of the graphics group more about design specifics.

As this is the final project of the HND course, what thoughts and targets do you have that can be carried over to the BA course?

I would say this project has been my strongest yet, and finally shown to me I can design effective automotive material. I have always wanted to design professional brochures for a car manufacturer, and have finally achieved this ambition. I have really enjoyed being able to work on a brief I created as well.

It has also been incredibly satisfying to see the positive reactions to my designs, and it helps to give me confidence in my abilities.

Looking forward to next year, I will be aiming to build upon the momentum gained this year and advance my design skills further. Over the summer I will be most likely taking the chance to create a couple of independent portfolio pieces, as well as learning new skills, as I have found the more I know, the more freedom I have when designing, which results in a better end design that is more original in concept and more expressive.

I would also really like to progress my blog over the course of the next 12 months, to make it look more ‘designed’. I have also got some ideas as to how I may present work on the blog for the BA in a way that is easier to follow…

FMP: Realising the app design

For the last of the three blog posts focusing on outlining the key processes used to create my FMP designs, I turn my attention to the app design.

I quickly determined that the best way forward was to use Adobe Photoshop, as its flexibility makes it possible to produce realistic designs. I also used Adobe Illustrator to make all of the icons used throughout the app design, as Illustrator is easily the best program when it comes to creating vector illustrations.

Downloading a iPhone GUI template:

I quickly realised that the task of creating a base iPhone interface from scratch would be an enormous task, one that would be simply above me for this project. So I searched for a suitable iPhone 5 PSD template file that could not only house my design, but allow me to edit it to fit it. I came across an excellent free example from Teehan+Lax, which can be accessed on their website here. I’ve mentioned it before, but I’ll say it again, it’s really worth it.

Illustrator:

Creating the vector icons:

Knowing that I needed some icons for the app design to fit in with the iOS GUI, I made them in Illustrator. Making them in a flat style allows for layer styles to be added on in Photoshop to really fit in. I started by opening a new Illustrator document and making part of the background black for the ‘tab bar’ icons.

‘Tab Bar’ icons: 

I made them using the Shape Tools and Pen Tool. The main time was taken here with making them look suitable for their intended purpose, rather than using highly complex techniques to make them. I wanted to design them against a black background as this is closer to the eventual background I knew I would be using them on.

Home icon

Exterior icons

Interior icons

I then copied and pasted them into Photoshop as Smart Objects, and copied and pasted the layer styles attached to the old tab bar icons.

Exterior icons

Interior icons

Rotate Tool: I did use this for the wheel icon for the ‘Interior’ tab bar as once I had created one of the spokes, I wanted to copy it to make the other four.

To do this I selected the spoke, chose the Rotate Tool, and, while pressing the alt/option key, clicked in the centre of the icon. This brings up a dialog box where I entered 360/5, as that is the positioning I wanted, before clicking Copy. Then I could press Cmd + D until the pattern was completed.

‘App function’ Icons:

The purpose of these icons is to appear mainly on the ‘Next Steps’ screen of my app design to direct users as to what they want to do.

These were made in pretty much the same way as the icons above, using a combination of Shape Tools and the Pen Tool to create shapes, which I then filled with a dark grey.

Gradient Tool: For the background I used the Rounded Rectangle Tool to make the main shape, but then selected the Gradient Fill instead of the standard Fill. From there I selected the Gradient palette, by going to Window > Gradient, and choosing the values you can see below:

Left to Right: New Configuration, Edit Configuration, Request Brochure, Save to Garage

Copying and Pasting into Illustrator: For this it was just a case of selecting what I wanted to be copied using the Selection Tool, and copying it (Cmd + C) before pasting it into the Photoshop document (Cmd + V) as a Smart Object to allow for editing to be carried out.

Photoshop:

Creating the Exterior Swatches: To save repetition, I will not cover the whole process of making these again, as I covered making them here.

The difference from when I displayed them in the brochure, is that they are much larger and displayed in a circular style. The only thing I did was to add a Stroke for the Layer Styles menu to show whether a swatch was selected or not.

Creating the Wheels: I covered the main process in a previous blog post, which can be read here, as I used these for the brochure, with one difference in that I selected the Path in the Paths Palette, right-clicked it, and chose ‘Make Selection‘. I chose to set the Feather Radius to 5 pixels. I then copied that into the main Photoshop file.

Creating the option image for the ‘Exterior – Roof’ screen: This was a challenge as I found the perfect image I needed (high quality, good composition, with the sunroof I needed), but the colour was wrong, the background was wrong, and it did not have a black contrast roof.

So I started with this image:

I decided the best way would be to plug in my graphics tablet, add a new layer to the image, select the Brush Tool, choose the pale grey of the background I had been using,  and brushed it over the background. I could have used the Magic Wand tool if there was enough of a contrast, but car and background were too similar. I found setting the brush tool so it had a hardness value of 60% worked best, as it is soft enough to blend with the edge of the car, yet harsh enough to create a solid boundary. I needed to take my time with little details, like around the door handles and mirrors.

I then added another layer, set the blend mode (which can be found at the top of the Layers Palette) to Multiply, chose the shade of orange I needed and brushed over the bodywork. Because the car in the image was silver, it picked up the colour perfectly. This took a while, and was really fiddly work, especially with the Range Rover lettering on the bonnet, but in the end I was really pleased with the result.

The hardest part was to change the roof. I wanted to add a black contrast roof. I really struggled with getting this to look realistic, and it took a lot of experimentation, but I achieved it by creating a new layer, setting the brush to black, and brushing over the roof. I lowered the opacity temporarily so I could see what I was doing.

I wasn’t impressed still with the end result, as even on lower opacities it was too dark at the back to pick out the shapes that make up the roof. To fix this, I bought up the Layer Styles menu, added a Gradient Overlay, set the blending mode to Hard Light, and chose the settings you can see in the image below.

The final step was to go back to the Layers Palette, and instead of altering the Opacity, I reduced the Fill box to 65%. I now feel confident the end result is realistic.

Creating the Figured Massacar icon: For this icon, I had to find an online free image of it. I was surprised to find an image of it actually, as I had never come across this type of veneer before in a car. However, I wasn’t massively impressed with the colour in the image, although the wood grain looked excellent. Here’s the starting image:

I determined it wasn’t saturated enough, and needed a slight hue adjustment. So I added an Adjustment Layer from the Layers Palette and after some experimentation, chose the settings you can see below, as well as the final result.

I then placed the file into the main Photoshop file and added a Stroke from the Layer Styles menu to match the other swatches throughout the app design.

Creating the Shadow Walnut icon: Again, I had to find an image for this, and edit it to match my requirements. I placed it into the Photoshop file, added a Stroke from the Layer Styles menu, as well as a Color Overlay, which I set to black, but I changed the Blend Mode to Soft Light, as this just darkened the image slightly.

Creating the Grand Black Lacquer icon: This was one icon I could make from scratch. To do so, I made a black square in the main Photoshop file, added a Stroke from the Layer Styles menu, as well as a Gradient Overlay that would be used to show the reflective nature of the veneer. I’ve shown the settings below as well as the final result:

Creating the Leather Headliner icons: To start with, I realised I need to find a leather texture. Thankfully there are many free examples out there on the web.

This done, I accessed the Layers Palette, and added an Adjustment Layer (the circular icon can be found in the middle at the base of the palette) for Hue/Saturation. I then decreased the Saturation to -100 to leave me with the desired image.

Placing this into the main Photoshop file allowed me to add some Layer Styles. Obviously I added a Stroke to match the other swatches and a Color Overlay, so it could match the colours required.

Creating the cloth headliner icons: To start with, I created squares and applied the same layer styles as I did with the leather headlining icons above. However, I added a Pattern Overlay with the settings you can see below.

Gradient Overlay: I used it throughout the app designs, but the most visible example was for the toggle switches on the ‘Settings’ page, where I wanted to add a metal texture to make it more realistic and appear more premium.

To do this I ticked the Gradient Overlay box and applied the settings you can see in the image below. The important thing was to set the Gradient to Angle.

Layer Mask: With my app design I had a lot of images to place in, and not knowing the eventual size means that I would want to try lots of different sizes.

This is where the Layer Mask tool was so useful. I could place an image into the Photoshop file, choose the Rectangular Marquee Tool, draw a box and then click the icon at the bottom of the Layers Palette, which snaps the image to the boundary box.

Creating the exterior background images: This was a really useful technique, as I was able to take the screenshots I had taken from the Land Rover online configuration, and remove the white background using a clipping path so that it fitted with my pale grey background. I was pleased to be able to keep the shadow under the car, which helped to make it look more three-dimensional when placed into the app design.

Using the technique my tutor taught me with a slight alteration, here is the process:

1] Make sure the layer with the car on is selected in the Layers Palette.

2] Using the Magic Wand tool, click on an area of the background and press the backspace button to delete it . I kept doing this until I had removed it all. (Below is a layer filled with light grey hence why the image background has gone to grey once removed.)

3] In the Layers Palette, click the Paths button to access the Paths palette. Click the drop-down icon in the top-right corner and select ‘Make Work Path’. In the dialog box, enter 0.5 for the Tolerance.

4] Double-click on the path in the Paths palette. Enter a name, and click ‘Save‘.

5] To then place this into my main Photoshop file, I right-clicked the path in the Paths palette and chose ‘Make Selection‘. This bought up a dialog box where I entered the value ’5′ for the Feather Radius.

6] I then copied the selection into the main Photoshop document.

FMP: Persona Testing

For this blog post, I want to explore the testing phase I carried out for personas. I have placed the feedback I gained elsewhere from audience members, tutors and fellow students alike, but I felt testing my designs using personas would be best done in a separate section.

My designs are finished as I am writing this, but I will talk about some of the decisions made along the way based on this testing.

Below are the personas I have created for testing based upon the conclusion to my research regarding audience demographics:

Persona 1 – ‘Money no-object’

• A ‘money no-object’ customer.
• A buyer of many luxury premium vehicles from Bentley’s and Rolls Royce’s to Lamborghini’s and Porsche’s.
• Has a large family.
• The family has an active lifestyle.
• Looking for a Range Rover as they need a practical family vehicle to transport their family around for their active lifestyle, whether that be to get to ski resorts in Europe, towing a horsebox, or covering rough car parks and lanes.
• Will not accept any compromise on luxury.

Persona 2 – ‘Young, affluent show-offs’:

• This couple are young.
• They are flash, assertive and affluent.
• They see the Range Rover brand that is being built as a modern status symbol.
• Personalisation is key, and they want their car to stand out.
• The car is only to be used in town, so the high seating position, good visibility and parking aid gadgets appeal.
• Love all things gadget based so the more equipment the better.

Persona 3 – ‘The Land Rover veteran’: 

• A veteran of the Land Rover brand, having owned many vehicles.
• They are still spooked by reliability concerns.
• They can only afford one car, and keep it for many years, so it has to be right.
• The car will go off-road, not often, but it is appreciated when it does by the owner.
• The car will mainly be used on long distance business trips, where luxury and refinement is key.
• However, they also drive a fair bit on twisty, country roads so require smooth performance and handling.

While thinking about the design, I always had in my mind the question of whether it was meeting the requirements of the personas I have created, based upon my knowledge of the audience demographic.

Brochure:

Persona 1: With the money no-object attitude they are definitely looking for luxury. With the brochure I have designed reflecting the Range Rover in print form, I am confident the persona will be impressed the brochure matches what they are used to, and this gives them confidence the ownership experience will be just as impressive.

With the photographs, many focusing on the car in a very active way, whether off-roading in a rocky valley or traversing a desert, as well as an image for example of the Range Rover towing a large caravan, it really sells the capability of the Range Rover to the persona, it won’t let them down, or stop them enjoying days out and holidays.

They are quite interested in the facts and figures for this vehicle, after all, they are quite used to performance, and coming from a top of the range saloon, don’t want to lose performance or handling against the saloon. They are quickly reassured by the fact boxes and very clear information pages that allows them to understand the Range Rover will match their expectations.

Persona 2: This flash, affluent couple want really top of the range things and the brochure helps to convince them the Range Rover is exactly that. They are taken in immediately by the cover, as the monochromatic, lifestyle based images spring up the same connotations as that of their fashion and cosmetic adverts they are into.

They’re not interested in reading long passages of text, so the minimal text gives just the right impression, so they can drink in the Range Rover’s qualities quickly. They like the city images, as it strikes a chord with their environment. They can see just how many convenience gadgets the Range Rover has, from the Adaptive Cruise Control to the Park Assist.

They certainly love the personalisation pages though, as the wide selection of good quality exterior swatches, make them wonder as to how they’re ever going to choose! This continues throughout the rest of the exterior personalisation into the interior section, and at the end, they really feel like they want a Range Rover.

Persona 3: The Land Rover veteran spends a long time thinking about what car is right for them. After all, it’s a big investment, and they want/need it to be the right decision. They intently read the brochure and mull over everything from how the car looks to the options they could specify. The brochure is designed so although the information is minimal, it is very relevant, each section ticking off a box in the persona’s mind.

The persona is also concerned, after all, this is a very different car to the one they grew up with, and still wonders if they would be better off with the old version. However, seeing the spread showing how the Range Rover’s DNA and heritage has been enhanced is pleasing to them. Seeing the realistic photography, especially of the interior swings their mindset into seeing that this car really is a big improvement.

They are impressed with the quality of the brochure, and feel if that much effort has been taken with the brochure, it is reassuring for the vehicle. They feel the Land Rover brand is certainly in the best health it has ever been, after all they’ve owned many a Land Rover and Range Rover in their time, and not all of them have been good, some because of inherent reliability issues. They are confident upon seeing the spread on ‘Realising a Creative Vision’ that the brand is progressing.

Leaflet:

Persona 1: They’re reading a premium automotive magazine, when they see the Range Rover leaflet. The qualities the leaflet has, from the monochromatic style to the reassured stance the persona is so used to hearing from the car brands he deals with makes them very interested in checking out a new Range Rover. It is the initial thought process that makes them think they could have a Range Rover instead of the large saloon.

Persona 2: The style is the immediate engaging factor here. Of course they have a knowledge of what the Range Rover is, but seeing the monochromatic images really reminds them of fashion and cosmetic adverts where this style is common. The association process continues, creating the desire and interest and from there the seed is lodged in their minds that the Range Rover could be the car they want.

Persona 3: They are interested in connecting with Land Rover further, and want to keep up with further news and offers from them. The social media icons are eye-catching in the footer of the leaflet, and he will follow up on them, probably acting upon a potential deal that can sweeten the deal further when he buys the car.

The persona is not instantly sold by the marketing talk, but their interest has been raised enough to consider getting a brochure. After all, if they are serious about buying this car, then they will want to take their time in making sure it is the right decision.

App Design:

Persona 1: This persona is up on their technology, they own an iPhone, as do most of their family, and see it as being a great way of seeing how the car looks. It also gives them the best indicator of how they want their car specified, so it saves time when they order the car at a dealership. The info panels are especially welcome, as it answers questions they would have to ask the dealer otherwise.

As for the style, they are used to the iOS way of doing this, so instantly settle in with the app. They see the comparison in design to the brochure, and that builds up an extra level of intuitiveness as well.

Persona 2: This couple are very technologically savvy, so it is just second nature to download the app. They are happy using the interface, the navigation elements are very familiar to them. They also love the fact that they can actually see what the car looks like on the app, after all the brochure raised their interest, but they want to see the exterior swatches on an interactive car that they can move around and see from different angles.

Persona 3: The persona here is not overly technologically savvy, but they have an iPhone and they know enough to use it properly. So therefore it is quite a relief it is easy to use, and makes their life much easier. They are interested in specifying the vehicle down to the options and accessories, and from there, this helps in the process to convince them that buying a Range Rover will be the correct decision.

Conclusion: I am very glad I did my audience research properly, as putting myself into the position of these three personas certainly made me view the designs in a different light, and I would suddenly stop during the development phase and think ‘Hang on, is this really the right decision?’ I certainly think it has made my designs much better.

FMP: Realising the leaflet

For the second out of three blog posts, I will outline the key processes used to create one of my designs for the FMP. Here I shall focus on the leaflet. The processes are duplicated from the last post and changed slightly to be relevant.

To create the leaflet I could use either Illustrator, InDesign or Photoshop, as this is a rather simple design to create and the facilities I need are in all the programs. For ease of use I used Adobe Illustrator CS5.1 and Adobe Photoshop CS5.1 for the images.

Typography: 

Obviously, as with the brochure I wanted the typography to be correct to aid aesthetics and ensure legibility.

Character Palette: A very helpful tool to have as many functions can be controlled. It can be accessed by going to Window > Type > Character (or Cmd + T) I shall list below the ones I used:

Kerning: Used to vary the spacing between individual characters, this came in handy for the large text on the front cover, where I was able to fine-tune the spacing so that ‘The All-New’ and ‘Range Rover’ lined up to give the design some symmetry.

Tracking: This was the tool I used the most. Tracking alters the distance between all of the selected characters. I found the tracking for the body copy to be too cramped at the default 0 value, so I selected +50 to allow for some extra spacing.

For some of the larger text such as titles, I increased the tracking to +100 or +150 if I wanted to emphasise the negative space between the characters, giving each one more definition, and to slightly slow down the reading of the title. While this works well in general, it can upset some of the spacing, which is where the kerning comes in useful.

Paragraph Palette: 

This was another helpful tool that allowed me to set the longer passages of text in a suitable way. To access it, go to Window > Type > Paragraph (or Cmd + alt + T) I shall go through what I used from this below:

Alignment: I chose to Left Align my text to ensure that the spacing between each word was equal, which I would not be able to achieve if I went for the Justify with last line aligned left option. Also choosing Left Align matches what I designed with the brochure to create a consistent identity.

Hyphenation: As I do for every text box, I turned this off, as it does not make for a sensibly readable paragraph if words are hyphenated.

Images: 

I was very lucky with the images from the Land Rover press pack being so fantastic to work with, being of a high resolution and large enough to allow for flexibility in my designs. For the majority of images all that was needed to was to place them in the document (File > Place or Cmd + D) and make sure that the composition within my spread was suitable.

The idea I had for the final cover images was that they would look stunning in black and white, especially the front cover image I had in mind, where the sand was very bright, so detracted from the vehicle.

I’m going to take that image I used for the front cover image as an example to show the processes I used. Here’s how it originally looks:

Therefore I made a copy of the file, opened it in Photoshop, and went to Image > Adjustments > Black and White…. This brings up a dialog box where the values of the colours can be altered. Sliding them one way or the other controls how the final image looks. The image below shows them in the ‘Default’ setting.

After changing the sliders, where I mainly focused on decreasing the Reds and Yellows, here is the final result:

I repeated this process for the image I used for the back cover as well.

 

FMP: Realising the Brochure

For the three sections of my FMP (brochure, leaflet, app design) I will write up a blog post explaining some of the key processes involved in creating each design, as it would take too long to explain every single technique.

For the brochure I used Adobe InDesign CS5.5 in combination with the Blurb Booklet
Plug-in, which I talked about here. This provides margins for the brochure and was very easy to work with in Indesign while I was creating the brochure.

To prepare other aspects of the brochure such as the vector illustrations and images, I also used Adobe Illustrator CS5.1 and Adobe Photoshop CS5.1.

Typography: 

As typography was a major part of the brochure, I used many techniques to ensure it looked just right.

Character Palette: A very helpful tool to have as many functions can be controlled. It can be accessed by going to Window > Type & Tables > Character (or Cmd + T) I shall list below the ones I used:

Kerning: Used to vary the spacing between individual characters, this came in handy for the page numbers, where I was able to fine-tune the spacing. I also used this for the larger text if I felt there was an individual issue.

Tracking: This was the tool I used the most. Tracking alters the distance between all of the selected characters. I found the tracking for the body copy to be too cramped at the default 0 value, so I selected +50 to allow for some extra spacing.

For some of the larger text such as titles, I increased the tracking to +100 or +150 if I wanted to emphasise the negative space between the characters, giving each one more definition, and to slightly slow down the reading of the title. While this works well in general, it can upset some of the spacing, which is where the kerning comes in useful.

Leading: For the majority of the brochure design, especially the body copy, I did not need to alter the leading as the Auto setting was suitable. However, for the infographic boxes I used as a main design feature, I had two different text sizes, 21pt for the stand-out figure, and 9pt for the rest of the text. Therefore I set a value of 21pt for the leading for the top line of small text to give the adequate spacing I needed.

Subscript: For the CO2 (why is there no option of a Subscript 2 in the WordPress symbols box?) text on the Engines spread I needed a subscript 2 character. To do this I selected the figure and pressed the Subscript icon on the Control Bar. This I felt dropped the character too low so I was able to go into the Character Palette, and alter the distance it dropped using the Baseline Shift tool. I set it to nudge it up 2pt.

Paragraph Palette: 

This was another helpful tool that allowed me to set the longer passages of text in a suitable way. To access it, go to Window > Type & Tables > Paragraph (or Cmd + alt + T) I shall go through what I used from this below:

Alignment: I chose to Left Align my text to ensure that the spacing between each word was equal, which I would not be able to achieve if I went for the Justify with last line aligned left option.

Hyphenation: As I do for every text box, I turned this off, as it does not make for a sensibly readable paragraph if words are hyphenated.

Align to Baseline Grid: I used this for the Standard Features spread as I needed all the columns of text to align perfectly. It made a big difference to the appearance of the spread, and made the process of aligning much quicker. For the other spreads, I could not position text as flexibly as I would like, so I didn’t use it, taking extra care to ensure lines of text lined up.

Indents: Again, a technique I used just for the Standard Features spread. Because I was using thin columns, which I had set to the margins on my document, I needed another way of evenly setting the text. To achieve this, I selected the text, and set it with a Left Indent and Right Indent, both being 2pt.

Other Typography:

Glyphs: To ensure I used the correct characters in a couple of places in the brochure I needed to access the Glyphs Palette, which can be accessed if not present on the screen by going to Window > Type & Tables > Glyphs. This was needed for the ellipses used in a few places, as well as the degree signs used on the Key Data page.

Images: I was very lucky with the images from the Land Rover press pack being so fantastic to work with, being of a high resolution and large enough to allow for flexibility in my designs. For the majority of images all that was needed to was to place them in the document (File > Place or Cmd + D) and make sure that the composition within my spread was suitable.

Interior Images: These needed a little bit of work to ensure that they were right for the brochure. Firstly I downloaded them from the PDF brochure, which meant the size was only 72dpi. Thankfully the size of them meant I could convert them to 300dpi by going to Image > Image Size and changing the Resolution.

To do this, I opened the image in Photoshop and went to Image > Image Size. From there I was able to change the Resolution to 300dpi, press OK to confirm the changes, and save the image. I then went to Image > Adjustments > Brightness/Contrast… and changed the Brightness and Contrast to around +20 depending on the image.

I then saved the image as a JPG and placed it into the InDesign document as usual.

Cover Images: The idea I had for the final cover images was that they would look stunning in black and white, especially the front cover image I had in mind, where the sand was very bright, so detracted from the vehicle.

I’m going to take that image I used for the front cover image as an example to show the processes I used. Here’s how it originally looks:

Therefore I made a copy of the file, opened it in Photoshop, and went to Image > Adjustments > Black and White…. This brings up a dialog box where the values of the colours can be altered. Sliding them one way or the other controls how the final image looks. The image below shows them in the ‘Default’ setting.

After changing the sliders, where I mainly focused on decreasing the Reds and Yellows, here is the final result:

I repeated this process for the image I used for the back cover as well.

Other:

‘Standard’ Exterior Colour Swatches: For these I wanted something different, and a three-dimensional appearing shape as well so I could realistically show the changes in colour according to light.

I started with the side vector drawing I had made in Illustrator and then traced around the edges using the Pen Tool. From there I had a flat, base shape that I could do something with.

I then copied the image into a new Photoshop document, with the Resolution set to 300dpi. I made sure the background was a pale grey to match that of the background for the brochure. I pasted it as a Smart Object to allow for the addition of Layer Styles.

To make the image appear three-dimensional, I double clicked on the layer in the Palettes menu, which brings up the Layer Styles box and ticked the Bevel and Emboss box, the settings of which you can see below.

This provided me with this result. To then add a colour I could have just used the Color Overlay function, but to get the result I wanted with the differing light level I chose to select a Gradient Overlay from the Layer Styles menu, of which the settings I went for you can see below.

That was for the Fuji White swatch, which I’m aware doesn’t show the full ability of the colour changing process, so below is the Barossa swatch, a deep purple in the light, but almost black when the light is not shining on it.

As I found when I was did the test prints, the grey background of the swatches did not match that of the brochure, even though I used the same colour value… perhaps it was a colour profile issue… anyway it meant I needed to remove the background to place it into the InDesign document.

To do this, my tutor taught me the following process, which I shall detail below:

1] Make sure the layer with the car on is selected in the Layers Palette.

2] Using the Magic Wand tool, click on the car. This should select the car as you will see the ‘marching ants’ around it.

3] In the Layers Palette, click the Paths button to access the Paths palette. Click the drop-down icon in the top-right corner and select ‘Make Work Path’. In the dialog box, enter 0.5 for the Tolerance.

4] Double-click on the path in the Paths palette. Enter a name if you wish, and click ‘Save‘.

5] Go to File > Save As (Cmd + Shift + S) and choose Photoshop EPS from the drop-down menu. Click Save.

Then it is just a case of placing it into the InDesign document in the usual way. (File > Place or Cmd + D)

‘Autobiography’ + ‘Chromaflair’ Exterior Colour Swatches: These were much simpler to create than the ‘Standard’ colour swatches. Again, I started by opening a Photoshop document, with the resolution set to 300dpi, ensuring the document was a square, with a white background.

It was then a case of double-clicking the layer in the Layers Palette to bring up the Layer Styles menu, and selecting the Gradient Overlay. From there I could create a wide variety of gradients to replicate the colours shown in the brochure. Below I have shown the settings I used for two colours, ‘Bardolino Red’, a beautiful deep red that is an ‘Autobiography’ colour, and ‘Spectral Light Blue’, which is a ‘Chromaflair’ paint, which is the Land Rover terminology for a polychromic paint that changes colour according to the position from which you view it. Despite being light blue, as you’ll see the majority of the swatch is actually a lilac, which matches that of the swatch in the brochure.

And here is the finished result for these two colours:

Bardolino Red: Spectral Light Blue:

I then placed them into the InDesign document, but because the eventual shape I went for was a rectangle, I just selected the shape and used the grab handles to crop it to the desired size. Taking a bit off the top and bottom meant the full range of colour change could still be shown.

Making the wheels: I discovered that the wheels in the brochure would be of a good enough quality to be used in the brochure. However discussing with the audience members, we agreed just seeing the wheel misses the important aspect of how it looks with the tyre profile, especially given that the smaller the wheel, the larger the tyre profile.

Again, I started by opening a Photoshop document, with the resolution set to 300dpi. I then copied and pasted the image from the PDF into the document, choosing to paste it as a Smart Object, as this gives more flexibility.

I then needed to remove all of the white in the image. So I chose the Magic Wand tool, kept the Tolerance very low (5-10, this can be changed in the Control Bar) selected the white and hit the Backspace key to get rid of it.

From there I chose the Ellipse Tool, made a circle (pressing the Shift key to keep things in proportion) and filled it with black. I made sure it was the right size in relation to the wheel and positioned it behind the wheel.

When I did this I could see that because I had to set the tolerance low to ensure the ‘white’ highlights of the wheel did not get removed as well, the edges were not neat enough. To rectify this I selected the Brush Tool, set the foreground colour to black, the hardness to 60% as I have found this give the most accurate finish and brushed around the inside wheel edges. I used my graphics tablet for this as I find it easier to control the brush with a stylus than a trackpad or mouse.

As with the ‘standard’ exterior colour swatches, I had the background issue, which I fixed in the same way as I described above, with two exceptions. The first one was that my wheel was spread across several layers, so I needed to right-click a layer in the Layers Palette and click ‘Flatten Image’, which places everything into one layer. The second exception was that I used the Quick Selection tool instead of the Magic Wand tool as I wanted to select the whole wheel/tyre which features different colours instead of one particular colour.

Again, once saved as an EPS, it is then just a case of placing it into the InDesign document in the usual way. (File > Place or Cmd + D)

Technical Illustrations: These were an important part of the design for me as I wanted something to represent a blueprint for the dimensions. This I felt would be best achieved by vector line drawings.

To start with, I found some excellent illustrations in the Range Rover press pack and I decided it would be best to trace them, and fit the style with that of the brochure I was in the process of designing.

To trace them, I placed the image in Illustrator, locked the layer so that the image couldn’t move, made a new layer and used the Pen Tool as well as some of the Shape Tools to draw above. This was a difficult and time consuming process, but very rewarding. I eventually filled them with a medium grey, slightly darker actually than in the image below.

I’ve mentioned the issues with the EPS path not working for thin strokes like I have before so I won’t mention it again, but the next stage was to copy the images one by one into a separate Photoshop document, set up with a resolution of 300 dpi, with a dark grey background to match that of the table headings. I then saved this as a JPG and placed it into InDesign the usual way.

Vector ‘style graphic’ illustration: This was shown on the second spread in the brochure, and I designed to highlight the characteristic shapes that make up the Range Rover as well as highlight what is new, such as the shaping of the lights.

As I needed a base to start from, I used the vector template that was part of a promotional bag given to visitors at the Harwoods Tonbridge Land Rover dealer when their new dealership opened.

As with the last illustration this was made with the Pen Tool and Shape Tools, before I selected the entire illustration and copied and pasted it into the InDesign document.

FMP: Designing a promotional leaflet

The third part of my brief was to create some sort of promotional material. My research determined that either a magazine advert or leaflet would be best. In the end, this being the smallest section, and the one most dependent on the others, meant it was the last section to be thought through and designed.

I decided in the end I would design a leaflet. This could be placed in magazines, the brochure, and at the dealership, thereby getting a far wider audience. Add to that the magazines are often all slightly different sizes, whereas leaflets are often standard sizes and I felt a leaflet was the most sensible way to go.

As for the size of the leaflet, I felt A5 would be suitable, as for double-sided non-folding leaflets that is the most common size. This means it is easy to slip into magazines, can be placed into my brochures with the ends sticking out so the audience member knows it’s there, and is not too large to place in a dealership. I found an example of a Mercedes leaflet and was impressed with this. However, whereas the Mercedes leaflet is portrait, I think mine will look better in landscape format for the information and design I know I will need to put on there.

Thinking about design approaches I felt it would be best to follow that of the brochure so my set of designs start to build up an identity to highlight the Range Rover. So from there, I created the front, which very heavily draws on that of the brochure design, just with some slightly different positioning to reflect the different size I was working with.

I then moved onto the back, and very quickly got the general layout sorted, with the majority of time focusing on positioning the text etc, but there were a few key changes in my creative process which I’ll show below.

I originally started with the design below, which compositionally looks good, but I was aware that although I am trying to keep information to the minimum to allow everything to have an impact there was not enough information about how to keep up to date with Land Rover online.

So I updated the design to include this information, but had difficulty working out where it should be placed. I really wanted to make use of the sky background so decided to split the design in half, with the ‘Peerless’ text on the left and the ‘Find Out More’ text on the right. However, I just don’t feel this works and the text fills the space too much. Not to mention the dark grey sky in the top right corner does not have enough of a contrast with the grey text. So I decided to change the design… I think with the design you can see below I have created a suitable aesthetic and composition for the leaflet now. I decided to utilise the space underneath the ‘Peerless’ text but I knew this would create a clash of colours, as I would need white text for the bottom and dark grey for the top. Therefore I took the transparent box idea from the brochure I designed, which works perfectly.The only thing I was not happy about with the design was that the details about Twitter and Facebook etc. were placed in the text and were therefore not as noticeable. Meanwhile I had the website in the footer of the leaflet, which works well, but there was a disharmony in where to look to get the information. So I decided to make the change to place the Twitter and Facebook information in the footer as well. This helps to make it more visible, and allows me to streamline the text in the ‘Find Out More’ paragraph.

So the leaflet design is pretty much finished now. All that is left to do to the design is to make some small adjustments to the positioning of objects and double check everything is ready for printing.

Paper Stock: I now realised I needed to think about what paper I would use to print my leaflet on. The general stock that appears to be used for leaflets is a lustre finish, with a reasonable weight of around 200gsm. I normally use 270gsm paper I picked up a while ago from Staples, which I use for final pieces, as it provides a nice lustre to the final piece and is suitable for a wide variety of uses. However, as only one side can be printed on, and while I could use spray mount to stick the front and back together, the end result might be too thick.

So, with this in mind, I decided to experiment by ordering some paper samples from GF Smith through the college. Unfortunately there was an admin error at the college end and I will not receive my samples through in time. However, this did remind me that I did receive another sample from GF Smith last year, which did have several paper stocks I thought would be suitable for things like this. So I opened up the sample, and had a look through.

Three types of paper made it onto my ‘shortlist’ for closer analysis:

• Accent Smooth (Glacier White) – 200gsm.
• Gmund Treasury (Porcelain) – 240gsm.
• Mohawk Superfine (Ultrawhite Eggshell) – 216gsm.

Looking at all the types I had shortlisted in bright daylight, as well as feeling them to assess the texture allowed me to make a really good judgement on which would be best.

While all look pretty much the same white when viewed at a glance, comparing them in bright daylight showed the Accent Smooth (Glacier White) and Mohawk Superfine (Ultrawhite Eggshell) had a pale blue sheen to the paper, reflected in the names of ‘Glacier’ and ‘Eggshell’ which are things which do have a slight blue sheen. While this is alright, I was much more impressed with the Gmund Treasury (Porcelain) for its very white colour, which is just what I was looking for.

I also wanted to compare the thickness and smoothness of the paper to assess suitability, and here I found the Accent Smooth and Mohawk Superfine were of a suitable thickness, but had a very slightly rough textured feel to them. The Gmund Treasury paper to me seemed much smoother and being a slightly thicker weight in my sample helps to project a more premium finish, without being too thick to be placed in a magazine or brochure.

Therefore, I have decided I will print out my leaflet on 240gsm Gmund Treasury (Porcelain) paper as I expect this to give me the best result.

——————————————-

Edit – 21/5/13:

Well I asked my tutor whether he thought the paper was suitable for the printer and he agreed with me that it was probably was… except that the paper did not work with the printer… so it was back to my original plan, which thankfully worked much better than I had originally anticipated, so I am confident I can hand this in as a final piece with no worries.

Below is a comparison image of ‘Plan A’ and ‘Plan B’ – it’s pretty easy to spot which one looks better! Plan ‘A’ is the bottom –  the finish is faded and speckled, it just does not match the rest of my designs and I would not hand in a final piece like that.

Of course, this is no slight on the quality of the paper provided by GF Smith, it’s more to do with the fact that it eventually wasn’t the right type of paper for the printer I had available to me to use.

FMP: Feedback and Finalising App Design

For this blog post, I show the final development stages for the app design. There have been many changes since the last blog post focusing on the app design, which can be read here.

I took what I had done so far for the app design into the interim crit earlier this week, with the aim of sourcing feedback about the design about whether it was suitable in design terms. (as the audience members I had spoken to had already confirmed they felt the design was suitable for the audience.) This was achieved, with a good level of feedback, and I’m glad to say the majority was very positive, with a few little points to pick up on. So below I’ll run through the app, how it works, and mention the changes made.

Firstly, I decided I really needed a suitable app icon. I refreshed my memory with the research I had done into app icons, and looked around for Land Rover app icons but found nothing to really go on, other than using the logo. From this I came up with two paths:

• Use either the Land Rover, Range Rover logo or both.
• Show the vehicle, or a feature that the audience would recognise.

The second path was one I felt would work rather well, and to this extent I decided to look at the front vector shape I made earlier in the project. The whole front in the app icon was too small to be seen at a sensible size, so I soon changed my attention towards focusing on one element. Pretty quickly I knew the only element I could work with would be the headlight.

With the app being named ‘Range Rover’ (I cut out ‘The All-New’ from the name as it was too long) I felt perhaps the app icon could be the Range Rover logo. So I found that and turned that into a logo, of which I was really impressed. I also experimented with the Land Rover vector logo I had made as well.

So I showed all of these to the audience members that have helped me throughout this project and asked them what they thought. They felt the vehicle shape ones were not suitable as they were not recognisable unless you had a very good knowledge of the Range Rover, so not very accommodating for new audience members.

As for the Land Rover logo app icon, they felt this would create confusion, as many people are not totally familiar with the idea that Land Rover produce the Range Rover as just another model in the range, as they would the Discovery or Defender. This left the Range Rover logo, which was received favourably because the design approach was closest to the rest of the project, was the most legible, and was very minimal, so would stand out on the home screen.

With this feedback, I was able to pick out the best option and use that. This is why it helps to have an ‘outsider’ look at your work as they won’t be as familiar with it as you are, so won’t have as great a understanding, meaning things need to be more logical.

I then wanted to mock-it up on a iPhone home screen to see how it would look in relation to the other apps, so I did that and was impressed with the result.

After that, I wanted to turn my attention to the launch screen. This was not properly designed when I went to the interim crit, and opinions were mixed. Some felt the vector icon did not highlight the new features of the all-new Range Rover, and could just be any Range Rover, while some liked the minimal, ‘de-constructed’ approach as they felt it summarised the configuring process.

I had a long think about it afterwards, and decided the app launch screen needed to be bought in line with the front of the brochure and promotional leaflet I have designed. Therefore I placed the same image in, and made it look suitable in a portrait format whereas before I have placed it in a landscape format. Having a lot of ‘background space’ around the focal point helps make the image as flexible, and as useful as possible to me.

I then re-designed the black bar to go at the bottom of the screen, where it can carry the Land Rover logo and slogan.

I was happy with this, but felt it was missing something to show the progress of the loading app. I decided animation of the image was not possible, so turned my attention to designing a slim progress bar the audience will be familiar from seeing already on both computers and phones. I chose to place this under the vehicle to get the contrast from the sandy background and line up the edges with that of the Range Rover.

With the app design being received favourably at the interim crit, it has mainly been a case of making a few design tweaks and here, and designing the screens that I hadn’t done yet. The next change came to the structure of the app. I decided that the ‘Brochure’ section of the app should be removed, as there would be a better place to position the ‘Request a Brochure’ command. It also doesn’t need a whole page, just a button that re-directs them to the Land Rover website page where they can order from there.

This involved having to re-align the remaining elements, but it has helped to consolidate the minimal aesthetic, with more space given to each button.

Pressing ‘Configure’ will start the new configuration process, and as I have shown before the first two screens focus on selecting the ‘Engine’ and ‘Model’.

Below are the screens for the ‘Exterior’ part of the Range Rover configuration. Again, these have been finished previously, so nothing has changed here.

Below are the first two screens for the ‘Interior’ part of the Range Rover configuration. Again, these have been finished previously, with the only thing that has changed is the image, which is now of a better quality. I also discovered the old image was distorted, which was really annoying to find, but good that I have replaced it.

I have made changes however to the info panel for the ‘Seating’ screen where I have changed the info panel size, so it now covers the whole screen, and included an image of the option.

Below are the last two screens for the ‘Interior’ part of the Range Rover configuration. Again, these have been finished previously, so nothing has changed here.

The next stage of the process involves choosing ‘Options’, where I have changed the images as the ones I used before were only quick mock-ups, and were therefore not suitable at conveying the option properly.

I also re-designed the info panel, changing it like I did with the above screen to show a image on the info panel and streamline the text.

The next development I made was to design the ‘Accessories’ screen, which stylistically is the same as the ‘Options’ screens, but has different content.

I also used this ‘info panel’ to highlight the ‘alert’ function of the configurator – to make the audience aware either when:

• Two options that are incompatible with each other are selected.
• The addition/removal of one option necessitates other options to be added/removed.

The app proposes a solution, informing the user as to what will be added/removed, as well as the cost change. The user can then either ‘Confirm’ or ‘Cancel’ the changes.

The next section would be the ‘Summary’ where the audience can see the full set of details for the car they have configured. Swiping left and right reveals the different categories.

From there, they can press the info icon for more details, and press the ‘Edit’ Button at the bottom to go back to the relevant screen if they want to make any changes.

After that I felt there needed to be a screen where all the available facilities for the configuration can be presented. I decided to title the screen ‘Next Steps’ as I felt this was relevant to its purpose. On that screen, I took inspiration from the Apple ‘Share’ screen I talked about in my last blog post, but instead of mimicking it, I decided to change it to better suit my design. So there are still the buttons for sharing to Mail, Facebook, Twitter and Pinterest, as well as options to Print, Save to Garage, Edit or Start again.

The ‘Save to Garage’ button brings up a pop-up dialog box where the user needs to input the name for the saved configuration and press OK to save it. For this design I took the alert box and changed it substantially to suit my needs.

Garage:

Moving onto the ‘Garage’ part of the app, if you open it after saving a configuration, that will appear there. There are options to open the configuration or delete it, courtesy of some little iOS icons that will be familiar to the audience. I’ve also used one of my own icons to represent the ‘edit name’ function. Pressing the top left button will open the configuration to the summary page, where it can be edited if necessary.

To delete the configuration, just press the delete app, and an alert box pops up asking if you are sure you want to delete it, as it would be so annoying to mistakenly delete the configuration. Pressing ‘Yes’ will take you back to the ‘Garage’ screen where a car configuration is.

However, should it be blank, it will show a different screen I have designed, where it informs the user the garage is blank and invites them to start a configuration courtesy of the large ‘New’ icon I have designed in the middle of the screen.

Locate Dealer:

I have finally finished this part of the app. The first screen remains the same however as that was already finished.

but the map size has been reduced in the second screen to leave space for the Land Rover logo below. The reason for this being here is that this is the link back to the home screen, which if it wasn’t there, how would the user get back? Especially as pressing the Home button on an iPhone doesn’t take you home on the app, as when you re-enter you pick up from the screen you were last on.

The Land Rover logo still features on the map, but pressing it now brings up an info panel, which contains a large image of the dealer, the address, a phone number, and a button to ‘Get Directions’ which will link the user into the full Google Maps application.

Settings:

Unchanged from before, but a really intuitive screen that deals with setting the measurement units for the app, as some people prefer using metric and some prefer using imperial. With two differing units that can be used, I wanted to provide the audience with the option for this.

Conclusion: So this concludes this section of the project. I am very pleased I have done this, as this is the first time I have specifically explored app design. I have asked around for feedback since and the results have been extremely positive.

FMP: Further app development

Here is the latest progress on the app design for my FMP. I feel it is getting to the point where the majority of the app is designed. The main focus for today was getting the pop-out screens done to provide extra information.

The first information panel is for the ‘Seating’ screen, in the Interior section of the app. I decided the pop-out panel would need to fill the whole screen, so I decided to use a black  background set to 90% opacity. The reason for doing this is that it keeps the monochrome theme going, and is a strong contrast from the scheme I have implemented throughout the rest of the app. This contrast is needed to provide a visual notification as such. I have also included a cross in the top right corner to allow the panel to be exited.

For the text I have used 6pt throughout, focusing on Nexa Bold for the copy typeface, as this has much better readability to it, something I need for the rather large blocks of text.

I will need to make some adjustments for the rivers in the typography, pretty much the same as what happened when I was designing the brochure. For the summary screen, where a information panel is needed, the basic idea is the same, but the content is more visual, for example with the exterior paint swatch below, an image is showed instead of text. Therefore the image shows up well against a black background. For a black swatch though, I will place a thin stroke around the edge, which could be carried across to all images for consistency. I realised I needed to finish the ‘Locate Dealer’ part of the app, and for the design mock-ups I am creating I felt it would be best to use screenshots from Google Maps. The idea I have is that a location could be entered, and from there, the local dealerships can be found. It did occur to me that I could theoretically set the app to auto locate where the user is, but that way it does not cater for what happens if the user wants to plan in advance and find a dealer near to where they work for instance… so I have used a postcode finder. On entering the postcode, it will take the user to a screen like Google Maps will, but instead of the destination icon familiar to Google, it can be replaced by a Land Rover logo, in a monochrome shade to match the style of the app, rather than the green and silver of their current logo style. Pressing the Land Rover icon will bring up an info panel, where there is an image of the dealership (there will be on the mock-up when I can source one), as well as the address, and a way of theoretically tapping into Google Maps to get directions.

Overall I think I am making good progress with the app, but there is still quite a bit to do, such as conducting feedback, refining elements of the design, as well as starting the ‘Garage’ and ‘Brochure’ section. However, I am starting to think that the ‘Brochure’ section may be surplus, because I am thinking I may have a better way of designing it into the app.

FMP: Revisiting the app design

Before I needed to change my focus to designing the brochure so I could get it printed in time for the deadline, I decided to work mainly on the app design. Now that the brochure has been designed and sent off, I felt it made sense to return and finish it.

Here is the next stage of the app design. Since I have designed the brochure, the design style I wish to see used throughout the project has been established to a far greater extent. I must admit I thought I had most things pinned down, but soon realised the aesthetic of the app needs to change.

So gone is the dark black background with white text, to be replaced with the grey theme seen throughout my brochure design. So I started with the home screen, changing the background to pale grey, and the text to dark grey. I also made the home icon thinner and replaced the old Land Rover logo with the new vector logo I have made for the brochure, placing a color overlay on it in the layer styles to turn it from white to dark grey. I am really impressed with this screen now.

As for every element on the page, I removed the bevel and emboss I placed on it, the reason being I felt the faux sense of depth is not in keeping with the brochure, and also flat design is very popular at the moment, with rumours that Apple’s iOS 7 is going to move to a flat aesthetic, which can be read here on the Techradar website, my favourite website incidentally for keeping up to date with technology.

Looking at the different screens throughout my app design, I was concerned that it all looked a bit flat, in the sense that text was just placed against the background, with no structure. Therefore I decided to address this by adding some rectangle ‘boundary’ boxes behind the titles. Below is my first test, the new design being on the left, and immediately it is clear that there is an improvement. I asked the opinion of some people as to what they thought, and they all liked the newer version.However, I felt more could be done, in both matching the style of the brochure, and making the text more legible, so I changed the background box to a dark grey, and changed the text to the light grey of the main background. This helps to provide a strong contrast to the design, making information pop out far more clearly than before.

I decided to apply some changes to the app in a logical order, so I will go through the ‘Configure’ stage step by step, and highlight what is new and why I have done it. For the ‘Engine’ screen, and all screens from now on, the main central piece of text has been changed from Helvetica Neue Bold to Nexa Bold, so it is in keeping with the majority of the text. The only thing I have decided to leave as Helvetica Neue Bold is the ‘Back’ and ‘Next’ buttons, so it is in keeping with the rest of iPhone apps. For the ‘Model’ screen, I have, in addition to the changes I have previously discussed, changed the style of the table for the information. Again, this matches the brochure, and I have kept the text in the bold weight so as to make it more readable. I have also moved the hide and reveal buttons from the left margin to the right, as there is more space. The first ‘Exterior’ screen focuses on the paint swatches. Unlike the brochure, every colour will be represented as a tile so as to fit the space better. I have also progressed from the iTunes mimicking style of scrolling through swatches to a more circular based system. The other change from the brochure is that the colours will be displayed in a sequence that matches a colour wheel. This is made possible as the information can be displayed directly above, informing the audience as to the name, type of paint, and cost if necessary. The size of this text is now 6pt to make it easier to read, with the Bold and Light weights being used to assign priority.

Something that can be seen across all exterior screens is that I have cut the car and shadow out from the background, so instead of it being white, it sits on top of the background. I think this is a huge step forward, as it looks more integrated. Again, for the ‘Wheels’ screen, I have used the circular style of navigation, and because I now have a pale grey background, it allows me to carry across the idea I had with the brochure to show the tyre around the wheel as to give a better design context. For the ‘Roof’ page I have removed the white background from the ‘option image’ at the bottom of the screen for the same reasons as the main image. Because the circular  scrolling option does not really work for this style of option, I am using the little icons seen on the home screens of an iPhone that indicate how many options that can be scrolled through. Swiping left and right shows the variety of selectable options. The design changes made here for the ‘Accents’ screen are the same as the one above.

Moving onto the ‘Interior’ screens, the same style has been carried across. A change from the brochure is that instead of showing all the variations possible for an interior choice in very close proximity, the app design can break down the process into a more logical manner, an advantage of a digital media over a print one. For the ‘Seating’ screen, as there is just one option, to either select or deselect, I decided to make the image bigger to fill the height of the space it had. From there, I moved the ‘add or remove’ button to the left and the ‘info’ button to the right. I still need to design the pop-out panel for the info section yet. For the ‘Finishers’ screen I am using the circular style of scrolling, which works here as there are three options, helping to keep the symmetry. If there were just two options, I would have thought about a different way of displaying them. Again, with the ‘Headlining’ screen the changes that I have made have been discussed elsewhere. However, one change I have made is to add in the fabric headlining to the scrolling mechanism, which previously just had the options for the leather headlining. The ‘Options’ screen has changed to match the colour scheme, with the new contrast making options much clearer to read, also helped with the type size increased. Scrolling left or right takes you through the different options lists, such as ‘Exterior Features’ or ‘Information, Communication and Entertainment’ for example. The same process carries through from my previous design as in how to add/remove options, as well as source information about it. I still need to design the info panel for this however, as well as get some images together that truly reflect the options I show on the screen.

I will also need to design an ‘Accessories’ screen, which will be the same style as the Options screen.

An advancement I have made is to design a ‘Summary’ screen which at the end of the configuring process, shows the audience what they have selected. Scrolling left to right shows the different main stages (Model, Engine, Exterior, Interior, Options, Accessories) and the grey bars show the main information. Pressing the info button will allow bring up a pop-up box for further information when I have designed it. There is still some development to come on this screen. Instead of the ‘Next’ button on the ‘Summary’ screen, I will replace it with a button that states ‘Share’. Pressing this button will bring up a screen style dedicated for sharing, which is something Apple uses in its Safari web browser. It is something that will be familiar to iOS users, so they will intuitively know how to navigate. From there, there are a range of options, to save to the ‘Garage’, print the configuration, or share it via mediums such as Facebook, Twitter and I’ll probably put Pinterest on there as well for the design mock-up.

I still need to create an icon to represent adding a saved configuration for a Range Rover to the ‘Garage’. At the moment, the Teehan+Lax icon is there, as they are the people that made the downloadable iPhone PSD template, which has been essential to this project. It can be downloaded from their website here.

With the settings screen, I am still happy with the design so it was just a case of changing the colour scheme.  The only other change I’ve made is to place a metal finish to the ‘toggle switches’. It looks more realistic and of a much higher quality than just being a flat, pale grey. With the ‘alert’ dialog box that appears at the start of the ‘Configure’ process, all I have done is to change the colour scheme, as well as the typography to Nexa Bold and Light.

So what’s next for the app design? Well, I obviously want to finish the ‘Configure’ section, as well as start and finish off the remaining sections of the app that are visible on the home screen.

During this process, I will want to ask around for feedback, to ensure my designs are suitable for the intended audience. To do this, I shall ask around on Monday at an interim crit I have, as well as consult the audience members who were so helpful for the brochure design and gave me a lot of extra insight.