Evaluation

This project went really well. I feel like I was able to learn a lot from the learning curves I put in place. The only downside I can see is that I wasn’t as successful I had imagined I would be with the Polymer Ploject, failing to implement it in anyway into my final project.

The overall new design and layout is great and has good feedback, although there are certain techincal and design  aspects I could improve on, these include;

• Reviews in the lineup confuse some visitors
• Autoplaying music on both the homepage and artist pages are dislikes, and would require controls
• Chrome has a bug that only shows the left column figcaptions, which contain the artist names shown here;
• In Tickets, I switch from a grid view to a card view. There is no consistancy here, also the images also feel way to large and the indication of Standard & VIP is not distinct enough.
• Info about the venue, dates, tickets, etc. are hidden and the hierachy focuses too much on the artists and experience of being at the festival rather than selling tickets.
• Logo is based on the Californian Sunset, the design could reference the time of day the user is visiting the site and influence the colour pallete accordingly.
• Lineups are collectables, the traditional lineup format should be available to the user to download or purchase.
• The reviews are coded in, which means the reviews stay the same. Instead they should draw from a database and change everytime the page is refreshed.
• Allow user to click anywhere within the page on the enter page to access the site.
• There is no animation using the Polymer Project
• The artist pages music autoplays, in the designs I had iTunes style controls
• On the artist pages, I show the albums, I would like to be able to hover over each and have the option to automatically play via spotify or iTunes.

It is important to note that while there are some issues (based on opinion) with the font size throughout the site, it is important to note that Google Material Design has influenced the design massively, and by sticking to their rules, created debatable issues, like the font on the landing page.

Overall I am very pleased with the outcome, and if I were to do it again I would change very little apart these points.

Advertisement

Evaluation & Future Considerations

In this brief, I was given a reasonably free reign on my work provided it was about the four elements. I chose to be slightly different in my approach and tackled the four elements within alchemy. I wanted at the same time as accomplishing my brief to try something different and take the theory of mobile first to a new level. While I learnt a lot about mobile first and techniques it used, I also learnt the reason why so many people leave the mobile experience on the mobile is because it simply doesn’t work on the desktop. This means that the overall design isn’t as good as it possibly could have been.

Learning Zurb Frameworks was another milestone within this assignment as it meant I had to learn and use the entire package from scratch, I am happy to say that now I know my way around foundation and it means I am a lot more confident with using it, something I couldn’t say 6 months ago. At the same time it meant I could also input extra code and ideas based on other frameworks and learn even more.

The marketing strategy was an important element of the brief and something I completed sucessfully, the research allowed me to understand that offline and online are closely tied and should seamlessly integrate with each other, something that mean’t I have to try and get across in my marketing. Somewhere I felt I wasn’t doing so well was in the area of implementing the social media marketing within the website itself, as it how no links to the Facebook or twitter. This would be a failure within the marketing online but instead something I would need to consider if I were to spend more time improving this project. I would need a much greater integration of the marketing and what the exhibition is about within the actual website to convince people to attend the museum itself.

Implementation of Google Analytics was an interesting pillar of the marketing strategy as it meant I was able to check the amount of people visiting the website, details of their demographics and details as to why they weren’t purchasing tickets. This would mean i’d be able to create a more successful website which drives more sales as I could change the website to suit the needs of the user based on analytics.

It seems that the bottom navigation on the desktop version of the website doesn’t make sense and confused the user quite a lot when navigating it. It would be inappropriate for users to leave the page simply because they could not navigate it as it would impact the sales.

The styling of the content managed system is another negative side in this project and I have failed to make the word central aligned while also making the font illegibly small. I have left the word on the site as evidence that I am capable installing and using couch cms, but i consider this an area that would require further research.

The form on the website is something I have tried to implement from a pre-built experience. The reason for this was the fact that the labels float inside the box making more a much more enjoyable experience, however in the way I have created my form, it is first uncompleted as limits on time restricted me from finishing it, but it also looks unprofessional.

