Initial planning phase/ project goals
The beginning planning stage for this development log project is to establish the goals and purposes. I had to decide on a design/ layout for the project that would be suitable towards the audience and still address the organizations mission correctly.
To begin with, I collected a few key assets that will aid in my constructing of the final high fidelity website and any other marketing media. These assets primarily include colours and fonts. They have already been used in my selected organization (WWF), so I thought it would only be right to try and incorporate as much from them as I can to be sure it flows with the proper project goals. The colours I will be choosing from are not only appealing but are also suitable with the brands identity. Colours can bring forth emotions and can impact user experience, so it is crucial that the selected palette reflects the values and missions of the organization. Colours also create a cohesive look that increases brand recognition.
In addition to colours, typography also plays an important role towards communication. It can have an effect on how information is displayed, seen and understood. The fonts I selected are the few fonts WWF uses throughout their designs. Each one being used in its one way. Whether thats for the logo, headings, subheadings, copies of text etc. I wont be using them all because for me if there are too many different fonts used in a singular piece of media that effects not only its looks but its readability. I have chosen to use Georgia for my logo and Open Sans as my primary font.
As I move forward in developing the high-fidelity form, I will incorporate these assets to ensure that the final product is not only functional but also visually appealing. The combination of the chosen colours and fonts will help create an engaging user interface, making it easier for users to interact with the form.
Updates on design iterations
The inspiration for WWF’s logo came from the giant panda Chi-Chi. Chi-Chi arrived at London Zoo in 1961. The same year WWF was created. The founders of WWF agreed that Chi-Chi’s distinctive shape and colour would make a great logo. At the time WWF wanted the logo to be an animal that is beautiful, loved by all and also endangered. Because Chi-Chi gathered so much attention on the arrival into the zoo they knew it would be perfect. They also mentioned they wanted an animal black and white to save money on printing costs.
As for my logo, I took a similar approach. My goal was to redesign WWF’s logo. Trying to keep they same stencil-like design but selecting a completely different animal for the icon. Just like the giant panda, I aimed to choose another endangered species that could effectively represent the mission of the organization. So I created a simple mood board that showcases a variety of critically endangered animals. The selection of an endangered species is extremely significant, it aligns with the values of environmental awareness, therefor the logo can convey a powerful message about the importance of protecting wildlife and their habitats if it uses an animal that is at risk of extinction.
After having a look and gathering information about the animals I simplified my choices down. I could either have an animal with a distinct pattern, allowing the audience to easily recognise it only when two colours would be used in the process of making it. Animals such as the tiger, sea turtle, snow leopard and perhaps a red panda. Or I could choose an animal with a memorable shape such as a rhino. Even though WWF’s logo is extremely simplified I didnt want mine to be, so I chose a hawksbill sea turtle.
Sketch phase
The first stage of logo redesign was to sketch up a brief design using pencil and paper. This gave me an understanding of the width and length my logo was going to be. Like the original panda logo I had to incorporate the organizations brand name into my design. Therefor what font it was going to be, its placement and its size. I mentioned earlier in the planning phase I chose Georgia font, in my opinion its the closest looking font to WWF’s old logo and I prefer that style compared to the modern day custom font they use. However serif fonts such as Georgia tend to be less readable, in this case it’s not too bad as theres only three letters. Two of which being the same and their all in capitals, so I think its alright and understandable.
Illustrator phase
The second stage with my logo was to create it using Adobe Illustrator. Once the first draft was done I wasnt particularly happy with its design. WWF original logo is significantly simplified. My sketch design was also simplified however the turtles head was not so. And because that one section was made up several more shapes than the shell and flippers were entirely it looked odd. I tried to fix this issue by adding more shapes for the shell, however it still wasnt enough. Resulting in me recreating the flippers giving them the scale pattern they have. And in my opinion it looked a lot better. Although I wasnt happy with the shell just having more design, if the logo had to be simplified from the one I have now, that would be the next resort.
Colour experimentation
An additional stage in my logo design process consist of colour experimentation. Even though I’ve already decided to use black and white as the primary/ only colours for my logo, it’s still helpful to explore how the logo might look in different colours or shades. This can provide information on how the logo will look within different media or advertisements used by the organization. As I said earlier colour plays a crucial role in branding and can significantly influence how an audience sees an identifies a brand. By testing different colour palettes, I can assess which combinations work best with the organization’s missions and goals. Vibrant colours can bring forth feelings, while softer tints could convey calmness and trust. During this stage, I created a series of mock-ups in Adobe Illustrator that showcase my logo in multiple colour schemes without the WWF text. Once I have a range of colour options, I’ll gather feedback from people to get there opinion and views. By exploring various colour options, I can create a logo that not only stands out and looks appealing but also communicates the meaning of the organization.
All chosen colours are sourced from WWF website and any other media advertisements.
Modified logos
One last additional stage I worked on was modifying the logo using Adobe Photoshop. Simply selecting all the black shapes and removing them completely. Then adding a suitable image behind the logo giving of this effect. I probably wont be using these designs in my high fidelity mock-up however its just that little extra you could see on social media posts or possibly advertisements.
Feedback
After I was left with my final logo design, I was hoping for some feedback on it. Peer assessment is one of the best ways to improve work and receive a clear understanding of your design choices. When designers share their work they open themselves up to constructive feedback which highlights strengths and improvements. As designers analyse logos they can recognise effective techniques and design choices they might want to incorporate into their own future designs.
The first piece of feedback I received was about the choice of font. I already mentioned that because its a serif font it may be harder to read. And that’s what was pointed out. However they also agreed that because its short, only three letters, and well proportioned it shouldn’t be too much of an issue for viewers to read.
Another piece of feedback spoke about the colour experiment I showcased for my logo. Mentioning that it’s a great idea to do and could see those versions of the logo on merchandise for the organisation. As it would look better to have a bit of colour other than white and black all the time.
Technical challenges and solutions
One slight technical challenge I encountered was with the logo design. I didnt notice it until later after I had the main shape and structure for the logo. But sea turtles have four flippers. Two big ones at the front and two smaller ones at the back. My logo only has the two at the front. I tried to add the one at the back, and only one because you technically shouldn’t be able to see the other. But no matter how it looked or how many patterns and shapes made it, it just looked out of place. I can imagine if a new viewer had seen it with the three visible flippers in the first place it wouldn’t look so bad (for them). But because I was use to not seeing it, it looked better without it. So my solution for this minor issue was to not add one in the end. Sounds bad and slightly lazy but in my opinion because my logo isnt the simplest of designs especially with the multiple shapes just to make one flipper, I dont think its that noticeable.
Except now that I’ve mentioned it.
Low/ Mid/ fidelity mock-ups
Low fidelity concept designs
When designing website mock ups they tend to be split into three different fidelities. Low, medium and high fidelity. I began by creating four low fidelity sketches of the websites opening page/home page. Because these sketches are very brief and don’t give of much information, there purpose is to get a sense of assets placements. They show you a majority of the key elements such as imagery placement along with typeface position etc. I tried to keep each mock up slightly different, all having their own benefits and improvements.
Concept design 1 is a very traditional layout, very similar to WWF pre existing layout. Whilst design 3 could be seen as being a little more advanced as it supports a video for the user to perhaps watch when arriving to the site.
Mid fidelity concept designs
The second stage fidelity it medium otherwise know as mid-fidelity. In my mid-fidelity prototype, I began to create higher detailed wireframes that incorporate more detail than low-fidelity sketches but do not include the final visual design elements like colours, imagery, and typography. This stage uses grayscale or basic colour schemes to focus on the structure and layout rather than the aesthetic aspects. The goal is to provide a clearer understanding of how users will interact with the website while still allowing for flexibility in design changes. I am hoping to receive feedback from these four concept design in order to create the perfect high fidelity mock up.
When transitioning from mid-fidelity to high-fidelity prototypes, you will start to incorporate visual elements such as colours, fonts, and images that align with the organization identity. This stage can also involve refining the interactions and animations to create a polished and engaging user experience. However, I have not incorporated any sense of interactivity as these are only concept designs. I didnt want to spend too much time when mid fidelity prototypes tend to present a finalised layout/ grid system for the high fidelity.
I am not too happy with the footer of each design, I will most likely change that when starting construction for my high fidelity mock up.
Feedback
To be positive that my high fidelity mock up would meet standards I submitted my mid fidelity layouts for feedback. This would ensure I have a clear understanding on what needs changing to fit WWF style and perhaps what needs removing. A majority of the responses turned out positive, pointing out each strengths from all four mock ups. Along with a lot of other responses suggesting ideas of what could be taken out of each mid fidelity concept and forged into the final one. Such as, text boxes, decorative headings, navigation bar menu position, logo position etc.
High fidelity concept design
High-fidelity refers to the advanced stage of the design process where the prototype closely resembles the final product in terms of visual design and functionality. At this stage I incorporate detailed elements such as colours, typography, images, providing a realistic representation of the user experience. One thing my design lacks at the minute is its functionalities. As its only a mock up design I wanted to be sure I hade a clear understanding of image and text placement. I will work on the functions of the website at a later date.
I decided to create a dark mode of the website, allows the users to view the website without straining their eyes.
A majority of the responses I received during my mid fidelity feedback was to pick out key elements and designs from each concept and try to incorporate them all into one. For instance I took the placement of logo from design 1, 3 and 4. The banner display from design 3 and 4, adopt animals text boxes from design 2. And the mastery image proportions from design 4.
As I mentioned earlier I was going to use a clean/ casual stylised font. Allowing the users to read the headlines with complete ease. It was written in a respectable sans serif font know as Open Sans. This font is also one of many WWF use in their original work.
When I decide to create my interactive elements such as buttons and drop down menus, I shall keep them simple looking. That will help give the website a calm feeling and not end up looking too over crowded. I must makes sure everything is readable and nothing looking too over complicated.
All in all I’m pretty happy with this mock design, during the next stage of this module the website will not only include interactivity but I will most likely increase the level of information presented on the opening page of the website. I feel I’ve achieved to stick with WWF’s design choices as much as possible to be positive my design is suitable, readable and understandable for its target audience.
References
All imagery used in my high fidelity mock up design were sourced from Pexels. https://www.pexels.com/
0 Comments