If I was able to do this assignment again, I would be able to learn from the mistakes I have made. Simply being able to further what I already have created I would firstly make the desktop navigation sit at the top since this is where most users are most comfortable with the navigation being positioned. From my user testing, when people went on the ingredients and instructions pages they tried to click on elements on the page which I had not made clickable, therefore, something I would do is allow them to learn more by simply clicking one the ingredient or instruction. Mainly though, if I was offered the opportunity to spend longer on this assignment, I would choose to fully integrate the marketing with the website, by including social networking elements into the site, including but not limited to links to the pages, feeds of statuses and images taken at the exhibition.

There were many good and bad things that have come out of the work I have completed, but all of them have taught me invaluable lessons about the way I work, what I am capable of achieving, my strengths and weaknesses and finally what I do and do not enjoy doing with regards to my work. This means that I can work more efficient and and achieve greater results next time I am given a brief.

Evaluation

In this project were to redesign a poorly executed website called High Noon Holsters, a website dedicated to selling all types of holster  to the american public. After a little research we found the company didn’t exist anymore but that didn’t stop us from researching the area of gun holsters through its old competitors.

During the research stage, there were many important elements that contributed to the overall look and feel of our design. Researching the product was the first major step before we even started designing the wireframes. It allowed us to understand the product the site would be selling and gave us an understanding for what the feel of the website should be like. It meant that we could simplify the products into four different categories, these were concealment, duty, tactical and sport. At this stage we were already many steps ahead of the original high noon holster website because we were very careful to make sure we didn’t overcomplicate the design and the layout. Something else we decided to put a lot of effort into researching was other southern american websites and the user experience they provided. Tying these into the font and the colour research meant we were able to make plans for how we were going to design the high noon holster website, for example the way tex is presented on a southern american website is unlike any other style of design. They tend to arrange many different styles of typefaces stacked on top of each other in a burger style format, usually with a graphic involved too, to annotate what is being said within the title. When researching the colour theory we learnt that contrast was important to make the content stand out from the background, therefore using the patriotic colours red, blue and white relate to americans because of the flag and the other colours used were darker, brown greys and blacks because they related to the old style american saloons. The Reds website shows how the brighter colours work well at the top as the navigation and the darker colours as the background colours of the main content.

When creating wireframes we decided to break it down into different stages, firstly by creating four wireframes, two for desktop and two for mobile, we then got together and worked out the negatives and positives of each design. That meant we were able to go away and create two new designs each, the best parts of each design were combined to create the next version. This meant we were then able to put both of our final combined designs against the other and create a new one based on the best parts of both. This meant we had technically gone through 6 different designs and allowed us both to have input on the final design. Once this stage was completed we both went our separate ways in the design process to put our own design ideas forward, so that we could decide on the best later on.

When reading Natalie Nahie’s Web of Influence I learnt that people trust others with similarities, therefore we created a personalised greeting message on the homepage for every different state of the united states based up local language and similarities that the people from that state share. The design of these greeting messages were based upon the research about the southern american websites and the ‘stacked’ look of the different typefaces to create an new unusual look for the message.

Another thing we learnt from the research stage was that usability is very important in relation to increasing user interactions. Steve Krug’s “Don’t make me think” discusses how hierarchy and positioning of elements on a webpage massively influence the experience the user has on the site. Since the user scans through the page for the relevant information, the layout has to be very simplistic and self evident. Taken from the book, these two pieces of information massively influenced how we redesigned the High Noon Holster online presence.
One of the most important elements to our teams organisation was the fact that from day one we listed everything we wanted to do and broke it down into manageable tasks that could completed alone. We then set about creating a planner and allocated these tasks to the person who could handle them the most efficiently. This meant that at any given time, we could check the planner and see if we were on schedule. Another very important element of the planner was the fact that we built into the schedule time of things to go wrong, so if we ended up delaying a piece of work it wouldn’t matter because we would still be able to hand in on time.

Being able to criticise each others work professionally and take criticism was a large importance of being able to work as a team and putting personal issues aside to achieve the best possible end product was at the forefront of importance when working as a team. Understanding your responsibility within the group was majorly important as it meant you stayed on track with the tasks you were assigned rather than doing your own thing.

Once the final designs had been completed we had to choose which design we were going to pick as the final design we would present to the group.  At the end, it was apparent that both design were hugely different in appearance, only because we both had different visions of the final products. Alistair’s design uses simplistic design cues, with subtle gradients, flat colour and influences from the fonts and colour research and the diesel online store. Aidan’s design on the other hand, was highly influenced and adapted from the original High Noon Holster website, thematic around spaghetti western posters, using torn paper like vector images for the containers of the content, and using flat colours for the navigational elements, and using high fidelity images for icons used on the store selection page.

Taking into consideration the research in relation to usability and functionality in which the entire redesign was based around, Alistair’s design was more fitting regarding the research and wide audience of the gun holster business in comparison to Aidan’s. The thematic spaghetti western design looks really good but would target a much more specific demographic given its niche design in comparison to Alistair’s.

Evaluation

Creating a PHP design was a challenging prospect, it meant research had to be carried out in many things I had not considered before. The first challenge comes when you understand that you cannot design a php as straightforward as an average site since it contains sensitive information such as the database details and links to the tables within the database. I understood that I must build the PHP first to ensure full functionality. Next step would be to create wireframes that worked around the objectives of the php. For example, the gallery page was built using a white box function that allows expandable images, for the most part this was done using javascript but it also meant there was an added level of complexity. I had to consider many different variations of gallery page, and in the end scrapped the design for the gallery page as it was built around larger images and the initial purpose of my gallery page was to contain clickable thumbnails.  Once the wireframes were completed the next stage was to build the design into real user experience. This began with me starting with the PHP and making sure the functionality was there, then adding the html code around that, then adding the css to make the design work.

The design needed to be thematic, therefore I decide to create a website based around a trip to Paris, which would allow the user to get a grasp for the experience they would have if they travelled there. There is a homepage with a welcome message, explaining the purpose of the site, a gallery page with all the images and finally a search page which allows you to search the images to find the place you want to visit along with a short personal account of the landmark.

I really found the process of learning php much different to the process of learning html and css as when you ‘fiddle’ with html and css things change on the browser and you can see the effects of what you are doing. Whereas with php either does or sensate work and there is no in between, it alerts you to issues with the code, but if there are no issues with the code and it simply does not work, it is a lot harder to try and fix bugs. I found this really challenging and I believed that this to be something that motivated me to master the php.

I found that by using examples of php code and spending time creating practise sites, it allowed me to get my head round how the code was working, the purpose of variables. It meant that when the module was nearing an end, I started to feel more confident with the php and what each individual element of the code was doing. A stand out point in my development is when worked out how to echo to another page if the user had not entered anything that matched the contents of the table from the search bar.

Problems I had were that when I was unsure of something I was really stuck, because I literally wouldn’t have a clue as to what to do. Google searching the issue and looking on w3 schools and  the php website really helped. In a way it was more of a blessing in disguise because it meant I had to go and research the topic myself which mean’t i learnt the topic with much greater ease.

If I were to do this module again, I would spend a little more time developing the gallery page as it would really help the overall feel of the page, rather than being simple squares, create a better layout to create interest for the user, maybe even using a circles. I would like to redesign the top banner to be full width of the page and make the site fully responsive to create a better experience for the user.

ACORN ROOFING – Final Evaluation

When starting this project I thought it was crucial to avoid diving in with designs and code so I did some research into the users of the site, and with a focus group of the competitors website I found an interesting correlation. The more the company was worth the better their website was, this could mean two things, a good website can give the  indication of a company being bigger and better than it is, or it could simply mean that the bigger the company the more money they have to spend on their website. Regardless it was an interesting correlation that proved a good website can go a long way. Next I brainstormed my ideas on paper which allowed me to start selecting important ideas for design, this included deciding the content of the pages and how they were going to be designed. I thought due to time constraints and knowledge that it would be a too bigger task to try and make the site responsive or adaptive so I simply focused on make the site accessible by every browser, this meant I created a website that was 960 pixels wide to fit on the standard monitor and tablets. I then created three wireframes which focused on the placement of the content to allow me to visualise the site. Next was to turn these wireframes into physical designs, and once that was done I was able to choose one and start building it. I realised (when I had almost completed building the site) that the pageless design was flawed and was bad for search engine optimisation. I started researching the flaws of SEO and realised that this design was going to fail in the seo area so I decided to restart from the wire frame stage. I took the best of all my wireframes and built them into one overall design, next I created the final design and built this from the ground up. The final stage I took was to test the site on all browser and devices to make sure it worked and luckily everything worked as I wanted. The only issue being is that on mobile the text and buttons were quite small but this was expected as I hadn’t planned to make a mobile version of the site.

Something I learnt was how to use file transfer protocol (FTP) to make sure I was editing my site live on the server rather than locally, as I am aware it is important to do so because it means that should any problems arise I can fix them right then rather than waiting until I FTP my finished site only to realise it has issues once it is on the internet. I was also aware of the fact that I should you the put and get tool on the local & server sites area of Adobe dreamweaver, this is important as if you drag and drop you can corrupt the files beyond repair meaning the site doesn’t work at all.

I learnt that hierarchy within the file structure of the site is extremely important because it means that should another developer need to work on your site, it easily understandable what and where everything is. I learnt it was important to separate images which were an integral part of the design, and the the pictures which featured on the site. I also understand that because images take a lot of bandwidth to load on a site, I found it was crucial to make sure the image was the smallest possible file size it could be. I did this by making sure that every image featured on the site was set to the exact size the actual image was.

One issue I have discovered with my website is when you hover over images within the site, I have created divs that use css to implement the background, the reason for this is to allow the text to be easier manipulated on top. I have used the :hover element in css to select a slightly darker version of the image when you hover, the problem with this however is that when you initially rollover the image, the area turns to white for about a second then shows the darker image. with a bit of research I believe it is because there in no code specify what the onMouseover image is, but there is no way of doing this within the css. I would simply have to code the images through html and use  onMouseOver and onMouseOut, this would me to get the desired effect without the white spaces, although this would mean I would have to create a z-index for all of the content within the div.

Another issue I was unable to resolve was that of the underline to the bottom left of the twitter logo in the footer. I removed both Twitter and Facebook logo html and both time the underline disappeared, this is confusing because you can select it on the page as if it was physical content but there is no sign of it within the code, after researching it and trying to understand what the issue is I am still unsure and this is something I will continue to try and figure out.

Logo Evaluation

For my logo design I knew it was important to hit certain criteria, a lot of which I was not aware of when I first started the course, therefore I knew it was important to research before I even designed any logos whatsoever. While I was designing the logo for myself, this was excellent because I know the needs of the client (myself) better than anyone else. For me, the most important part was to advertise myself as a luxury design brand, this would have significant impact of the way clients considered me and my work, it would also impact how much I could charge. I learnt by researching colour and current luxury brands certain things I needed to do create a luxury style branding. Once I had completed my initial mockups, I created computer versions and removed the ones I thought that were not appropriate, I made sure that my logo worked in black and white as I had learnt this was very important in design, next I added colour to the logos and decided between the remaining two which meant I was left with my final design which had meaning behind it. Next I added specific details to further enhance the meaning of the logo, I used the fibonacci sequence which I had researched to make smaller adjustments to the layout of the logo, and finally changed the font to create the logo I was finally happy with.

For me the most important aspect of my design was the research stage, not only did it allow me to form a meaning for the logo but also allowed me to be certain my logo was following the correct stages to get to the perfect end result. At the time I thought that colour was the most important element to the logo and I chose purple because it represented luxury, I didn’t realise at the time I was making a choice not only for the logo but for all future branding I produced. Equally, this is probably because I was focusing on the end result of creating a logo rather than the overall branding of my image.

For me, a useful idea came from my research about luxury branding and how by mixing serif and sans-serif fonts enabled me to appear to be a much higher quality designer. Initially I felt uncertainty as to whether it would work in my logo but once I started to play around with the design in Illustrator I started get a much better feel for it. By using this font scheme I have significantly changed the appearance of my logo and it now targets the audience.

I have learnt that that research and initial design design stages are the most important to the logo to ensure it has the appeal you desire. Colour and fonts are second most important, and I believe you can’t go too far wrong if you spend a lot of time on these stages. If I was to do this again though, I would try to re-imagine the the two lower sections within the logo that represent my competition because when printed, they are not as visible as it is on the screen.

Design Evaluation

My design, is meant to present to it’s user some of the lesser known facts about war, to give the users an understand of some of the underlying facts and patterns that seem to occur with media manipulation of the public and their understanding of the war. I found it difficult to find the relevant information because it is obviously sparsely available so my research stage of the content was very important as I was relying on the content for the shock factor of my design.

I organised the design into three separate sections, budget, economy & deaths. With the budget, I found the overall military budget, then worked out what it was spent on, the next step was to work out what it could have been spent on instead to improve the world. I did this using  a variety of different resources and you can find the full list on my blog post titled “FACTS ABOUT IRAQ WAR”. Afterwards I focused on how the war effected the economy, how much money was made from the war, therefore I looked at how the money was spent within the US and how much money they were able to make from oil pipelines in Iraq. Finally, I researched the amount of people that were killed in the war, what ‘side’ they were on and how that compared to the ‘acts of terror’ that are presented to us as the reasons why we started the war in the first place.

For me, the most important aspect of the design was to make sure the content was laid out in such a way it made a massive impact on the user, creating an interest in the experience of learning new information about the war. I used information I had gathered from previous research into creating a fluid experience that was both powerful yet simple. I considered the fact that the information was biased against media and government but at the same time, this could be due to the reason this information is not widely spread by the media or governments. This is similar to Charlie Hamilton James’ http://www.digitalrainforest.co.uk website because he presents information about the rainforest he bought and then pushes his bias opinion based upon his findings while he was there. At the time I felt the way he had presented the call to action was very motivational as it connects directly to the viewer directly.

Having applied some psychology to my design I have learnt that I needed the content to begin with that will have a large impact on the user, then I need to build up around that. The design should emphasise on the shocking facts that I present to the viewer, which is why I have opted for a subtle flat colour design with as little imagery as possible. This means that the viewer has no distractions and is focused entirely on the content, the only images I have on the design are subtle icons which which allow the user to visualise what the text is about, and faded images that blend in the background to emphasise a certain meaning. This can be said, among others,  about the economy, deaths and ticket purchase sections.

The design takes the user through different areas, the budget, economy and deaths and then asks them a rhetorical question “Who really provokes war on terror?” makes them aware of the exhibitions and then allows them to buy tickets directly on the page without leaving and then also shows them how they can get involved with the campaign directly without even buying tickets. I understand that a certain percentage of my target audience would disagree with the facts because they basically state that everything they knows about war and terrorism to be wrong. This could be advantagous though as it allows me to get a bigger response from the people who aren’t interested in the exhibition and they would maybe help to create awareness by claiming it  as outrageous and create a potential uproar in the media, which would make people speculate on the facts, in turn leading to a successful exhibition, which is the point of the site.