Poppy's Digital Diary

Welcome to my personal Digital Diary!

As part of my design module for University we are required to keep a digital diary to keep a track of our work over the next semester. My diary will include creative experimentations, weekly research and homework’s. This will show weekly progress towards finishing my Major Project along with the thoughts and processes involved in this. Keep checking back each week to see what exciting stuff I have been up to!


So here it is, it really is the final countdown now! First week back to Uni is over and only 23 weeks left. Scary! I finally put my new website live this week, it’s been down for a few weeks as it was undergoing a redesign. A well overdue redesign at that, my previous website fared me well for almost 2 years and the work on it was really out of date.

I’m excited that this time my portfolio is WordPress, meaning it’s going to be a lot easier now to update my diary each week. It’s also responsive! I decided to give the Twitter Boostrap a go after seeing it in the ‘Responsive Web Design Resources‘ by Brad Frost that was tweeted by the Standardistas a couple of weeks ago. I managed to find a Twitter Boostrap WordPress Theme by 320 Press which is exactly what I needed. The documentation for Twitter Bootstrap is excellent and really helpful, especially for someone who has never dabbled in Responsive Design before. There are a huge amount of features available within it and I look forward to continue learning and exploring new things within it.

About Me

Homework one included having to write up a 50 word pen portrait, so this is what I came up with:

My name is Poppy, I’m a 21 year old IMD geek girl. I spent my placement year living in Dubai and working for Flip Media as a Junior Digital Designer. I have a passion for Web Design, Sharpies and Starbucks Frappuccinos. More specifically, White Chocolate Mocha Light Frappucinnos with whip!

I was then able to use a more condensed version of this for the copy about me in my website spotlight. I really do love Starbucks Frappuccinos and definitely became addicted to this particular one during my placement year. That is why I decided it would be interesting to count how many I actually consume on my website homepage. Although as there isn’t always a Starbucks within a 1 mile radius of me at home like there was in Dubai, I don’t think I will have as many as I had during my placement year.

Below is a photograph of me enjoying my beverage of choice at a local Starbucks in Dubai.

I also decided to come up with a more commercial 50 word pen portrait, the type that could be used in a CV. It is written in the third person and I used some of my employer placement reference to give an honest opinion of how I am. Both of my pen portraits are exactly 50 words, winning!

Poppy has a years experience in the industry working as a Junior Digital Designer for Flip Media during her placement year in Dubai, UAE. She was involved in designs and wireframes across display advertising, websites and mobile applications. Poppy displays a work ethic, attitude and skill set beyond her years.

Major Project Ideas

1. #DXB

After living in Dubai for a year I was endlessly fascinated by the country and some of the incredible feats it has achieved. I propose making a fully infographic website on Dubai with supporting feature motion typography infographic videos. There are a crazy amount of cool things in Dubai, and a lot of record breaking structures like the Burj Khalifa (tallest building in the world) and the Palm Jumeirah (palm shaped island). This means endless cool facts and figures available, but nowhere that they are all displayed attractively. So I would like to take on the challenge of making an infographic website on Dubai, including motion typography videos. Possibly videos on specific attractions like the Burj Khalifa, Burj Al Arab, Palm Jumeirah etc to give more detailed facts about them.

  • No other site where information on Dubai is displayed this way.
  • Plenty of interesting places in Dubai to show infographics for such as Burj Khalifa, Burj Al Arab, Palm Jumeirah etc.
  • Dubai has been receiving a lot more attention nationally in the past few years and 91% of the population are expats. This means a website like this could be of great interest to them and their families who want to find out more about Dubai.
  • I’ve never made a motion typography infographic video so I will have to learn how to use after effects/motion.
  • There are a huge amount of facts and figures on Dubai so I will have to collate together a large volume of information for use on the site.

2. Expats DXB

Living in Dubai for a year was a huge learning curve for me. When living in a foreign country most things are different to home, there’s a different way of looking for accommodation, different places to dine out, different places to do your shopping etc. So I propose to make a website designed to cater for people who have just moved or are about to move to Dubai. The website would have information on various topics of relevance and the best places to go in and around Dubai. Expats could post reviews on places they go and the most popular places in each category would be displayed on the homepage. It would help give expats guidance of where to go and where to avoid. It would integrate the Facebook API so users could log in using their Facebook account to like venues and post reviews.

  • 90% of Dubai’s population are expats so there is a large audience for this.
  • There aren’t any websites or resources available that display all this information in one place.
  • Possibility of App to go along with this.
  • It’s a lot of information to collate into one space, so gathering the information would be very time consuming.
  • Without user participation the site won’t go anywhere.
  • Would have to learn how to use Facebook API as I have never used it before.

3. IMD Community

When we all started IMD we hadn’t really developed some of the skills needed to complete our modules. Most of us looked for guidance online to help us, in the form of tutorials and tips and tricks. I think it would be beneficial to have a website for IMD’rs with relevant content such as tutorials and helpful links to guide students through their modules outside of class. It would be like a mini community of IMD pupils, past and present sharing helpful information to help the students along and encourage them to learn more. Would integrate the Facebook API to allow students to post information in related topic sections and get involved with the site as a whole.

  • IMD is a popular course with a lot of students that all have unique sets of skills that they could share.
  • Content would be relevant to modules to teach students valuable skills.
  • Website would be very heavily content reliant.
  • Would have to learn how to use Facebook API as I have never used it before.

5 Websites that Inspire Me

1. 52 Weeks of UX


This is a great website totally dedicated to UX (User Experience), that has lots of really useful pieces of information for anyone interested in UX. The 52 Weeks of UX authors are Joshua Porter and Joshua Brewer, they both contribute to the website weekly although there hasn’t been a new post in almost a year and the only week that is missing is Week 52. So hopefully at some point Week 52 will be published to complete the website.

2. The Big Web Show


The Big Web Show is hosted on 5by5.tv by Jeffrey Zeldman, but also features some special guests. Its an interesting web show and includes topics that IMD’rs and people in our industry would be interested in such as web publishing, art direction, content strategy, typography, web technology etc.

3. Premium Pixels


Premium Pixels  is a free creative resources site by Orman Clark.  It’s a really useful resource for designers where free resources are uploaded. These free resources include icons, images, brushes, shapes, layer styles, layered PSD’s, patterns, textures, web elements etc. They are free for use in both personal and commercial projects as long as you don’t redistribute them elsewhere.

4. .Net Magazine


I used to get the actual .Net Magazine but now I just look at the website, it really is the next best thing. They post loads of really interesting articles and tutorials that are actually really useful. At the minute they have a featured article on ’20 Common WordPress mistakes, myths and misgivings’ which is quite appropriate at the minute as I have just made my portfolio in WordPress.

5. Twitter Bootstrap


This is the documentation for Twitter Bootstrap, I have found this an extremely useful resource over the last 2 weeks and continue to find some really cool features included in this framework. For anyone who is using Twitter Bootstrap this is definitely really helpful.



After our seminar with Chris and Nik where we discussed our individual major project ideas, they decided I should combine my first and second ideas together. This means I will be combining infographics about Dubai’s facts, motion typography infographics videos about Dubai’s top sightseeing spots and useful tips for people moving to or already living in Dubai as expats about the different places to go. At the minute I am not 100% sure how this will all come together but I will continue working on ideas for this to come up with a solid plan of action of how I am going to approach this.

Nicholas Felton

This week I decided to look at some infographic artists after Chris and Nik recommended a few. The first person I researched was Nicholas Felton. Nicholas now works for Facebook as a member of the product design team. It is clear what his role in the Facebook team is and why he was seen as a great new addition to the team. He specialises in infographics, specifically getting huge amounts of information into very small areas, while still making the information displayed easily understood and attractive.

This is a big thing with Facebook Timeline, when it was introduced everything changed. When Facebook moved to timeline it began to use a very modular based design, everything is quite well spaced out and when the user scrolls through the timeline the ajax loads automatically allowing the user to scroll endlessly. This creates a no barrier effect when using Facebook and it means I find myself happily spending time looking at previous posts and stuff that isn’t even relevant. It makes time go a lot quicker and you can waste hours on it, which isn’t necessarily a good thing if you have lots of University work to be doing. Facebook now has a much cleaner structure and the modules allow everything to be separated more; photos of certain events, individual Facebook posts, Spotify playlists etc. I believe Facebook timeline was built a lot more for apps, before the new timeline Facebook was just a stream so if someone did something in Farmville it would appear in the same feed on their homepage. Now the apps are in their own modules on a users timeline and it makes them more eye catching and makes you click them to see what they are, effectively spending more time on Facebook.

Cover photos on Facebook are another big thing with timeline. I like to keep my cover photo simple and relevant to my portfolio site.

This space was specifically designed with landscape photos in mind and there is nothing I hate more than seeing someone crop a cover photo and half their face is missing or it only has part of the words if its a quote. While on placement I designed a lot of cover photos for companies as part of our social media retainers. Most of the cover photos were relevant to the Facebook page and usually a more minimalistic version of the landing page of the Facebook game they currently had on their page. I’m really looking forward to seeing what else Felton and the team come up with to improve Facebook further.

I really love Feltons annual report on himself, it holds a colossal amount of data displayed beautifully and you don’t get bored looking at it. He has managed to turn boring data into a work of art.

Tiffany Farrant

Tiffany works at JESS3 as an information design director, they have had some really big clients such as Google, Microsoft and Samsung. I found Tiffany’s portfolio while researching infographics in a ‘Top 50’ all time infographics article. I was attracted to her choice of colours and the way she presents a lot of information using circles.

One of my favourite pieces of hers has to be linking chobani greek yogurt with the olympic teams in this way. It is both effective and a has lot of logic behind it, however after reading the infographic over and over again and seeing different sections appear each time , it makes sense why she took this approach to it. It still keeps the element of the Olympics while adding the calories burned into the equation to justify how the official yogurt sponsors comes into it. It also explains the goodness of the yogurt, main facts of why you should buy it etc. It’s useful in a very prominent position on the page and a yellow box however not taking away from the infographic itself or the stars of the USA Olympic team but still getting the message across.

This is something I need to think about in my project, I have certain facts to get across for example, the Palm Jumeirah was built using 210,000,000 m3 of rock, sand and limestone. However people are also interested in knowing what can I do on such an island, why would I visit, what’s available to do.

I also really love Tiffanys work on The Social Brandspere with Jess3, it is a beautiful set of visuals on the five different ways brands can engage with their customers through social media channels. It shows how each unique technique produces a wide range of possibilities for interaction and storytelling between people and brands.

Design by Soap

Design by Soap are a UK company that specialises in infographics & SEO (quite a strange combination). They have also had big clients such as Microsoft, Yahoo, NHS and Paypal. View full size Olympics infographic.

They also did an infographic for the Olympics 2012, however using a totally different approach to Tiffanys. They are reporting on the Olympics as a whole over the years of its duration. From how many golds, male or female percentage for each country, to random Olympic facts. However I love the simplicity of it – if we take for example the section “Olympic moments” we can see that all the artwork is simply the men and women illustrations you would find usually on a toilet door. There are then elements added according to their sports. It’s quite interesting how a simple shape can be manipulated slightly and yet display a totally different outcome. These icons are used throughout the infographic and in this case I find it definitely gives the user an easier, less distracting way of taking in the information as opposed to being attracted to a beautiful personalised illustration per sport.

Arabic Infographics / Typography

As I am basing my project on an Arab country I feel that it makes sense to possibly include 1 or 2 Arabic infographics in my project.  As a non speaker of Arabic I am totally reliant on a translation however luckily this should not be an issue as I have many friends that can assist with this.

Arabic is very different from English:

  1. First obvious one being that they read from right to left
  2. It as a language consists of 28 letters, 10 of which do not exist in English
  3. It differentiates between male and female in words, verbs and sentences

I found a really cool Arabic infographic online. Check out more of these infographics.

The main one I will need to watch out for when creating the infographic is the obvious right to left difference, my infographics will have to be reversed. I would love to make my site available in Arabic also, however I realise this is a big task trying to get fonts to work etc.

As from experience of designing in Arabic it is totally switching the design, however if I could do this I think it would be a great feature and widely used. It would increase hits from Arabic speaking neighbouring countries such as Jordan, Morocco, Syria etc.

Viewport Sized Typography

Chris Coyier talks about Viewport Sized Typography, this is something I was interested in doing in my portfolio website however couldn’t quite find out how it was done until the lecture last week – using CSS3 the user can then change the fonts of the typography from big to small (auto scaling) however until now this is still not a safe solution.

It works perfectly in Chrome, breaks in Safari and Firefox and you have no hope with IE10. You could always provide a fallback for that however, that it just displays normal font size or you can use fittext.js.

It does exactly this by using JavaScript which in this case (web design at present) is a much more reliable thing until CSS3 becomes more of a prominent and permanent solution.

Kinetic Typography

Since it’s the video / website combination I have chose to go forward with, I have started researching more into kinetic typography and found this video on YouTube:

It’s quite a simple video however the main thing I liked about it was the ending, how it all combines and ends up making the Facebook F. This is something which I think I could do within my videos, possibly getting them to finish off making the building structure which i’m talking about.

I am going to start learning Adobe After Effects this week and see from there where I end up.

So what is Adobe After Effects?

Adobe After Effects is a digital motion graphics and compositing software published by Adobe Systems. Its main purpose is for film and video post-production. en.wikipedia.org/wiki/After_Effects

After Effects I think in this case is the right solution for what I want to achieve, I have found many videos and tutorials, such as this one on Premium Beat. I think using an another Adobe product with having experience of Photoshop and Illustrator is the best choice for me as opposed to trying to learn motion from scratch.

I will start learning after effects using Lynda tutorials and then follow through them fully for roughly 2 weeks then start moving onto being creative and customising my own videos and effects. The thing I find appealing about learning After Effects is that I have always had a keen interest in video and YouTube, just like web design it is constantly changing and people are making a lot of money being involved in it.

For this I will need to storyboard and design first, I think the easier the better. I think I should start simply with a famous movie quote or line and then use one font (most likely a sans-serif font) and then this will give me the basics to start. I’ll wireframe rough sketches and then start into Photoshop.

Playing with Typography

I decided to practice my typography a bit just for fun using some Steve Jobs quotes. I give myself a set of limitations for each piece of typography, I would only use one font, either all uppercase or all lowercase and the same style.

“Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.”

Quality is more important than quantity. One home run is much better than two doubles.

Stay Hungry, Stay Foolish.

My Final Major Project

#DXB (codename until I have come up with a proper name)

My Final Major Project is an infographic website about Dubai with supporting feature motion typography videos. It will mainly be aimed at tourists and expats who are new to Dubai. The website will consist of infographics displaying the facts of the main tourist spots in Dubai, along with places to go in that area, recommended spots.

I will be making the videos using Adobe After Effects and building the website using HTML, CSS, PHP and JavaScript. The website will be built using Twitter Bootstrap and managed on WordPress meaning the website will be a fully customised WordPress site and it’ll be responsive.

Technologies & Purpose

The main purpose of this site is for people to look at the interesting facts of Dubai in a unique and fun way, while also providing additional information of what to do around the area. Extremely beneficial for tourists, those new to Dubai or people visiting family in Dubai.

User Journey

So I drew up a rough user journey in Illustrator of how I see the site in my head at this stage, although it is early days so this could change slightly. I imagine it is going to work in sections either by tourist attractions, malls, transport or just the main attractions like in the User Journey. Once you have clicked on the tourist attraction you are then brought into a page all about that particular thing. So for the Burj Khalifa page it will have infographic facts, location map, link to actual website where you can book tickets for “At the Top“, a motion typography video and some info on what’s actually inside the building.

I might have to do a few different versions of user journeys over the coming weeks until I decide 100% on what the website is going to be like.

TIL – Tropical Bamboo (something I didn’t know that I do know now)

We have been given an extra task of going and finding out some information about something we never knew about, it can be absolutely anything and doesn’t have to be relevant to our major projects or the course. So I went to the library in search of a book, I was trying to find one on architecture but ended up finding one on Bamboo. The book is ‘Tropical Bamboo’ by Marcelo Villegas. The book is actually about using Bamboo as a building tool.

At first you may think, how boring, but actually the contents of this book are rather interesting. It also makes me think of tropical countries and takes away from the fact i’m actually sitting in the University library watching it rain outside. Testing out the iPhone 5 panorama feature you can see this below, although you could be mistaken for thinking it actually looks sunny outside, but I’m pretty sure that’s just the contrast between the natural light outside and the fake light in the library.

What Amazon says about this book:

Recognizing bamboo as an ideal building material, both beautiful and functional, this guide fully explores the renewable resource known as “the poor man’s wood.” A highly valued tool for artists, designers, and architects in recent years, bamboo is elegantly featured through gorgeous photographs that reveal bamboo’s many innovative architectural uses and highlight its starring role in furniture, handcrafts, and sculpture by Colombian designers.

The introduction to this book claims that Guadua Bamboo is actually the most important element in the culture of the Old Caldas, the coffee growing region in Western Central Colombia. It does many things such as shape the landscape, carry water and gets used in construction. These are all facts I never knew before. Bamboo can actually grow up to one foot in one day! After planting it can be used just 3 to 6 years later in which time it reaches its maximum strength. There are many factors that make Bamboo desirable as a low cost building material such as:

  • low cost
  • ease of transport
  • shape
  • high resistance to tension, compression & flexion
  • antiseismic properties

So now moving on to Architecture and the Future of Bamboo. Bamboo is a material which suffers no change on being removed from where it is grown unlike normal plants, trees etc other than the minimal harm it may sustain when the prickles are removed. Bamboo looks smooth and varnished without any treatment and requires no intermediate processes and there is no waste through sawing or cutting. This makes bamboo a very eco friendly building material .

Fun Fact

“Its weight-resistance ratio is matched only by that of space age metal alloys.”

Marcello Villegas (2007). Tropical Bamboo. Villegas Editores.

Bamboo has many different uses in building, it can be used as structural supports due to the sheer strength of the material, as seen below.

It is used to make bridges. The bridges below are rudimentary bridges with a floor made of bamboo canes placed lengthwise, bamboo crosspieces and a bamboo handrail.

Bamboo aqueducts used to be very common but are eventually disappearing because they are not very efficient. They can carry water over large distances using split pieces of bamboo with the inside layer removed and are held up by forked supports.

I also looked at Bamboo hoppers, these are simple structure built on coffee farms. They are used to gather coffee and load it into vehicles. Hoppers are all built according to their different topical requirements.

I can safely say that I learnt many things about Bamboo plants which I never knew before. So if I’m ever in a pub quiz and there’s a question about Bamboo, I might be one of those random people that knows the answer to a question which leaves everyone else scratching their heads.



After discussing my Major Project further with Nik and Gabriel in the tutorial they expressed concern that the website could possibly become too static. The website would be highly visual so they suggested the possibility of integrating an API based on the location/area of the tourist spot. So I have spent this week looking into various API’s and ways to make my website more dynamic.

Foursquare API

Firstly I looked into the Foursquare API, as an avid user of Foursquare I love it and think integrating it into my Major Project would be great. They have really good documentation available online for their API with tutorials and samples available for some of the main features.

Explore Tips

A possible use of this could be having a map of Dubai, then based on your location in Dubai use the ‘Explore Tips’ feature. This will then display peoples tips near the area of the attraction. This could help influence peoples decisions on where to go or where not to go if the tips are negative.

So if the user starts off at a default location of Dubai Mall then it will display tips for this area such as “Check out the Dubai fountain. There’s a show every 20 minutes.” However this could be misleading as anyone can post a tip and from experience I know this tip is incorrect and they actually display every 30 minutes.

How many visits?

There are many other features which I think could prove useful in the Foursquare API such as ‘how many visits’. This tells the users how many times they have been at a particular spot or specific chain of stores. When I ask how many Starbucks I have been to it displays 17 and lists the locations.

What could I use this for in my project? Most likely to display the spots of interest and how many people have visited this spot, for example Dubai Mall, 12,687 people have been there. This is to display a real number of how popular this location is and they can decide whether they want to visit it or not. I would also like to include the ‘people like this’ option but I can’t seem to find it in the API options. If I could find it it would be interesting to link this to a star rating system for the specific locations.

Explore Trending

I really like this feature, it uses  venue trending to find and display trending locations near a point. So I could have this set up for locations near the Burj Khalifa or Palm Jumeirah for example. This will show visitors the most popular locations at that point in time, displaying how many people are at each location.

Again this will be like a there and then sort of review for people visiting the site as they can tell the most popular places at that time and help influence their decision on where to go.


This is another cool use of the Foursquare API, using your venue history to show how many venues matching a particular criteria the user has been to. This could be used to display a list of top spots to visit in Dubai, and users can go along and see which spots they have visited out of the recommended list.

Google API’s

An obvious choice for adding interactivity and locations to my website is looking into some of the available Google API’s . I have decided to have a look at Google Maps and Google Charts which will be great to display my infographics. I am going to focus on the charts this week and have a look at maps in next weeks diary.

Google Charts API Prototype

Since I will be using a lot of infographics throughout my final major project I thought it might be an idea to have a look into the Google Chart API.

The Google Chart API is not commonly used in that many websites that I have seen, however I came across it when working on my placement and find it to still be a very powerful tool when displaying data.

I decided to just experiment with a basic Pie Chart to start. To do this I used the navigation on the left hand side of the website and clicked on the “Examples and Tools” – “Playground”, this then opened the testing ground of the API. After this I then found the graph I wanted to use I originally was looking for a donut graph as it was going to be as simple as possible however this option was not available. Therefore I selected pie chart and it loaded a pie bar chart with the script.

I then changed the code according to my data. I decided to keep it as simple as possible. So this was the original piece of code.

// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]

Which I changed to this to display the data I was going to use.

// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Number of Students'],
['Girls', 27],
['Guys', 47]

After this then I then hit the run code button and was able to view my graph straight away with my data entered, I then selected the Edit HTML button and was able to copy and paste the code directly into my file.

After this (Step 1) I then decided to start customising the chart to look more like I wanted it to.  For this I looked at the documentation for the pie charts  after reading through it a few times it was clear to pass the variable was through adding this:

var options = {
title: 'My Daily Activities'
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);

In this page there was then the configuration options further on down, I then went through these and made my changes accordingly. This was a very tedious process with a lot of back and forth testing as every call has a different way of calling the variables and doesn’t follow a very common pattern. However I eventually got there and achieved what I wished which can be seen in (Step 2).

var options = {
colors: ['#ff5757', '#3190CC',],
backgroundColor: 'transparent',
legend: 'none',

After this I then wasn’t 100% with the graph still, I had spent a lot of time trying to position the title and it simply wasn’t happening so in (Step 3) I decided to add it statically and try something completely different. I wanted a donut chart from the start and to achieve this I could only see one way feasible. Adding a circle image and position;absolute it over the div itself. To achieve this I simply wrapped the chart in a relative div and cutout a circle png of my background of website (with pattern) then positioned it accordingly I think it works quite well and I am very happy for my first time experimenting with the API at the results. You can check out my Google Charts by clicking image below.

Instagram API

I was thinking of other ways to make my project more dynamic, so I came up with another use of an API. If I could have photos tagged at the relevant location displaying on the appropriate page I thought that would be a pretty cool feature.

I would be able to achieve this by using the ‘Location Subscription’ feature in the instagram API. With a location subscription, this allows you to receive updates every time someone posts a photo tagged with a specific Intsagram location e.g. Burj Khalifa. In this case, I would change object to “location” and object_id to the ID of the location to which you’d like to subscribe.

curl -F 'client_id=CLIENT-ID' \
-F 'client_secret=CLIENT-SECRET' \
-F 'object=location' \
-F 'aspect=media' \
-F 'object_id=1257285' \
-F 'callback_url=http://YOUR-CALLBACK/URL'

Map Generator Prototype

I came across this cool map generator that allows you to make a map of custom size and add a marker with some custom text.

I played around with this a bit testing out the features. Then decided to customise my own small map to see if it would be useful for my project. When I added the map to my page it seems quite glitchy around the marker, I’m not sure whats wrong with it but I couldn’t fix it.

As you can see the marker image has a glitch on it that looks really bad. Therefore I think I will be avoiding using this tool unless somehow it gets fixed, but I have tried a few different things and it still looks the same.

Similar Sites in Dubai

So we were asked to take a look at similar sites to our major project ideas, any main competitors that we may have for our websites. In Dubai I have not found any websites that will have all the same features I am hoping to achieve, but there are some really great websites out there. Some are more well known in Dubai than others.

1. Dubizzle

Dubizzle is a classifieds website which also has forums. You can find absolutely everything on Dubizzle, from apartments to furniture to cars to jobs. It really is a one stop shop. It’s really popular in Dubai as that is where it originated but it is actually branching out now across the MENA region. Obviously this website is different from what I am creating as its a classifieds site for buying and selling, I won’t be buying or selling anything on my website. It also has no information about Dubai in general. Although I love this website and find the name super catchy, I also really like their logo.

2. Time Out Dubai

TimeOut is pretty huge site in Dubai, it is the highest selling magazine of the TimeOut franchise globally and is published in Dubai by ITP Publishing. Their website is equally as informative in which a huge range of information on bars, clubs, films, hotels, nightlife, restaurants, shopping  can be found. Personally I find it to be more of a review website which posts features on the top clubs in Dubai, top 5 pizzerias etc as apposed to a fact finding website. It covers all of Dubai and a user can search by area to see which restaurants are available to them. This is where my project differs I will be providing interesting facts about the area as well as offering area based solutions for the users. It’s a hugely popular website with a massive fan base, mainly its target audience are the expats in Dubai.

3. My Metro Talk

This is a newly released website which is still in beta, but it is extremely similar to Time Out Dubai. The thing that differs slightly is it actually has a “Live & Work” section which is similar to my second major project idea but in a slightly simpler, less in depth format. It gives information on working in dubai, immigration and visas, cost of living, where to live, the job market etc. However the information is laid out in a very boring plain text fashion, there are no images or infographics to support the text and make it more exciting.

4. My Dubai My City

This website is a video guide to Dubai, where videos are posted on different channels on different things in Dubai. There is a home channel, food channel, say it in Arabic channel and many more. I really love their intro to all of their videos how their logo comes to life. I think this is a really great site, but again doesn’t contain any nicely laid out facts about Dubai, it is all videos mostly aimed at expats.

Engaging the Audience

The audience will be engaged in the website through the social factor. Having an instagram feed will get people involved in looking through the pictures at each location and encourage people to tag instagrams in this area. Having information displayed from Foursquare as well will encourage people to check in at these locations to view the tips and help increase the number of visitors at each location. The website will have a Twitter account and I will try post facts on it everyday linking to the website to get people encouraged to go look and check out the rest of the website.

Unique Selling Point

My Major Project is a collaboration of visual digestible facts of the city of Dubai, all in one place. The supporting motion typography videos and integration of API’s makes this website more unique than the current similar websites out there.


I am really loving this infographic that is now on the new Ebay site at the minute, I love the colours and simplicity of it and feel it puts across the statistics in a really enjoyable way to read and very aesthetically pleasing.

As I write this research today (10/10/2012), Ebay have just released a new logo so I thought I would write a bit about it. As a regular user of Ebay I don’t understand why they would feel the need to get rid of a perfectly simple logo which they already had and has been globally recognised for years. Now they have fallen into the same logo update approach as other company’s such as Microsoft with a simple lowercase sans-serif font. The reasoning behind this big change by Ebay was:

“The changes we’re making reflect the new eBay and our evolution as a marketplace that connects the world to the things they need and love.”

This is understandable but you don’t need to jump on the common logo bandwagon Ebay. Personally I think the old logo was much better and had more character, the new logo is far too plain now, although at least they stuck with the same colour scheme.


Microsoft released their new logo in August. To me it is a clean and sophisticated logo, so they have achieved what they wanted however I don’t like the font they chose.

I think the ‘ft’ in Microsoft sits weird and the kerning is completely different throughout the word. To me i see it like M-I-C-ROS-FT with considerably different spaces between each letter. Bringing back the squares in the logo design I don’t mind at all as this will always be “Microsoft”, and the fact now its physically broken down into four squares I think is better. They have also explained what each colour square means now; green is for Xbox, yellow is for Bing, Blue is for Windows Operating System and Red is for windows phone/office.

I found this link on Dribbble  which I guess portrays how other designers see the redesign of the logo as well, but then its easy to criticise when not involved in the project. From placement if I learned anything from working with clients it is that everyone has a different opinion and they are entitled to that. The way I see something can be completely different to the way the client is visualising it in their head, so we need to go with it in order to achieve something that meets their needs.

Microsoft have recently updated their website to be responsive. For this project they partnered with the company Paravel, however for some bizarre reason they have only released their homepage to be like this. Meaning that if a user clicks on a link they are taken straight back to the old designs section page. This baffles me because surely a big company like Microsoft would like their website to be consistent for users. I can understand how a massive project it would be to change everything to be responsive for such a site but it just seems like the wrong approach to just change the homepage.

After reflection though you have to give Microsoft some credit for once having something over Apple as their website still isn’t responsive at all. This is a step forward in technology for Microsoft and possibly will influence a lot of bigger companies to do the same. Apple have many variations of their site through Apple Store applications / web apps etc so it is not completely beating the main rivals just yet, but they are definitely heading in the right direction.

T-Shirt Design

This week I have decided to talk about some of the tshirt designers / websites that I view on a regular basis, sometimes for inspiration some other times just for fun and to see if there’s anything worthy of purchasing.


I came across qwertee about 6 months ago, it is a website based in the Republic of Ireland that allows the users to decide what t-shirts should be made through a voting system. Any designer can contribute and upload their images then Qwertee will put you into the drafting process in which it relies off of votes to decide whether your t-shirt will get created or not.

The t-shirts submitted are usually all very different and can range fom popular items such as Doctor Who and Super Mario brothers  to simple designs such as an escape key one.

I love cool t-shirt designs and would regularly buy novelty t-shirts for friends birthdays and Christmas. Luckily Qwertee allows me to have a full variation, however of course most of the tshirts featured require the receiver to be a slight “geek” to appreciate its goodness. Recently on the site they released this t-shirt;

I love this t-shirt as I love Thor (and anything marvel movie related) but what interested me most was obviously taking a very symbolic logo and managing to keep that effect of tying the two together. I thought this design worked very well and decided to try something similar for fun and related to my Major Project.

  1. I found the font firstly called “Waltograph” on this site – Da Font
  2. Then I opened up illustrator and created a new background with the blue colour
  3. I then imported a vector of the Burj Khalifa from a catalogue of vector images I have purchased (which are safe to use in commercial use)
  4. I then coloured the building accordingly and added the text with a blue outer stroke to it
  5. Then I created two circles and overlayed them offsetting one slightly below the other
  6. Using the pathfinder tool and cut the two circles leaving the semi circle to place behind my vector
  7. I then went to graphicriver.net and purchased this T-Shirt mockup
  8. Finally I opened the newly purchased PSD and then added the illustrator vector object to the design and changed the colour of the shirt to reflect my design.

And this is how they turned out.

Glenn Jones

I found the designer Glenn Jones firstly through dribbble where he goes under the name Glennz. Glenn is a freelance designer living in New Zealand that used to submit his T-shirt designs to Threadless. Since the great success that he had from that he has now opened up his own online business, Glennz Tees.

The first shot that I ever seen of Glenns that attracted me to his work was on the popular page of Dribbble. The shot was a lego severed arm t-shirt. My brother had recently been experimenting with lego men for his 365day photography project and this interested me to find out more about the design and the illustrator.

Glenn keeps releasing new stuff nearly everyday at times and I keep checking back on his work each time i’m on Dribbble. He has a very creative mindset and somehow manages to combine two things that may or not be connected in phrases or just makes them relevant to each other in some way. His choice of colours are very vibrant and a lot of focus is put into the shading / lighting of his illustrations. I also really enjoy watching his creation process like this.

I have taken a few examples of his work just to show my interest and why.

This one for example is portraying piracy for illegal downloads by displaying Captian Hook’s hook and creating the end of it to be a memory stick pen. Its very fun yet creative and it makes a perfect t-shirt as words aren’t needed to display what hes trying to explain.

This image of course replicates an American corn dog snack however he uses a real dog, but it’s a sausage dog plus he covers it what appears to be the batter that an original corn dog is covered in. Then to finish it he adds the ketchup to the top. As a non American and a person that has never actually tried corn dogs before I was still able to get what this was even if the image did not have a title.

He then somehow manages to take the same idea of a hot dog and makes it into a cold dog creating it to look like an ice cream / lolly pop, which is so awesome and completely different.

United Pixelworkers

I purchased my first United Pixelworkers t-shirt back in October 2011. It was the Meagan Fisher print of Nightowls. I always find I work much better at night, especially on University work and drink coffee to stay up so this t-shirt was perfect for me.

Meagan and the other designers that are chose to represent Pixel Workers designers are of a very high standard and this reflects greatly in their company mission I feel to achieve the best product for the consumer.

Since there are many designers in the Pixel Workers team I decided instead of looking at one in particular I would look at the website and purchasing process instead. On hitting the homepage of the newly redesigned site your can straight away see the companies logo (which brings you home) and the shopping cart is on the right hand side, which has a elegant slide effect when hovering the logo it slides left to show you how many items you have in the cart. The cart is also in a position: fixed; css style and follows the user when scrolling.

It is a fully responsive site and straight away your viewing the t-shirts they have for sale directly from the homepage. It’s a very modular website based on what looks like a 12 column grid. The top 2 t-shirts they want to sell have a countdown until when they will end and a bigger promotion spot spanning over 8 columns in width – 4 a piece. Then it features the blog and of course a very important prominent spot for the newsletter signup. This is important for such a website as their stock regularly changes and the consumer might not be interested in some of their products today or this week however in upcoming weeks they may get a sale from that person. It then continues on after that with all the available t-shirts for sale in a 6 per row styling.

After selecting the t-shirt I wish to purchase I am then hit with the product page with jquery fading everything into place accordingly. If a size isn’t available it wont fill the bar for that specific button. The buy process is pretty straight forward just click on the size I wish and add to cart then my cart opens up and adds the product which I then can go through and purchase from there.

Since the site is responsive it auto scales everything and rearranges it for mobile however the same usability of the site is still there so if you have had made a purchase on a laptop before, buying on a mobile will be no different. I think this is pretty unique as it’s a completely different purchase however unlike a lot of sites I am more than happy to just purchase it on my iPhone as the process is the same.

So why is the website such a hit in my opinion:

  • Credibility – the site looks professional yet still taking that creative / designer side which its target audience is.
  • Colours – the colour choices throughout the website reflects both the branding and the charisma of the website, its errors in form validation are both informative and sticking with the brand.
  • The buying process is literally 5 small easy steps which is great for a user, can be seen below:


During our lecture paper prototyping was the main focus, allowing the thoughts in our mind to spill onto a page through the use of a Sharpie. We were put into groups of three and given 7 minutes each to come up with a mindmap related to your project to see where the ideas would take you. I got my Sharpie toolbox ready, I love my Sharpies, my first experience of using them was when I bought a 12 pack in first year and used them for DES to create wireframes and logo sketches etc. Since then I have added 4 more to my collection and if you can’t tell from my website, i’m a major Sharpie fan.

Below is the mindmap we came up with in 7 minutes. From heat to crescent moons and expensive cars, I enjoyed doodling some pictures on the mindmap to help visualise the words and try get more ideas.

The next task we had was 6UP, developing 6 different designs for a page on your website. I decided I would try out some wireframes for the homepage of my Major Project, more so focusing on the different ways the spotlight section will be. Will it be a map or will it be an infographic as well?

I annotated these wireframes to give a better idea of how the site could not only look but handle content. At this point in time I’m still not fully settled in my head of a certain way this website should look or all of what content I will use. This could very well change completely when it comes to actually designing my site, but for these early stages I think this is fine.

I then decided that I would refine my wireframes more, giving a clearer picture of how possible content could be displayed. Again these are by no means final wireframes for the homepage. I created the detailed wireframes in Omnigraffle, a program I learned to use while on placement. I created these quick representations of each of my sketches.

In this first wireframe the main focus is the map, it has pins dropped at all the points where there is information available about the location. When you click on a pin a tool tip appears with name of spot, address and a CTA to find out more about it. This will then take the user to the detailed page about the particular spot. There is a quick facts section below the spotlight, this could be dynamically related to the current selection on the map or just generic. Using the Foursquare API I have come up with a few different ways to utilise the information available there to display the top 3 check in locations out of the locations on the map, the top tips and closest airport.

The second wireframe uses the same idea of having a map as the main feature in the spotlight area with pins marked at the locations you can find out more about. Below this the 3 hot spots are listed and by clicking on them it would highlight the selected spot on the map so you can see where abouts it actually is. Also in the navigation of the wireframes I have added an Arabic language switcher as I will need this if I decide to make my website dual language, I have also given three buttons to link to Facebook, Twitter and email. The homepage features a generic Dubai infographic alongside top tips.

This layout is different and utilises the spotlight area with infographics, this could be a slider where there are 3 different options of infographics on specific areas or generics about Dubai. Again it follows the same layout with the header and displays top tips, hot spots and closest airport in the content. I have also incorporated an Instagram feed into this one, It could show images using a specific hashtag or location. This means all images tagged #DXB or #Dubai would show up here, It could also be specific to a location which is most likely what I will use on the inner pages so all images tagged to that location show up.

This wireframe is a slighty rearranged version of previous ones. Featuring an infographic in the spotlight and then top tips, hot spots and closest airport. An instagram feed appears underneath the spotlight image showing pictures with a certain hashtag or location.

This option steps away from the full screen image and instead there is a slightly smaller spotlight infographic area with an Instagram carousel feed below it. The footers in these wires are not fully complete, but eventually when I devise how my site is going to be exactly it will have a sitemap in the footer along with copyright and a Facebook like and Twitter follow button.

In this option the majority of the content is stripped and the Google map plays a bigger role. It displays all the locations on the map and you can click on them to view a tool tip then click through to the page to find out more information and view the other information such as hot spots, top tips etc. This also incorporates a carousel Instagram feed.

Above is my series of functional wireframes which outlines a basic user journey at this stage. It shows landing on the homepage, then selecting a location, viewing all the information on that page about the location and then clicking through to another location on the related locations section at the bottom of that page.

Comparing Building a House to Building a Website

Every website design follows a certain process before creation and this is one of the facts in which I took away from the paper prototyping workshop with Chris and Nik.

I am going to look at the process of making a website in terms of building a house, I feel it’s the most simple example to give to a client as everyone has a general idea of how this process happens.

Devise – The House’s Foundations

Without a doubt is the most important part of any project before creation. A website needs to be structured, this is where the paper prototyping and ideas start coming in on how to make the project. Numerous stages of questions are asked through this process.

  • Target audience, who will use my website?
  • What makes my site different from other websites and competitors? Unique selling point?
  • What content will my website contain, this then can be divided into sections and subsections etc.
  • Brainstorming and mind mapping  to get some different ideas.
  • Wireframes of the processes.

Design – The House’s Architecture & Measurements

The design then takes the information that it received in the research process of the build and allows it to be taken to the next level. After the design process has been completed the client should then be happy with their product and how it looks.

  • Moving the static wireframes into Adobe Photoshop and making them into an actual design.
  • Process of changes with the designer and the client to make sure they are happy with the product that is being created for them.

Development – The House being built

Once the design process is complete the design is then ready to be taken forward to start the build process. This is done by:

  • Frontend development (HTML, CSS, JQuery)
  • Backend development (PHP, Python, Databases)
  • Testing process should be constantly done throughout this process, this also includes browser testing and this will be especially aimed at Internet Explorer as the users of my site in Dubai will have an estimated 60% IE 8+ users.
  • Adding content to the website
  • Setting up hosting.

Push Live – Housewarming Party

Now the site is complete its important to check a few final things as soon as the launch is a reality.

  • Push to live server.
  • Check links are all working correctly still when live, users will decrease if there are broken links throughout site.
  • More testing try all processes that the website may have, for example sign up process on live server.
  • Enjoy it!

This of course is a very basic representation of the breakdown of this process and there are many issues that will come into play for making this process different, however it gives a general outline.


I have used the website Pinterest for a few months now, I find it very interesting and a very valuable tool for finding everything from recipes to designer shoes. Its layout has started quite a trend within the design community and it brings back the module website look and feel.

More recently I have been using it to aid in my ideas and creativeness for both my portfolio and other things relevant to university. I came across this link in which Maggie has made a very valuable collection of mindmapping examples.

With mindmapping there are hundreds of different approaches in which to do it. I find this the most interesting part of it, we have been told in university to use sharpies which I love however as long as the creativeness is there and the ideas are coming it doesn’t quite matter in which format you present it.

If I had to pick my favourite out of the list that she has put together it would have to be this one.

The reasons I love this mindmap are:

  • Love the use of the colouring pencils / felt tips combination.
  • Not one bit of the design is blank, they have used the full space.
  • It has different scenery throughout it for example ice in top left and grass in bottom right.
  • Throughout the flow process it interlinks into other sections.
  • Illustrations are clear and very subtle keeping the text the main focus.

Random Inspiration of the Week

I came across this version of Taylor Swifts song “We Are Never Getting Back Together”.

It uses stop motion animation and is very focused on typography. I personally find it to be a very unique video and the fact that she created 2 completely different videos for the same song is very unique. As most of the text is hand drawn its quite interesting to see the text being coloured in as it goes along, another reason why I think this video was created was to allow the viewers to have the words available to sing along as opposed to a ruined karaoke approach.

I tried researching more into how long the production of the video took however was unable to find anything on this matter, but I will keep looking and update this post if I come across anything.

Eva Lotta Lamm

Eva is User experience designer based in London working for the Google Android team. She has worked for some interesting companies along the way including Skype and Yahoo.

She has a very creative style when mind mapping, integrating all elements and adding associated icons / custom drawings to support her findings. This then encourages more development of an idea and helps her create more ideas opening up realisation of the idea.

This piece of Eva’s particularly interested me as it contains different languages (she can speak French, English and German) however for this particular project she has some Arabic in her findings.

I am led to believe by interrupting the image myself that the piece that she is mind mapping about is the transition of moving the BBC News in English to an Arabic version.

1. The project seems to be upgrading the current BBC news website to integrating over 27 languages in the final outcome. Arabic / Persian / Urdu are 3 of which she will be involved with for this piece of the project.

2. Discussion of a completely custom font called ‘Nassim’ is discussed in the top right of the image after a quick look on BBC website for it you can see when inpecting element with firebug that actually they have used it in this case.

font-family: BBCNassim, arial, verdana, sans-serif;

3. The creation of the BBC news slider which is used today throughout their site,  however in the mind mapping she said to possibly it would lean more towards the solution of using pagination numbers, but on the live site they have used squares in the end. However in the Arabic version of the website they use numbers which can be seen here. This is one thing I learnt a lot about when on my placement the Middle East especially requires special design traits as they are almost quite backwards on the new and upcoming technologies. A simple example of this is most users from UK will know that usually 90% of logos on a website when clicked will return you to homepage however in the middle east this unfortunately isn’t a common thing they have implemented / come to realise.

4.  “Localization is more than just translating content but it is about carefully identifying the needs of the different audiences needs and adapting the design”

I typed this quote out from the mind-map as I thought it was very important for me in particular and my project. As I want to create the content possibly also in Arabic it will be a major plus to my project itself and the sites successfulness. I have many different factors to look at to achieve this.

  • Translations must be accurate and readable to all Arabic speakers.
  • Right to left text.
  • Simple CSS change text-direction:RTL;
  • Flipping the design and functionality.
  • This will include sliders to act in the opposite direction.
  • Content in Arabic needs to move.
  • Typography is going to be a major difference and Arabic might not be supported in custom typekit fonts.

5.  The column layout creating a 3 column grid and already defining font sizes for headings. I was hoping that possibly after firebugging the current sizes they would be 100% accurate however they weren’t exactly as she had estimated but very close.

Main Heading : Arial: 36px (Actual – 32px)
Sub Heading: Arial: 24px (Actual – 24px)


During my placement I was shown the true value of this small addon to Firefox, I never really knew about it before and more so how much it would change my development of websites.

When creating a website now the main feature I will use of firebug is the ability to inspect HTML and I will edit in the browser live using firebug. It makes the process a lot quicker for example if I need to change the padding on a div or the margin I will add the class to the HTML and CSS files and upload to the server after this I will then inspect the element according to what I want to change, then I will double tap the CSS class and start adding my CSS attributes accordingly. This then is reflected directly on the website. After I am happy with how it looks i’ll then copy the full CSS class and paste it into the document file and upload to the site.

Working like this takes away the unnecessary refreshing saving every 20 seconds to see the latest change (which is what I used to do) and allows me to make sure it is correct from the very start of these changes.

Another major feature of firebug I also use is the console tab. This is used for Javascript & jQuery. To use this you open the console tab and refresh the browser it will then show / load the jQuery errors into the tab. It is the easiest way I have found to decipher where a piece of code is conflicting with another. Usually the jQuery errors of my smaller sites have been simple things like a call has been incorrect, simple stuff which also a proper text editor like coda can pick up on. However for bigger sites you can also run commands in this tab and test new features.

For creating new jQuery features I would quite often use JS Fiddle. It’s simple and free to use, plus if I need help with anything I can easily link it to someone to help or post on a site like stack overflow. The only downfall I have with it is at times its hard to visualise how it would look in my website at that current point in time, but like all programming it’s more of a theory works or not process.


I came across Raphaël a few days ago and was very interested in how it would aid me for my project. It is a Javascript library that simplifies how vectors on the web work. It’s goal is to help make vector images and interactivity cross compatible.

The library uses Scalable Vector Graphics (SVG), a widely used royalty free graphics format which was created and is still maintained by W3.  SVGs can be placed on the web as well as opened and fully editable in Adobe Illustrator.

As I will be doing a lot of visual work with images and infographics I imagine I would be able to use it quite a lot. It also gives a lot of freedom to integrate cooler features into my site such as this.

My main idea at the moment is to have a map on my homepage this then could aid with this and supplement text however styling would have to be very different. But I could begin with this SVG file and see where I end up from there.

It would definitely add great interactivity to the site and not allow it to be as static as Chris and Nik explained they had issues with before.

Creative Experimentation

This was one of the recent popular shots on dribbble in July that I had bookmarked for university as I thought might be aiming towards infographics, and it’s a great example. I really love what Anton has done with it, creating a full 3D effect but not taking away from the information which is clearly laid out with vivid colours against suitable backgrounds so they stand out but are still inline with the style of the full graphic which in this case is farm related.

3D Map Generator

So then I thought to myself, would I be able to do anything similar to this or get close. Unfortunately I do not have much experience with 3D modeling so this wasn’t a solution I then was searching graphic river one day and came across a useful resource. Now I am not sure if I will be going ahead with this idea on my project however I feel its still worthwhile testing.

I picked this version for two reasons:

  • It has the different textures of land, the other versions are all green and after living in Dubai for 1 year I can assure you there is not much green about.
  • If I was using it as a main feature I would have all the key areas highlighted on the map to be clicked then the user could visit that part of the site accordingly.

I bought and downloaded the pack and then started playing with the settings in Photoshop this is what I came up with. I created a map if the UAE with points plotted on it to create a route.

I then created the Palm Jumeirah and plotted the monorail line which runs straight down the Palm.


Matt Stevens

Matt Stevens is from North Carolina and specializes in brand identity along with illustration. He has worked with some clients such as Nickelodeon, Dunkin Donuts and Vulture magazine.

Vulture magazine asked Matt  to create a collection of badges / avatars to accompany one of their recent articles covering the top 25 most devoted fanbase  This scoring of the article is based on many factors:

  • Facebook followers
  • Twitter followers
  • Main Hangouts (Tv Broadcasted Channels)
  • Editors influence

The results were quite interesting and there is a few expected results “Lady Gaga, Justin Bieber and Star Wars”. However the number one spot was taken by the more recent 2011 Game of Thrones series. Matt took a very creative approach to the task and designed it using the theme of pop art. It is a very unique set of badges and ill quickly go into talking about 2 of my favourites.


I have seen all of the Twilight movies however I wouldn’t consider myself a hardcore fan. I chose this badge as I think the elements that have been introduced are very subtle yet totally fit the purpose of the design.

As everyone knows Twilight is about vampires and wolves with vampires being the main storyline, it’s about love and lust from the 3 main characters and the badge has captured this all straight away.

  • Created in a love heart to show the love triangle.
  • Stake through the heart as everyone knows this is the traditional way of killing a vampire.
  • The subtle fangs hanging from the I and the G lettering.

These 3 elements combine the full storyline of the movie in one and even if you didn’t know that much about the movies in the first place it still has the stake etc which is a traditional thing and spots of blood so possibly a viewer might still be able to guess its reasoning.

Game of Thrones

Unlike the Twilight badge the Game of Thrones one has a different approach completely to it. The scene that is showed on the badge is Ned Stark with his head being chopped off and this scene doesn’t occur till nearing the end of the first season (episode 10 to be accurate).

So this effectively is a spoiler for anyone that has not seen the seasons as it is quite a big deal. However the books of Game of Thrones have been out for a long time and this is where a lot of their fanbase is coming from I imagine, so giving away something in the first season when the books are complete and the series is moving onto the 3rd season isn’t really an issue.

The design of the badge blends in nicely with the set and the illustration of the character is very close to the character Ned from the show, it’s a very accurate representation of him. Instead of blood / axes for the beheading process he has chose to split the body from the head and add a dashed line.

This dashed line of course represents separation however if you think about it further it also traditionally represents the “cut along the dotted line”  which we see regularly in our normal lives.

The final thing that I have noticed is that the shape of the badge itself is a circular shape and it features a head on it so I would tend to argue that perhaps Matt was aiming on making it have the effect of being a coin. This then would also come into the title “Game of Thrones” as royalty are usually the only people with their head on coins.

I feel the badge represents the brand and the series of the show very well and all the smaller elements combined really work effectively and to some up what I have found above simply into 3 bullet points would be .

  • Be-headed character of Ned stark
  • Dashed line representing cut
  • Shaped like a Coin effect

Google Maps API

This week I decided to look into the Google Maps API in more detail. Google have created a very usable website for developers to use when looking at what way they would like to use the API.

They have 6 variations of the API to use, however I already have a general idea of how I would use the API so I can stroke out the need for :

  • Base Maps
  • Satellite
  • Street View
  • Places
  • Routing
  • Data Visualisation

The reason I do not need the ones I have stroked out is simple, the maps in the Dubai area are very limited and street view doesn’t exist. The satellites are not put over the city regularly to justify a clear satellite view. The base maps and places will however work in my situation.

Base maps

This feature is quite static without markers on the map it is quite useless, however always handy to scroll around and see how big the certain area is. The only circumstance I can thing of using the base maps for is for a main header background and then overlay information over it.

  • A possible slider containing Info-graphics
  • Search box to make it more useable “search for a landmark” and have autofill

However this does not really appeal to me much as I need the markers to be interactive or clickable and even if I was to position absolute them into their correct locations when user first hits the screen this would be useless when they start moving the map around.


Places is effectively if I decide to use the API which road ill go down as you can see from the screenshot it allows the user to plot the locations on the map. Then with this I will then plot all the locations that I am going to do the information on; Dubai mall, Burj Khalifa etc .

To make this work for my project I would have to link the title and information text to a separate page in which it would then display all the information for that particular piece. I couldn’t unfortunately see a way of doing this within the API itself so started to google I came across this solution with someone having the same issue on Stack Overflow.

var points = [
    ['name1', 59.9362384705039, 30.19232525792222, 12, 'www.google.com'],
    ['name2', 59.941412822085645, 30.263564729357767, 11, 'www.amazon.com'],
    ['name3', 59.939177197629455, 30.273554411974955, 10, 'www.stackoverflow.com']

This will be perfect as all I need to do is correspond the latitude and longitude with the actual locations. To do this I will use the website iTouchMap and then just enter the address I require for example if I do “Dubai Mall ” it shows its Latitude as 25.196185 and longitude as 55.280487 with this I can then simply mockup all the locations I need and map them accordingly throughout my map.

It will look something like this:
[dubaimall, 25.196185, 25.196185, 'www.dxb.com/dubai-mall' <http://www.dxb.com/dubai-mall'>],

I feel this would be extremely useful for the user navigating around the site so even if I do not feature it on the main header of the page I will possibly implement it into the site as a footer or a block in the sidebar dependant on size. I could also build it into the article page of each landmark focusing on the location from current then they can carry on looking around.



During this weeks lecture we learnt about a content first approach, meaning looking at the actual real life content that will be included in your website from the start. Don’t just stick dummy text in because it’s not the same as working with real content. When I created more detailed versions of my wireframes last week I tried to steer clear of dummy text and put in some real content that I might include in my website.

Ban Lorem Ipsum

Ever since placement I have been told to use real content if the client has provided it, so hearing this in the lecture was not a surprise to me just a friendly reminder. When designing websites if I don’t have any real content and require some dummy text I tend to use Fillerati. I use this because its the closest to content you can get if you don’t have any when designing, you can just choose paragraphs and slide the slider to get the required amount, then copy and paste directly into the html with the correct markup already added.

Alice replied eagerly, for she was always ready to talk about her pet: ‘Dinah’s our cat. And she’s such a capital one for catching mice you can’t think! And oh, I wish you could see her after the birds! Why, she’ll eat a little bird as soon as look at it!’

Unfortunately there is nothing like real data, especially for my project. For the infographics I need everything to be completely accurate and customise the size of the fonts based on this so it all aligns correctly.

Type Cast App

Last week was the release of the official Public Beta for typecast and I honestly could not be happier! A lot of my time is spent in Photoshop with fonts playing with them, adding shadows, creating effects, tweaking the kerning and then I have to repeat the whole same thing in the browser after that. Now that isn’t even the worse part, the worst part is that typekit.com does not already allow the downloading of fonts so that you can then use in Photoshop to design these effects, to then repeat in the browser. So now that the typecast app has released this and it is compatible with typekits fonts, it is just perfect.

Once I signed up I instantly started playing with the fonts, I have the portfolio version of typekit so this allows me access to all of the fonts, just not for websites with a massive amount of page views. Typecast combines all fonts from;

  • Google
  • Typekit
  • FontDeck

This gives a great collection of variety for the user to play with however as I already have a paid subscription to typekit and Google is free to use, these two are most likely where my choices will lie.

Since this app has been released it really has changed my thought process of how I will start to go about designing now. It almost leaves Photoshop to the bare minimum when it comes to fonts. With all the CSS3 generators out there for font effects, it seems redundant to use Photoshop when dealing with typography now, however its layout will still be needed.

The way I see my design process with fonts will be as follows;

  • Typekit – find interesting fonts.
  • Typecast app – implement nice fonts and see if they are appropriate.
  • Add to my own CSS / HTML documents.
  • Upload to server / real life environment sandbox.
  • Add CSS3 effects until happy with the design.
  • Screenshot and paste into Photoshop using magic wand tool to delete any unnecessary white on coloured backgrounds.

Typecast allows me to follow through the design of these fonts easily and will save a lot of time when using typekit instead of the previous back and forth testing process I had before.

I read Chris Murphys article on ‘Scale in Typography’ and picked up on quite a few things. He used the guardian newspaper as an example of how our eyes are directed. As a regular visitor to the Daily Mail I thought I would do the same thing quickly for the top half of it. Even though websites are slightly different from newspapers, the same principals apply.

  1. Navigation in a clear location for the user to navigate easily throughout the site. Noticing in particular that the second level navigation is also visible.
  2. This is a feature article the editors use sometimes, it appears depending on how important the story is and features it on the main part of the website at that time spanning the full way across the page.
  3. This is the second top story of the website as you can see it features a large headline and usually has a longer length excertp as well to give the user the full intro before clicking.
  4. This slider has the best images which usually consist of “celebrity” articles to grab the users attention.
  5. Usually the femail article consists of all the celebrity photos as you can see this is in a smaller font so that it does not take away from the main articles but it is still in a prominent position so when the user scrolls there will always be 5 or 6 new articles on the right for them to see.
  6. These are the 2nd – 4th “news” stories however already dramatically you can see a decrease in font size and importance.


I have come across a variety of different grid systems in the last few years and experienced a few different screen sizes.

960 Grid

The 960 grid system is probably the most used grid available out there, however now with users upgrading their computers and the price of monitors and laptops coming down massively, the average web resolution has increased.

In 2007 we can see 74% of users used 1024×768 resolution however now in 2012 only 15% of users use this screen resolution. This allows us to break away from the traditional 960 grid and increase it. However in doing this the grid still needs to be flexible for that 15%, as it still is a massive number if you think the worlds population is estimated to number 7.048 billion.

With these statistics in mind I think it is more than acceptable to leave the traditional 960 grid behind when creating my site however make it responsive therefore it can fall back to whatever browser size the user may have.

Twitter bootstrap which I talked about before, and have had experience with while creating my portfolio is capable of this. It starts at 1170px in width, then scales down accordingly. I think this is more than enough width as any bigger and you are not catering for the popular 13inch Macbook Pro.

After my one on one discussion with Chris we came to the conclusion that the wireframes looked quite “boxed in”, this was not my intention at all however I see where that opinion came from. When creating my design I will definitely leave the effect of flexible width with footers / headers spanning 100% across the design and make the design less rigid than my wireframes.

Keep Calm and Carry On

Recently I have seen this meme appear quite a lot on my Facebook, Dribbble and even an iPhone app! To be honest I am not really a fan of it at all, to me it makes no sense however I thought I would do a bit of research to find the true meaning of what it really is.

I found the answers I was after on ‘Know Your Meme’,  it turns out that it was used as real posters in World War 2 in which the posters helped increase morale between the troops. According to the website there was more than a million posters originally commissioned however after the war they were then all destroyed.

In 2000 a collection of the posters were found folded inside a collection of old books and then prints were made and sold online. Sales of these posters have kept increasing and it has also featured on the antiques roadshow.

I decided to breakdown the design even further and find out how and why it has become a success even today.

  • Solid Colour Background

    Keeps the colour options to a minimum which would also have made it cheaper to print during the war.

  • White Bold Text

    I researched into the font more as well and I found a lot of forums were saying to use the font “Gill Sans” in bold format, however after doing this on the test versions I didn’t really think it reflected the design at all. I kept looking and came across someone who had made a font based on the design called “Keep Calm” and made a free version.

  • Simple White Icon

    In the original print the icon is the Queens crown which represents what the troops were fighting for. The latest memes that have reused the design also have a white symbol and it fits in well with the design allowing people to quickly realise what they’re talking about by establishing an identity.

  • Centre Aligned

    I guess the reason behind the design being centre aligned is because there isn’t much information to go on the poster and if it was left aligned the symbol along with the text would just not work together correctly.

After this case study I decided to do a few examples of my own. I began to enjoy the design and when it was created all those years ago it stood for a great cause and gave the morale that was necessary.

Keep Calm and Graduate from IMD 2013

Keep Calm and Drink Frappuccinos

Keep Calm and Start Blogging

Worst Case Scenario Design

Today testing with real data is a very important process throughout. When on placement I was involved in quite a few large sites including banks and airline companies. These sites had very large input fields and a lot of data that needed to be captured not only correctly but accurately. Keeping it as simple as possible for the user to do anything from sign up to their news alerts to transferring a substantial amount of money over the internet.

The simple way I used to test data is by taking a variety of long names that we had signed up on the database for the coming soon sign-up and I generated a few of my own. In the Arab world a user can obviously have more than one name and family name, so I had to make sure this was correct too. Not allowing any restrictions on the lengths of characters in an email address and so on.

A great design for sign ups / registration which I regularly return to is Nabbesh.

I find the verification process and the stages break up the sign up perfectly. It doesn’t restrict users in their inputs however it breaks it down for the users so they aren’t bombarded with lots of information from the start.

 Air BnB

I came across this infographic during the week while viewing airbnb’s amazing apartments on offer. Airbnb allows users to rent out rooms / apartments around the world in which visitors can stay there usually for cheaper than a hotel price. They can then view the city or town their visiting in a completely different situation or location that simply they might not be able to experience sleeping in a hotel.

The infographic is explaining the growth of the company since it launched in 2008 and shows its steady climb of nights booked on the website. The infographic is quite beautiful and designed by Kelli Anderson, unfortunately the design is just an image however I don’t think this takes away from the graphic itself very much but I think if it was interactive it would be much more appealing.

The design itself covers quite a lot of information and the overall break down of facts has been thoughtfully done. The stages of “a night is booked” is probably my favourite part as it is very interesting to see how she has displayed the data as little as 2seconds, but still continuing on with the original clock idea. Zooming into the clock to reveal the seconds hand surprisingly works very effectively. It took me a few seconds to catch the angle in which the design was but once I got it made complete sense. Then adding the text too below this just clarifies to the user exactly whats happening. Then adding the simple fact below the breakdown just makes the user realise how quickly this company has become successful.

We have seen of course similar realisations to this before for example the donation videos for water in Africa as throughout them they show and explain the importance of time. Airbnb almost have this same effect on the human brain but its more of a confidence thing like “oh they must be safe to use”.

The design then continues on further to explain the breakdown of the countries of where people usually travel from in a case scenario of staying in London. This I find quite a unique way of showing this data as opposed to using a world map which would make sense. Kelli has decided to only use one location and base the data on that. To do this she has added a manipulated Google map of London and added a few elements onto it in their chosen locations. The tower bridge is one of them and this adds a lot of depth to the map and keeps the design 3Dish.

I came across this on graphic river, I’m not quite if it is the same effect however it is the same idea. Another final thing of this element of the infographic is that she has chose to right align it. I find this is quite interesting as really she could have easily made the graphic wider or the lines longer but chose not to which is unusual.

Further on down the infographic it then gives information about how much growth there is within the individual key countries and then case studies from some of the popular hosts in that particular country.

One reference attracted my attention compared to the other people that are hosting on airbnb in the infographic who have an average of 55 stays. They are from the UK and have a whopping 529 reviews when this was created and after finding their profile you can see they have now  had 656! This is an older couple so just shows you that airbnb is a usable website for all ages of users.

Dubai Graphic Encyclopedia

While on my placement in Dubai I came across this book in one of the largest bookstores in the world, over 68,000 square feet .

While walking around I found this book and it consists of hundreds of vectors related to Dubai.  As you can see from the video, the book is very well laid out and has a vast selection of vectors available to use and more than one variation for the more popular landmarks.

The vectors range from the culture of Dubai, the airplane fleets,  to the typography found on shops in both English and Arabic. This is something I found very interesting while in Dubai, how they can make a high street brand name logo in Arabic and still keep the same “look and feel ” of the logo. I have attached a few examples of what I mean. As you can see even though the brands are different in many ways in the Arabic version you can still see the logos and recognise the branding without having to be able to read Arabic.

The book comes with a CD which states the vectors are allowed to be used on other projects this is the main reason I bought the book, that and the fact that it is a great memory to keep for a great year. The vector illustrations are very detailed throughout and I should be able to use some of the designs in my infographics of Dubai. However the likes of the Palm Jumeirah and Burj al Arab vectors are very complicated, this might take away from the look and feel of the infographic so I will most likely have to redraw these at some stage. This isn’t an issue, it will just be time consuming.

Pumpkin Carving

Over the weekend with the help of my brother Alexander we created a recording of me carving a pumpkin with the logo of my placement company, Flip Media. Pumpkin carving is something I love and have always done during Halloween, I love to make custom pumpkins and have created an Apple pumpkin in the past. There are numerous reasons why I decided to do a Flip logo this year, but the main reason is when I was in Dubai I wanted to do this but never got a chance.

  • Firstly we sat down and started story boarding the approach of what I wanted to achieve in the video and how I would go about carving the pumpkin.
  • Next we then decided about the different angles of the shots we needed and decided to go with 4 different angles for the filming (swapping the camera regularly between as recording), then also agreed on some close ups that Alexander would take.
  • We then started preparing the table where I would be carving and used a black tablecloth and some tealights.
  • We then started preparing the lighting for the shots, I really wanted the dark / orangey glow effect, almost eerie. So to do this we used orange coloured gels on the lights that were set up around the table.
  • Once the lighting inside was complete we then started making our way outside and did the same this time adding green gels to our patio lights and reducing there brightness to keep the effect of darkness
  • Then we began to start shooting, my job was quite straight forward in this part I just carved away and Alexander moved the camera from angle to angle.
  • Throughout the process we changed up the shots and came up with more from the original ideas we came up with, getting more and more complex as we went on.
  • The section where I strike the match and reach into the pumpkin for that we actually had the DSLR camera sitting inside the pumpkin, to get it there we had to remove the lens and add it back for the shot.
  • The whole recording process took about 2hours once we were pleased with the shots that we had achieved we had got plenty of as we called them “Harry Potter zooms” where the camera walks around the subject. 0.11 – 0.16seconds in the final piece is a great example of what I mean by this.
  • I used Premiere Pro to edit the raw footage and used Incompetech for the sound effects. There was a mixture of different editing techniques used throughout and roughly the editing in total took around 1 day to completely finish.
  • The longest part of this whole thing was the render time on the video at the end and the processing time waiting for it to upload to YouTube.

Jacek Kłosiński

Jacek Kłosiński is from Poland and is the Creative Director of Engram  which is a branding / creative producing company.

I came across his infographic, it is unfortunately in Polish and as I don’t speak Polish it is hard to know exactly what the infographic is about. However if we forget about the translation issues and simply focus on the design there are many things that I notice straight away that I like.

  1. Depth

    The whole website it based around depth, the titles of the page have staggered shapes behind them to make them appear 3D, however the quote that is in the box is inset with drop shadows aiding this effect.

  2. Colour

    The site uses a total of 4 more dominant colours throughout. These are the pink, dark blue, white and light grey. I think the colours compliment each other beautifully for such a mix of information.

  3. Charts

    The charts throughout the site are very minimal and they have been broken down accordingly that there is only ever 2 colors in each chart.

  4. Titles

    The titles throughout the design are enclosed in a red designed container blocks this keeps separation from the other data. The larger titles / information is in a ribbon effect spanning across the whole page..

  5. Fonts

    The fonts for this project again reflect the clean sophiscated style that Jacek is wanting to achieve.

  6. Vector Graphics

    Throughout the design there are vectors used however Jacek has refined on how much he uses these and made them subtle and not a key part of the infographic but still bringing in the importance. He has went with the usual shape of the “stick man” to represent the reduction of how many people are needed over the years.

Creative Experimentation

I was playing around a bit with the Foursquare API this week and came across a cool and very simple way of using Foursquare to display data. It displays your Foursquare checkins on Google Maps by simply using KML link you can get off your Foursquare feeds page. You simply copy that link and paste it into Google Maps search, this then displays a limited number of your checkins. You can choose to display more checkins by simply adding the number to the end of the link like so ‘?count=100′.

I found out how to do this on the About Foursquare blog.

Downloadable Hi Res Version

I decided to have a quick go at using the photographs my brother took while in Dubai and overlaying some information on them. During my one to one Chris said that the pictures of Dubai sell the place so I should try look into using some to make my website more attractive. I picked this picture of the Burj Al Arab which I love and just placed some information around the building on certain aspects of it from my personal experience there.

Downloadable Hi Res Version

I then picked this photograph of the Dubai Fountains. This photograph has the fountains, Souk Al Bahar and some of Downtown Dubai all in one shot, so I just placed some information over it highlighting the certain areas. Photographs copyright to Alexander Morris.

For this quick infographic I used the vector approach, using the resources in my Dubai Graphic Encyclopedia. I went for simple black with blue and I think this achieves a simple but attractive infographic on some facts about the Burj Khalifa.



This weeks lecture was all about the importance of branding, and how it will play a big role in our Major Projects. A solid brand will help us greatly with our projects to make them successful in the real world. Having a meaning behind the brand is a big must, so this week I decided to take a look at branding in more detail. I decided to explain more in detail about my experience with WordPress and how I used it to create my portfolio this week. I decided that I would firstly start with some branding.

Build-A-Brand Branding

I decided it would be fun to start off this week looking at some branding for this weeks lecture title ‘Build-A-Brand’. I was inspired and thought that this could make a great fun logo so set about having some fun in illustrator. The first two could have multiple inserts, a collect them all situation.   Here are the first two I came up with:

I enjoyed making these badges so I made two more slightly different variations. These are the second two I came up with:


I’ve been working with WordPress as a CMS for just over two years now, I wouldn’t say I was an expert, but I understand what is needed to make a successful site using it. I’m going to blog about the different plugins and setup that I use for WordPress. I have already covered the theme I used in Week 1 by 320 Press, so I’ll dive deeper into the workings and code base of the setup this week.

Firstly the install, I have my hosting setup with Big Wet Fish, very nice guys and great service, check them out. With their hosting packages I have cpanel which also has a software built into it called softaculous. Softaculous allows the user to run a script to automatically install packages onto their server, this can be anything from a CMS like WordPress to a online forum like Vanilla.

This software is probably the best solution for installing WordPress, I just simply login to cpanel, click on softaculous, click WordPress, tell it where to assign my install to which directory, select my password for admin and email address and that’s it. Just click install and it does the rest. This is handy because installing the site manually from what I have read on forums isn’t as straight forward as what it seems.

Coming Soon Page

After the website is installed it will then automatically install the default theme, so if you go to the URL that you installed the WordPress blog to, it will be live. Now this isn’t acceptable for clients so I have a solution for that as well. Coming soon ultimate page is a plugin which I use to create coming soon pages on my WordPress sites.

It basically layers itself over the website after the install of the plugin, it give you the option to add text, an image, background colour and HTML input if you desire. After you are finished entering the information you activate the plugin. After activation if you view the URL in the same browser it will appear the site hasn’t changed and you can fully see the homepage and access all elements, this is however because you are logged into WordPress. This is the best part of the plugin, if I open it in another browser or logout of WordPress the coming soon page is active and this means I can then upload changes to the website without anyone ever seeing past the coming soon page, except for myself and possibly the client if they wish to follow the build process.

Get A Post

Get a post is a very outdated plugin and I found a link to it through Stack Overflow from a question about customising posts. I use Get a Post to ensure the whole homepage of a website is customisable and a client can change elements themselves without me having to do it in the html etc. So by using Get a Post it does this after installing the plugin. I just use the following short code:

This means use post 20 and display the title and the content of this post. It’s quite simple yet very effective, so every small piece of information on the homepage can be edited in a post. For example on my homepage the devise, design and develop sections are all posts meaning I can easily edit them by editing the post. They are all tagged to the category homepage. This means when making a client website it is easy for them to work out what posts are on the homepage and they can easily edit them. I then look at the URL and take the code that is contains for the post and add the Get a Post code to my .php template. I then start adding the unique post identifiers to the divs accordingly. There are many more options of what you can pull individually for each post, however these are the two main options that I find myself using.

Riva Slider

Riva Slider is a paid plugin which I bought, it’s a very complex slider with many different options. The main ones which I tend to use are:

  • Including different types of animation for when the pictures are added (fade/slide etc).
  • Allows dynamic text content to appear on top of the image.
  • Client can upload their own images if they wish to, including changing the order of how the images appear If they want a different rotation.
  • Settings for width of slider.
  • Settings for time of animation and time of each slide duration.

It’s a very powerful plugin with a lot of customisation available within it. The main reason I use it is because of the client upload, this is extremely important in a CMS, especially for bigger sites. If I used a static JavaScript slider such as rivo slider for example this would of course work, but it limits the client to having to contact me to change the images on a regular basis and to me this is not how a full CMS solution should be.

Fancy Box for WordPress

  • Has a built in gallery option.
  • Create a new page – rename it accordingly.
  • Select this button that looks like an image.
  • Select all of your images after bulk resizing them, usually 800×600 is what I would use.

After they have been uploaded, scroll to the bottom of the upload window. Within it will be an option of how many thumbnails in a row (select 4) then check that the option link to image is selected after that then click insert gallery and then publish the page

After viewing the page you will see that the image thumbnails  link to the image source the bigger version this is where fancy box comes in. I simply install the plugin and hit activate then I refresh the page and it will allow the image to now be loaded in the background using Ajax then when it is ready to be displayed it will appear in the middle of the screen in a popup window.

There are many different options of customisation for this plugin, which include changing the background overlay, removing titles from images and clicking anywhere on the browser or the close button to close the image.

I really like this plugin and find it totally useful as its basically plug and play. The only downside I would have is for mobile I still have not found a solid solution of how to deal with images that originally are thumbnails, especially for image galleries.

This is something that I will have to look at for the upcoming task of the clients website, as after seeing previous clients the students have had the galleries will play a definite part in the website that I have to make also.

Contact Form 7

Contact form boxes are not easy to make, this includes for full php developers as well. It’s a time consuming process, however this plugin sorts that issue.

Contact Form is a simple install plugin, then you start making the form up in the settings according to what you need it to do. It allows multiple fields and all types of inputs including radial and checkboxes. It then generates all the backend code necessary to make your form, all you have to do is enter a small short code into the post  or page where you want the form to appear.

Within the plugin it allows two email addresses as well so quite often I would have one email the form to the client and then the other to automatically contact the user that the mail was received. This is quite a cool option and keeps the user and clients information safe.

The plugin is quite simply styled at the start but as a front-end designer I would want it to be customisable, so this isn’t an issue. It inherits the classes that are made for forms on the current website which makes styling that little bit easier, then it includes full Ajax validation which I can then also directly target using the classes provided.

The final feature of this plugin is that it has an additional plugin that can be added onto it. This plugin then records the form submissions and records them in the database for safe keeping. It then allows a downloadable excel document that can be mailed directly to clients for future use.

When using WordPress for customising sites these are usually the key plugins that I will start with, additional plugins I will add depending on the website, however these I find are the more useful key components.

Different Template Pages

When I create a WordPress theme sometimes the different pages need to display and follow different designs. To do this I duplicate the current page.php file and rename for example section.php, then I add this code to the header of the page.

Template Name: Google Chart API

Basically what this code does is adds a new feature to the WordPress setup that includes a drop down now of which template the user wants to use. For example a client is creating a normal page they will use the single template or if they’re wanting a section page they will select section from the template dropdown.

This is a really versatile tool and you can style the content in any way you wish, you just need to keep the base php that calls the content to the page.

404 Page Not Found

As long as this is included in the page the backend of the dynamic text process will work so I can then start adding custom blocks and divs to create a completely different template.

Category Posts within One Page

For the creation of this blog for University I had to create posts to appear on one template page. At the start it seemed like quite a straight forward process:

1. Create a category for posts called blogs.
2. Use php to call these posts onto one separate page.

This effectively is the logic behind it, however when searching the Internet and reading books I couldn’t find anything that could do this without using plugins. Even the plugins were way too complicated for all I wanted to achieve. I kept searching and found parts of the answer in this post.

while (have_posts()) : the_post();

However it wasn’t enough for what I was wanting to achieve and also after the first lecture a third point was added:

3. Make anchors to the relevant weeks.

I then came up with an idea of solving the anchors idea, I would use php custom posts which is a default function in WordPress (although very hidden). This is normally used for unique things for example the price of a store item. So for this I created the custom “date” and added the number of that week, for week one I added 1 etc. Then in the template loop, taking the code I had already found I added this call to get the custom post. After playing about with it for some time I found a complete solution see below.


#ID, 'Day', true); ?><#/div>

Not Found<#/h2>

This runs the WordPress loop and searches for the title and content within the category 5 (my blogs), it then also pulls the custom post for each post which is the date in my blogs. So for each week it pulls the 1, 2, 3 etc and then using anchors I can just target #1 as it is dynamically displayed now. This page itself took quite a lot of effort to complete, however hopefully it’s handy for other people to use now too.


This week In the lecture was focused on branding. Branding is very important and your brand will be solely known else where apart from the website, as a logo, a point of recognition. When branding my project logo, I will follow these guidelines I have set myself;

1. Deciding my final website name. I’ve been thinking more recently about possibly going with an Arabic name however using the English spelling of it. All Arabic words have an English phonetic spelling, for example marhaba, which I use in my website, means welcome. It’s real spelling in Arabic is مرحبا”. An example of where a Arabic name works in an English setting is again in Nabbesh. Nabbesh in Arabic means to search, more specifically it means to rummage, to get to the bottom of something and find it. Obviously it makes no sense to have an Arabic name on my website without some Arabic content somewhere within it, however I have spoke about before this before as one of my goals. Here are just a few ideas I have come up with so far.

  • Marhaba Dubai (Welcome Dubai)
  • Haluma Dubai / Haluma DXB (Dubai Dream)
  • Na’am Dubai (Yes Dubai)
  • Kifak Dubai / Kifak DXB (How are you Dubai?)
  • Yalla DXB (C’mon / Lets Go Dubai)
  • Hub DXB / Dubai Hub (Love DXB / Dubai Love)

2. I will start sketching ideas based on my ideas of both the name and what I want the site to do. In my case ill be featuring a lot on the skyline of Dubai and trying to implement it into the logo, however this also isn’t exactly what I want either. Possibly I might make an entity and a text logo to accompany it. An entity is a part of a logo that can stand by itself, Apple is a perfect example of this. The user doesn’t need to see the text beside it as it stands on its own. I believe Microsoft are now trying to does this with their new more simplified logo.

3. After I have sketched the ideas, I will take some and try and recreate them in Adobe Illustrator, the main thing when going through this stage is keeping the logo as basic as possible and not to over complicate things, by just using simple black and white or single colours per elements.

4. After I am happy with the final piece in Illustrator I will then bring the smart object into photoshop and do any necessary beautifying to the piece. This includes gradients / shadows  / text effect. I like doing it this way as I have more confidence in which tool does what in Photoshop and I can create a wider ranges of effects and treatments.

Logo Designers

Looking into branding further I decided to find some successful logo designers, however I wanted to stay away from Dribbble this time. Dribbble is great for finding resources however it can also be quite limited in what it has to offer and there is also a very distinct style, so I decided to try Googling and get some more organic search results. I kept looking until I found someone that interested me.

Jacob Cass

I came across Jacob Cass. Jacob is a graphic and logo designer originally from Sydney, Australia but now based in New York.

His site is very minimalistic and clean with just a splash of pink throughout to direct the user to the more important information. After viewing his site I then found his logos under the identity section. The logos are displayed neatly in a grid system however I then noticed using the toggle buttons on the top right of the navigation, you can change them to 3 different options.

  1. Grid Format : Thumbnail Image
  2. 3 Split Grid Format: Thumbnail image and description on the icon
  3. Large Image Format: Large image and description on the icon

I liked the interactivity involved, it is becoming more and more frequent in designs I have seen, however I have never seen it in action that often. At the start I thought it was using Ajax to control the request however after using firebug to inspect the elements it seems it is just JavaScript but it is a very smooth response and the site itself is very quick. This element of the site I think I could probably implement into the clients live project site dependent of course of what our material is.

I started looking through the logos that he has created and found that there is a massive difference throughout the style of them. All are very different from the next. The two that probably stood out the most for me are:

Just Creative

This logo for me just ties in really well as a whole. The fact as a designer he was able to implement the pencil into the logo itself without it looking too different from rest of logo is great, while still giving that “pencil effect” in the shape of it. Implementing the J and the C of Just Creative work very well and  unless you look closely enough the break almost isn’t visible at scanning the design, your eyes almost autocorrect the visual illusion he is displaying. Colouring the Just Creative text was also very sleek and brings colour to the design, however doesn’t take away from the dark graphite grey colour which he has used for the pencil / Design text.

After clicking on the logo it then brought me to the about page in which I learn that the logo itself has won 3 design awards.  This itself is a great achievement especially when one of the awards was for the very famous Logo Design Love. It is an old logo, dating back to 2008, however even now I still think I would be happy to call it my own.

Ruff Club

The Ruff Club logo is quite a fun logo, it plays on the traditional shape of the skull and crossbones however with 2 dog bone shapes. Its quite a simple logo and this shape of a dog bone is known globally so it on its own acts as an entity. The font used looks quite similar to League Gothic. However after refining it a bit further I believe it is Baucher Gothic URW Bold Extended, a thinner leaner version of League Gothic.

It creates the brand simply and again adding the orange to the bone and a simple dark brown to the text keeps the logo looking fun yet professional. After viewing the full post on the logo I have seen that he has inverted the colours in designs. This is a very important part of any logo, it should be able to be placed on dark backgrounds. In my own opinion the more simplistic a brand can be the more successful it can be.

After clicking through Jacobs website I noticed two more things:

  1. Logo of the Day – this is a website that he has created and it has hundreds of logos which are very inspirational to look through and see different logos from a wide range of designers without looking for a  particular style “news logo” etc
  2. After reading through his website and after writing this blog I noticed in the footer that he is actually a member of Dribbble, however not much of his logo work is featured in latest shots.

Logo Pond

Whenever I think about logos and branding as a whole I usually start checking logo pond for some type of inspiration. Again like the other sites there is a wide range of different designers all contributing to the website however the structure and the quantity of results per page keeps me clicking through the pagination to see what the rest of the site has to offer.

Black and white versions of the logos are quite interesting to look at as throughout the elements you can add any colour to them and it will work. Usually when creating logos I would start with a black and white version and then add the colour as I see fit, however when I know how the colour scheme should be from the client I will always implement it into the logo at an early stage.

The only downside of the website is that they have killed a lot of the usability features in key places just to increase ad revenue. What seems to be the navigation above the main content is infact an advert in quite a key location, however once you realise this it is quite easy just to ignore it.

Instagram Prototyping

I wanted to try out some stuff with Instagram that I could use for my Major Project. I had originally thought about showing photographs that were tagged to a certain location, then I realised the widget I used to put my instagram feed on my portfolio had a new update. This update allows you to show photographs on a map that are posted by a certain user or have a particular # included in them. You can check out the prototypes by clicking on the image below.

I also included a standard grid layout showing photographs using a #, in this instance #BurjKhalifa. I could use either of these methods to display photographs with the particular location/buildings name #.



This weeks lecture was about designing experiences, not products. First impressions do count and it only takes one bad impression to make a lasting impact, so ensure to always do your best to try achieve positive experiences in real life and in your work. I had my second one to one chat this week with Nik this time. We are now officially over the half way mark of  semester 1 of final year, only 5 weeks left!

Meeting with Nik

This week I managed to get a one to one chat with Nik and got some great feedback as to which direction I should continue to take my project in. I have analysed some of the things that were suggested by Nik and have come up with the best ways to take them forward.

Limiting the After Effects Videos

Learning Adobe After Effects was definitely a big part in my project, however a video for a user can be very boring and not interactive enough to encourage a good user experience. I also realised after creating my short animation last week that using it is a lot more time consuming than I had originally thought.

For my infographic website I need to make sure the video is no longer than 20-30 seconds, this keeps the attention span of the user and hopefully doesn’t become too much for the user. Any information which I want to show to the user that overruns this time slot I can simply include in the website where the user can choose to read the information themselves or scan read until they get something that interests them about the area. I have decided to try and do one more generic video as opposed to a video for each location, this will allow me to focus on making one great video rather than multiple good ones.

Increasing the use of Instagram / Foursquare Api’s

Throughout my testing so far I have been creating prototypes of trial and errors with these Apis. I have found that simply tracking a #tag does not work well as it returns global results, not necessarily refined to a location, therefore it looks untidy in a photo map.

I need to refine this further to be based on geolocation and retrieve the photos and checkins from the location directly to ensure a more direct result is achieved.

User Generated Content

With the launch of the recent Instagram profile pictures page it has allowed me to see the potential of having user generated content on my website. Information would be updated regularly and would most likely be generated without the user having to be involved in statically doing it.

Things like “checked in to Burj Khalifa 10 days ago” by accessing their Foursquare information. Obviously more of these feeds could be generated depending on the users content available. Instagram photos would show their Dubai related ones ( I would need to look into). Other possibilities are profile tips and for the user to answer questions defined by me almost like a short interview;

  • What’s your favourite thing to do in Dubai?
  • Where do you live in Dubai?
  • Favourite restaurant?

This then increases the users interaction and allows the site to gain a new type of visitor as people will want to know what certain people have to say / restaurant reviews with people’s profiles / faces can make a big difference on whether people will go to it or not.

Expat page

Having experienced Dubai for a year I would not say I’m an expert by any means of exactly what needs to be done for a person visiting or moving here. However I can share the basic knowledge which I have gained to give people a quick insight into what they have to look for and do when they get here. There are forums that talk about this sort of stuff but due to the sheer quantity of posts on the site important information can get hidden and its very difficult for users to navigate. So it could prove beneficial to have key information on this one page.

Unfortunately Dubai / UAE as a whole is quite backwards, things that we use in the UK on a regular basis aren’t always available. “Chip and Pin” for example is just beginning to be used in the last few years, in quite a lot of restaurants I found myself signing for bills. Post dated cheques is another thing that is used a lot and is an issue for renting and for people that don’t know how the system works this information would be informative. Obviously I would not just make a massive list of information and post it on a page in an FAQ section, but take a different approach completely. By making it interactive, clickable, digestible and most of all easy to use to get the information they need in a well styled format.

Holiday Tips

Dubai is a very popular holiday destination, however there are again rules which cannot be broken in Dubai. Simple things like kissing in public is prohibited, certain malls and shops have policy on how revealing your clothes may or may not be and holding hands if not married or in certain areas is not recommended. This is something I have experienced first hand. A holiday tip page for users would allow them to find out the basics before they come and possibly I could include some downloadable PDFs which they can save for later use when they arrive at their destination. This page can be easily integrated into an infographic structure. There are many facts and rules which are global to all malls. To add interactivity to this page I could have a certain section that when hovered over the different malls names it gives a simple overview of things like;

  • Dress appropriately
  • No kissing
  • Holding hands to a minimum

These facts are just general knowledge to everyone that lives in Dubai and could easily integrate a possible user generated comment system that can add more information to these facts which I end up picking.

I have been deciding this week about my project name further. I came up with some concepts and decided to take my 2 favourite ones and break them down and then choose the final name.

Haluma Dubai – Dubai Dream

To me Dubai is seen from an outside world (people who only seen it on TV / advertising) as an exotic and rich place, and of course it is! But there is much more to the city than that. Below is how the name Haluma DXB looks in English and Arabic.

To explain that to people it’s almost like a dream to them, something that will possibly never be part of their lifestyles.

That’s effectively where Dubai dream came from, its showing them the facts through infographics and videos of the dream they know little or nothing about.

YallaDXB – C’mon Dubai

When flying to Dubai I used to regularly tweet my destination DUB (plane) LDR (plane) DXB which means – Dublin – London Heathrow – Dubai. DXB is Dubai’s abbreviated flight code. As I discussed last week I wanted to stay away from including the word Dubai in the name of the website so I came up with this solution. As the website is about Dubai I think it is important to include it in some way however. Below is how the name Yalla DXB looks in English and Arabic.

The website will be aimed at tourists and people living in Dubai to find out information on the current things to see while visiting or living there. Therefore DXB is totally suitable as if searching for a flight say on lastminute.com and you enter your destination of Dubai it will change to Dubai (DXB). Anyone that currently lives in Dubai should have a general idea of its abbreviated flight code as it is quite publicly displayed on billboards in the city.


While on my placement everyone around me spoke different languages, from arabic, french, indian and phillipino. However as a global language everyone spoke and communicated in english. There were regular words that are mixed in with the English language though that even at end of year I found myself linking into sentences. The more popular ones are yalla (come on / go ), khalas (its over / forget about it ) and habbibi (my love / my close friend ). So to use it in context I would say. “It’s half past six, yalla!” meaning we ended work half an hour ago why are we still here, come on let’s go. This was always quite a fun word to use as it covers a wide variety of different contexts all in one simple word.

If you combine the two words “Yalla and DXB” you get “C’mon lets go Dubai”, it’s a very loose terminology however it works extremely well. I’ve tried with a few of my friends In Dubai ranging from jordanians, lebanese and local UAE emiratis, luckily they all seemed to understand and like it’s concept.

In the end i decided to go with “Yalla DXB”.

The main reason for using this as a name / brand for my website is its simple to say for English only speaking people too, you pronounce it as you see it. Yalla is understandable to anyone I have tested it with and DXB is simply naming letters. I think this is a good combination of what I wanted to achieve in my goal of a name / brand for the website.

Presidential Elections

This week was a big week for the American elections in which president Barack Obama was reinstated for a further 4 more years. There were many different websites created for this event, displaying data about the election and how the voting was going.

Foursquare ‘I Voted 2012′

For the presidential elections 2012 in America, Foursquare launched this ‘I Voted’ map, although unfortunately it is no longer online now. The map provided real time check-ins at all the different voting locations across America. To get in on the action the users had to add the ‘I Voted’ app to their Foursquare accounts and then check-in at the polling station or include #ivoted with a check-in and they would then be added to the map. Users also received an ‘I Voted’ badge on their Foursquare account.

For those of us not in the US we could still view all the valuable information provided on the map. The map allowed users to find polling stations and find out information about the election and ballots. The map was constantly being updated providing the number of check-ins at polling stations across America, peak check-in times, and numbers on the gender of the users.

Although this app wouldn’t be entirely accurate as all Foursquare users in America wouldn’t have added the app and probably a large percentage of voters don’t even have Foursquare. This means the numbers provided by this app wouldn’t of accurately depicted the actual number of voters in America during the elections.

Facebook Stories

Facebook stories was used as a seperate microsite to track when the users were voting and how many voted.

This map is a representation of people on Facebook who clicked an Election Day prompt to share with their friends that they had voted in the 2012 US election. The information displayed on Facebook Stories has been anonymized and aggregated.  (Facebook Stories, Vote, 2012)

The site itself was designed by Danny Jones in collaboration with Skip Bronkie and Nick Kwiatek. It is a great representation of how to display large amounts of detail in one easy, yet effective interface.

At the top of the website it gives a short introduction to what the site is about and a countdown overview of how many people contributed. When the voting was open the countdown was regularly updating real time.

Scrolling down further then introduces an interactive map. There are circles constantly pulsating on the map to allow the user to see the concentration of areas, it also encourages the user to hover and interact with the map. Once the user hovers the area it highlights each state, then if the user clicks on a particular state it slides up the information which includes;

  • The state name
  • How many voters contributed
  • The Peak time of voting

This element provides a great interactivity for the user in many ways;

  • Can learn the different states
  • Populations of the states

After the interactive map it then breaks down by simply stating how many people voted both male and female and an age breakdown. This is a very simple representation of the statistics however it doesn’t need to be any more complex. They have used quite an interesting donut shaped graph however have the percentages in the middle, this is very illustrative and relatively easy to do both statically and dynamically however again very visual.

These small elements that create the website together give the user an overview without bombarding the user with too much data. I think this is highly important for my website as well. The user will want to read the data if displayed neatly and over view not every statistic on one page, possibly adding more interactivity with tool tips or click functions like they have in their website.

More Instagram Protoyping

I had another play around with the Instagram API this week after managing to find a tutorial on displaying Instagram feeds and have them linked with fancybox. The tutorial was by Nick at Blueprint Interactive.

I downloaded the source files then retrieved my access token and user ID to place in the files. Images are retrieved using PHP’s curl library to send the requests. After getting this working to pull my own Instagram feed I then had a look at the Instagram developer documentation and found how to amend this to pull images uploaded from a certain location. I simply found the latitude and longitude for the Burj Khalifa, changed the distance to within 400m and managed to get a feed of photographs.

I can use the same code for different locations such as Burj Al Arab, Palm Jumeirah etc. just by changing the latitude and longitude. I can also amend the distance if the location is pulling to little or too many photographs, I can go up to a distance of within 5000m of the location. Obviously the larger the distance is the less specific photographs you get for the intended location.

User Profiles

Nik suggested I look at some different user profile for my target audiences and find out what each person can gain from the website. I selected three types of users and came up with different profiles and how they would find the website useful;

  1. A local Emirati
  2. A recent Expact
  3. A Holidaymaker

A local Emirati

Name: Faisal

Age: 22

Gender: Male

Nationality: Emirati

Place of Residence: Sharjah, UAE

Background: Faisal was born and has lived in the UAE all his life. He goes to the American University of Sharjah, in Dubai’s neighboring Emirate. He likes to visit Dubai on weekends with friends and family.

Most Useful Features of Website: The most useful features for Faisal are the information about the different locations, he is particularly interested in the social media side of it and seeing how many people have checked into different locations and the different Instagrams that have been taken. He likes to view the different facts about each place as he finds it useful for his University course.

A recent Expat

Name: Rob

Age: 26

Gender: Male

Nationality: British

Place of Residence: Dubai, UAE

Background: Rob moved to Dubai 6 months ago when his company opened up a new office in Dubai. Rob had never been to Dubai before and didn’t know anything about the country of the culture and what sort of things there are to do. Having been there a year he knows a bit more but not interesting facts about the different places to go. His family and friends are wanting to visit him in his new place of residence and are wanting to know more about the country.

Most Useful Features of Website: The website as a whole would be beneficial to both Rob and his friends and family. The will be able to browse the different locations and find out facts about them along with how many people have checked in and viewing some pictures of each place that have been uploaded from Instagram.

A Holidaymaker

Name: Anna

Age: 37

Gender: Female

Nationality: Italian

Place of Residence: London, UK

Background: Anna was born in Italy but has been working in London for 7 years. With such readily available flights directly from London, Dubai is always a place she has wanted to visit. Her husband is particularly interested in the places to go in Dubai that have world records and has asked her to find out more about them before they book a holiday.

Most Useful Features of Website: Each spots infographics outline any world records they hold and the facts that made them achieve that record so these would prove useful to Anna and her husband. They would be able to find out more information about what Dubai is like and the culture by looking at the holiday tips section.

Widows & Orphans

In this weeks lecture widows and orphans were discussed. When creating typographic work especially we should take care to ensure that no orphans occur and the text flows without interrupting the readers process and ruining the piece of work.

What is a widow?

A widow is a line at the end of a paragraph that falls at the start of the next page or column, separating it from the rest of the paragraph. Its usually one or two words at the end of the paragraph, sometime the end of a word that is hyphenated.

They interrupt the readers eye because they leave too much white space.

What is an orphan?

An orphan is one word that is left on its own at the end of a paragraph. Like widows, orphans create too much white space in between paragraphs or at the bottom of the page.

As you can see in the orphan above, it is the last word in the paragraph on a new line by itself.



This week we had no lecture as Chris and Nik were at build. I continued on with my research and relfected back on the previous weeks lecture where Don Norman was brought up, I looked more into him and his work. I also worked on some branding and continued with my prototyping and ended up making a huge step with the Foursquare API.

Don Norman

This is a small 12 minute TED talk in which Don reflects on the 3 stages of design that effect your emotions and make you happy.

Donald Arthur Norman is an academic in the field of cognitive science, design and usability engineering. He is also a co-founder and consultant with the Nielsen Norman Group. He is the author of the book The Design of Everyday Things. (Wikipedia, 2012)


This all comes down to biology, it is effectively what we as humans interpret and learn. As people there are certain things that are out of our control, things that down to the basics of biology we have learnt subconsciously.

We don’t like cold temperatures therefore we like warm temperatures, however if you live in the Artic for example this isn’t really an issue and doesn’t cause you to feel any different.  We naturally like bright colours, alongside this certain colours reflect certain things. Temperatures being represented with colour is an example of this, red for hot and blue for cold.

Sound also can come into this, we don’t like loud noises (screeching or banging) however softer subtle sounds like waves on a sea can cause us to be relaxed and in a state of meditation.

These are all things that we have learned to like or adapted to and this is the visceral level of processing.

When looking at visceral within design, it concerns itself with appearances. It’s the ability to make things pretty and enjoyable. This is a very instant reaction you either like something or you don’t the first time you see it. This can be broken down into things like:

  • Typography

    Perfect example of this is the use of Comic Sans as a font in design, we naturally feel it’s an unprofessional font, it’s a fun font but never to be used on something corporate or a high level design. However a font like Helvetica is timeless, it can be used to represent professional or not and us as designers / humans have learnt to accept this.

  • Colours

    Dull colours make us feel sad or are used in professional corporate designs, however bright colours give us the effect of making us happy or grab our attention. Colour is a great part to helping us portray things fast. For example something simple like changing the colour of a link on a website, this allows users to know that its clickable.

  • Branding & Packaging

    The logo is a very important part in a design, if it is a corporate logo then it is clear that the information in most cases needs to be taken seriously, however if it is a fun logo with balloons and bubbly typography then you know that it is fun and exciting this is a big part of your brain working based solely on the packaging and logo.  Within seconds you know if the product appeals to you through its design.


This is actually where most of the processing in our brains gets done and is all about use. It is the feeling that you are in control through understanding and interactivity. If you are driving a car for example something you do on a regular basis you have learnt to do this through taking lessons at the start. You know what to do to drive the car and to be safe while doing so these things that come just naturally now and this is all about behaviour.

There is the old saying of “like riding a bike” which means when you know how to do it once you can do it again.

When looking at behavioral within design it all comes down to how a website may or may not work, depending on what we have learnt.

  • Usability

    I personally would say this is the biggest part of behavioral design. It is the ability to use a design and understand it. Over the years the web and mobile design has changed dramatically and everyday updates are being implemented and we are learning the new things therefore able to be in control. How usable a website maybe lets us as users know if we want to continue using it to retrieve our information that we are wanting.

  • Performance

    If a website is performing slow for the user or a popup banner its obstructing there view from reading an article these are all issues that come into there decision of whether to continue viewing the website its how they use it subconsciously telling them that it is too slow compared to a competitors site.

  • Layout & Wireframes

    The structure of a website is very important this could argumentatively come into visceral design and the two do tie in together. For example a designer needs to work usability specialist to create a great design through layout choices.

If I were to use an example of behavioral in design it would probably be the Facebook iPhone application. It taught users to swipe to the right on the left hand side of the screen to display the menu options and now in the more recent application they have implemented a left hand swipe for another menu.

Other application designers and developers are now implementing this into their designs as it’s seen now as almost a standard interaction for the users, however less than a year ago this ability was not available in any apps.

Facebook have been smart in implementing this into their design and can have a lot more content available to their users while keeping the main part of the app (feeds) minimalistic and usable.


It is the part of the brain which you cannot really control its almost like another person speaking to you giving you advice. Is that a good idea or a bad idea, why are you doing that, these are all parts of being reflective. You ask yourself these things nearly every second without thinking it its just a part of how the human brain works.

In the video he has a picture of a hummer car and speaks about the drivers of the hummers saying “never have I had a car that attracted so much attention”. Reflective is about image and how we experience things on a personal level. When choosing an outfit before going to university or going to work you say to yourself things like “is it formal enough”, “when was the last time I wore this” these are all parts of being reflective.

Being reflective within design is about getting across what the product will and can be.

  • Marketing

    This is a big part to any products success, without a good marketing campaign the product will fail. The product with a successful campaign will pop up into your head when that information is needed. For example if you are feeling hungry then a certain takeaway place that you viewed on a TV advertisement might come into your head.

  • Message

    This is what the product portrays to you as the user. Your feelings after seeing a product or during a TV advert, these all come into what message it is sending across. Social media in more recent years has become a big part of spreading the message and helps greatly. For example if you like a certain page of Facebook and a friend views this in their live stream it gives them a certain image of the product being useful to you so perhaps to them also.

  • Meaning

    What is the use of the product and what can you achieve by using it or viewing a certain website. If it’s a news website to gain high levels of information or a YouTube channel to view things your might not see in a normal circumstance.

  • Relationships

    Being an Apple Mac user we are constantly asking ourselves “is it worth the money”, “is it better than a PC” these are things that are reflective however our relationship with a company like Apple for example is strong and even if something would go wrong with our hardware we know that an “Apple Genius” is going to be always available if we go back to the store. However if we bought a Dell PC online we would have a completely different relationship and most likely would struggle trying to get the problem fixed.

By combining all 3 of these main elements in some way this changes our emotions towards a product and will effectively help in our decision to go ahead and buy it or use it.

User Experience

What is UX?

The term user experience (UX) is relatively new, I just talked about Don Norman above and he was actually the first person to name the term. It is the action of designing for the users of the websites needs and wants, it is how the user feels and reacts with the website.

User experiences are very different within certain mediums, however I will be blogging about UX within web design.

UX is all about the users experience how they use the website, if they enjoy using the website and meeting their needs bringing value to what they are after. These are all parts of the users experience.

Why is it useful?

Before UX, and still in some cases, we build websites for what we the designers think looks good and what the client requires or asks for. The user of the website used to be left out of this loop causing us to almost feel like we knew their needs without asking.

UX is the practice of gaining this information from what the user needs or requires and making decisions based on that.

An example of this could be on an e-commerce site. The user may or may not make a decision to buy something on the site if they see something like “free delivery” in a well placed part of the website. An image on the homepage however may look different and upset the flow of the original design by the designer. This is a simple example however it can be quite a complex job to research.

Different cultures

Within websites unfortunately not all UX practices will simply just work. You cannot simply put the same website in a different country and expect it to be as much of a success as it previously was as the users are very different. They may or may not know and have learnt the processes elsewhere to be able to understand and use the new website or they might be clueless to the whole process. This is where meeting the needs of the customer comes in greatly.

When working in Dubai I experienced this quite a lot, many companies decided to just move the same business model to the Middle East and hope it was a success. One example which I experienced first hand was Starbucks Middle East. Working at Flip media gave me the opportunity to deal with Starbucks in America and help change the original Starbucks model into a version suitable for the Middle East. Many things remained the same and the general structure was still the same, however I made some subtle changes to meet the needs of the users in the Middle East.

  • Centering the design of the website – This was decided as screen sizes are still quite low in the Middle East and there are not many designs that have left alignment, so to keep it consistent I made this decision.
  • Store location -The store locator on the USA site was simply too complex and confused some of the users. Instead I broke into a smaller version focusing on the cities within the UAE and then a hover process for these allowing when clicked to show all the available stores for the full city.
  • Arabic design – for this I worked alongside some Arabic users and effectively had to flip the full design from right to left. There were certain parts of the website that then needed to be customised further.

Different Devices

UX needs to be applied for all devices. With the growing devices in the industry implementing different screen sizes and ways of reacting with a device such as touch, input and stylus. All aspects of the UX need to be reevaluated for these mediums.

As a mobile site will have a completely different look and feel than a browser site and a tablet computer will have a similar closer design to the browser website however the user will be touching the device and swiping, these needs need to be met as well.

How will UX effect my final major project?

Since my project is based on tourists and current residents / expats living in Dubai I have two markets to look at.

Tourists and expats are a very wide range of people and cultures so I will have to make sure the design and UX of the site features are usable and additional features that users may or not use can be scaled accordingly. For example if I use a tool tip to highlight certain areas of a vector image on rollover this will be seen and realised by 50% of the users. However if when the page lands I automatically have one tool tip in the active hover state this will then encourage the other users to pick up on this that hovering causes action on this image.

Current residents in Dubai / UAE

As I spoke earlier about changes to the Starbucks sites there are certain things which I know the average Arab user knows and is capable of without any guidance. I know these things as working in Flip we researched these things when we placed these into action day by day. So these things I can implement and then if I get time to implement the Arabic design then I need to make sure that after flipping the design from left to right then it is both usable and meets the Arabic speakers needs through user testing.

Branding Creative

This week i decided it was time to play about with some branding now that I’ve came up with a name for my Major Project. After deciding on the name ‘YallaDXB’ and receiving the Arabic translation for the name from my friends in Dubai I had all I needed to get stuck in. I started off with some sketches to come up with different ideas of ways I could create the logo, using both Arabic and English versions.

I then moved into illustrator and combined some of the different elements I came up with in the sketches to put together some different versions of the logo.

Next I picked the one I liked best and progressed to create a colour palette for it. I came across a shot on Dribbble by Louie Mantia where he had a branding sheet to layout the logo he created showing different sizes, colour variations, the palette and the entity on its own.

I drew inspiration from this clean layout of the branding for Pacific Helm and decided to do this with the logo I have moved forward with. I picked a yellow, browns and blues palette, drawing inspiration from the desert colour scheme. I went for the font Ranger for the English and GE Dinar One for the Arabic, this is probably my favourite modern Arabic font and steps away from the scripted look of traditional Arabic writing making it more modern.

This isn’t my final logo for my project but just a experimentation of a possible type of logo, with its English and Arabic versions.

Foursquare API

Using the API so far has been quite interesting and I have found some useful ways of integration that i can use in my project, however this week I decided to take it one step further and implement the checkins and the plotting on a map combined.


I came across mapbox, it is a map API that allows you to create maps statically by plotting them yourself, it then offers a wide selection of different options including colours and icons to the markers. I first of all started implementing this map and found it quite useful, it would have been extremely useful if i could upload my own icons to the website as the custom markers are quite limited and not all cover the spots that I am highlighting. However i plotted a few places which you can view here.

Mapbox with Foursquare

After testing the static API I then started reading about their recent integration with Foursquare.  The integration of the two isn’t quite clear from the landing page and reading through it I finally found something I wanted it to look like.

Foursquare store locator  locates a sample “shop” and displays its different branches alongside other pieces of information including phone numbers, address and Full name. The main integration of the icons is based on locations from foursquare and then on click it displays how many checkins the certain location has had.

I started reading the documentation for this project on GitHub and started following the guide that it gave into how i can create the project and integrate it with my own data. The only problem that I had throughout the process was unfortunately all the links that are recommended to get certain parts that are needed to complete the tutorial are broken, so I had to spend quite a lot of time trying to set up / get the solution for how to retrieve these pieces of information.

Create An App in Foursquare

Signing up to the foursquare development process is pretty straight forward, then you create a new application and name it accordingly.

From this application we then are able to get the codes of both the Client ID and the Client Secret, these are essential for linking the application to the API calls.

Create A Mapbox

I created my map and you can add markers if you wish, however the javascript for the file strips these and just keeps the basics of the plots from the foursquare API. Creation of the map is needed for the TileJSON URL, which can be found by saving the map and selecting the embed feature. after this then i integrate it into the api call in the javascript of the site.

Create A List

To create the list of the locations is quite straight forward you just simply login and click “lists”, “create a list”, name it appropriately and then start searching for the locations you wish to add to your list.

To integrate it with the script you then have to go into the API Explorer and then find the list name in my case it was called “YallaDXB”, so after finding the name the ID code is just above it, so I copied and pasted this into my Javascript call.

Longitude And Latitude

This is used in the settings to find out the location of where you want your website to be when it hits the map originally. Centering the map in the middle of the spots I had made was important to allow the user to see that there are markers to be clicked etc as opposed to having it off center. To do this I used iTouchMap again and after seeing my plotted map, judged the center then added this to my javascript call. I also changed the zoom level as I didnt want it to be too far out as Dubai isn’t that big an area on maps so I increased the zoom to be closer to the markers.


After I had completed the application to pull my own list with my own content I then started fully customising the HTML and the CSS styles to tidy it up slightly.

I was able to add my own custom markers and style the boxes with the matching colour scheme, I decided to delete a few elements in the Javascript of the file as it is all called within one function. I deleted the add to Foursquare button, state label, phone numbers and secondary address as I don’t really think these elements fit within my project.

The Finished Product

For this project I decided to keep the sidebar as an example however on my final project it and the remaining script calls will be removed. I used firebug to target the previously coded classes and changed them accordingly in the CSS file.



This week we received our Live Project from the client, Duncan Campbell of Vision Carpentry. Duncan has been running his family owned business for over 10 years now, having experience working in both London and Belfast. He has now settled back in Belfast and is looking to establish more awareness of his business here in Northern Ireland.

He creates bespoke carpentry with a contemporary style and the function to make the most use out of small spaces. He does mostly household and residential projects and works alongside his wife Kathy. Kathy works on the interior design side of the business and can fit out entire rooms with soft furnishings and bespoke furniture pieces created by Duncan. Duncan also specialises in wet rooms and renovations. He can build extensions from the ground up with architects plans and then, alongside his wife, furnish the space. So really together their business has a lot of talent and can achieve a lot without the need for clients to have to go to various different craftsmen to renovate a room in their house.

At this current point in time Duncan has no online identity, when you Google ‘Vision Carpentry’ Duncan’s business does not appear. Duncans goal is to be noticed more online when people are looking for companies who specialise in interior design, bespoke carpentry, wet rooms and renovations in Northern Ireland. One thing that Duncan said during the brief that stuck out to me was:

Simplicity is key.

I am going to keep this thought with me as I move forward into the design of the website for Vision Carpentry to ensure I am achieving the clients needs and he ends up with a website that he is very happy with. The website will act as a business card for Duncans business therefore taking a professional approach to this website is a must. The website should make a lasting positive impression to prospective clients visiting the website seeking one or more of the different services Vision Carpentry provide.


Although Vision Carpentry already has a logo which they use on the side of their van, Duncan expressed that he didn’t really like it much so was open to change. I tried to stick with the colour scheme he has used for his logo and van to make sure if he did like it that they blended in without much urgent need for him to go getting his van rewrapped.

I played around in illustrator for a few hours and came up with a variety of different logo designs. I started of with some sans serif fonts such as Sansation, Harabara and Cubano. I experimented with putting small icons in them to represent the company and also kept some plain. I also played about with just using the company name and placing a small tag line below to explain the company in a few words. My favourite from the selection above is probably number 6.

I then went on to experimenting with some serif fonts such as Georgia and Trajan Pro. I added some different logo elements to try and change the brand around a bit. My favourites from this selection were 11 and 12, however after looking at the small icon for a long time I started to associate it with a dental logo for some reason. I seem to see a sort of molar tooth when I look at it so it put me off this shape.

I then wanted to see how the logos would react if they were a solid black on a white background or if the logo were to be placed on a black background. I think all of the logos react well on both variations.

I carried out the same exercise with all of the serif logos. As of yet I am undecided as to which logo I like best for the website and decided to take a look back at this once I have come up with some designs to see which logo would fit best.


Sketched Wireframes

I started off with some sketched wireframes, I had an idea in my head so I decided I would sketch it out first to see how it would look before transferring it onto a digital version. I sketched a more traditional wireframe and also my more modular/widget style idea.

I decided that I really like the second option of going for the more modular/widget style layout as I think it would be more unique and step away from the traditional design which I believe most would go for which is the spotlight area and 3 widgets style. I think this design would set my website apart from the others and hopefully make best use of the small images we have to use, this means I don’t need to go about tryng to stretch the images to make them fit a larger area.

Omnigraffled Wireframes

I moved forward with my wireframes by creating a cleaner, digital version in illustrator. These wires show the bare bones of the design and how it will be laid out. I have gone for a very plain header area with just a logo and 2 navigation links. I decided to place a sort of tagline at the top of the website before the content with Vision Carpentry mission statement as such, giving people an insight into the company immediately.

We are passionate about creating stylish and functional spaces that are designed and tailor-made to each clients requirements.

The homepage is split into 8 widgets for each service that Vision Carpentry provide as such. The 8 areas are Kitchens, TV Units, Bathrooms, Bespoke Carpentry, Home Offices, Shelving & Storage, Refurbishments and Bedrooms & Wardrobes. I didn’t want these 8 sections to appear blocky so I created it so there are 4 images variations in each row, the copy for each section also variates in length so this creates a staggered flow which I’m quite happy with and think it makes the site quite quirky.

The navigation is split into 3 different sections; About Us, Twitter and Contact Us. About Us contains a small paragraph about the company, Twitter has the last 2 tweets and the Contact Us section contains the numbers and email addresses to contact Duncan or Kathy on depending on which service you require.

I stuck with the same style for the section page. Each section on the homepage will lead to its respective section page showing more photographs of project Duncan and Kathy have completed. I have gone with the staggered looking flow of images to keep the website consistent, this uses up 3 of the 4 columns. The fourth column on the left displays the copy related to this section. The footer is exactly the same and will be consistent throughout the website.

Website Designs

Progressing on from the wireframes I started in Photoshop and essentially brought the wireframes to life. In my mind I knew to pull off this style of website it had to have a very simplistic style. Duncan had already expressed his need for a clean and modern looking website and I feel I achieved exactly that with these designs. The main colour for the website is white, with the black and white images for each section setting the design off. Using his existing colour scheme I used the green and yellow colours to add accents of colour where I felt necessary throughout the design. This began on the company tagline at the top of the homepage, I highlighted 3 words from this statement which I felt best described Vision Carpentry as a business, almost like 3 power words.

I continued the theme of accents of colour by adding a strip of green to each section, in keeping with the linear/modular design. I had the idea that the website would look cleaner if the images were black and white, but then people usually like to see images in colour as well. So I have one image in colour showing what it would be like in a hover state. This will most likely be implemented with jQuery so that when hovered over the image returns to colour. I made the background of the footer area grey to separate it from the main content of the website. I then just stylised more what I had already laid out in the wireframes, adding small icons to the contact us section to make it more intriguing.

Again the section page follows the same style as the homepage, very clean and modern. I have designed this so as when hovered over the image turns an opaque green/yellow colour with a zoom icon on it, then when clicked the image would open in lightbox. Apart from this the rest of this page is following the same design as the homepage in order to keep consistency throughout the website. All 8 section pages will be exactly the same style but with their respective content in place.


With the general design of the website all completed in photoshop it was time to start coding it to match my designs. With Photoshop itself I find it is really hard to get the product exactly as I wish it to look, as typography always looks different in the browser. So I usually do a rough estimate at fonts and then experiment more in the browser

I again used the WordPress Twitter Bootstrap theme provided by 320 press, I then set up WordPress on my hosting.

I decided to go with a subdomain of my website as I didn’t want any of the WordPress install or file changes to affect or conflict with my portfolio site. I did this simply by logging into my cpanel and then clicking on subdomains I created liveproject.poppydotcom.com, I then continued with softilicious and created the wordpress install. After This was complete I was able to log into my FTP and open my public HTML folder in which I found the liveproject folder and then uploaded my theme – I prefer to do my changes in the browser, I know at times it’s not practical however with HTML and CSS you are constantly saving to see the changes reflected on the site, unlike Photoshop where you could work for hours and forget to save then a fatal crash occurs, so it works for me.

After everything was setup I then started work on the homepage.


For the navigation I tried and tested using WordPress dynamic menus, getting this to work wasn’t an issue I just inserted this:
<#?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>
Then it worked however I was unable to style it appropriately reusing the bootstrap navigations and I did not want to duplicate code. I then thought realistically it won’t be dynamic anyway because Duncan the client has gave us all that he requires already so it’s safe to do it statically. Realistically dynamic menus in WordPress are used for big content sites however for this site we have 3 menu items and a few sub menu items so I went ahead and did it statically using the pill shape and bootstrap dropdown, I then customised colours and fonts to match my appropriate look of minimalism.

When the browser is rescaled to mobile size the navigation then disappears and reveals a box which can then be clicked and activates a slide down menu under the main content. This is very useful for mobile and a lot clearer for the user.

Main content

For the main content I used a 4 columns split by using divs with a class of span3. I then used the plugin “get a post” and added the appropriate posts. I had 8 sub categories so then I was able to place one under another, this meant 2 per column. I created the appropriate posts and tagged them with the category homepage so that when Duncan wants to change any text he is able to do so by simply logging into the backend filtering by homepage then selecting the title of the post he wants to edit, “kitchens” for example.

The look and feel of the homepage would only look appropriate if the layout was very different for each post so I took time so select the correct image crop suitable for each category also taking care that a longer image was with shorter text and vice versa this was very important for the design to get a clear understanding of typography and balance on the website. I also took some time to correct and shorten some of the text we had been given.

Image script

The script for making the images black and fade into colour was without a doubt the hardest part of the project by far. It seems quite a easy task simply all I want is to have a black and white image then on hover fade into colour however there is a big but – I want it so that the client does not have to upload two different images. A simple JavaScript fade between two images is an easy approach but this is not a solution for a client as I cannot ask him to upload 2 images especially one that requires photo editing to make it black and white, so this is where the hard bit comes in, desaturation of colour on the fly cross browser!

Firstly I came across the issue of actually getting any of the scripts to work after about an hour of debugging I finally realised that the reason for this was because the script call was in the header and should’ve been in the header under the original jQuery call which makes sense now I think about it, but at the time the line “BlackAndWhite is not defined” was getting slightly repetitive.

First Try

I came across my first plugin which was greyscale jquery plugin, this plugin worked very well in what I was wanting to achieve however it failed with responsive design and the HTML 5 canvas that it was overlaying on the images wasn’t scaling accordingly.

Second Try

After seeing that responsiveness was a big issue in this quest to find the perfect plugin I came across Hoverizr. When I implemented it worked a little with the responsiveness but scaling the browser up and down did not work it stuck with the smallest size and didn’t scale back – also the major problem with this plugin was it did not support for a lot of browsers including chrome / internet explorer which just wasn’t suitable at all.

Third and Final Try

Finally after reading through hoverizr I came across this solution to the problem BlackandWhite and to make it even better the documentation is very clear. The setup of the plugin is quite clear, to allow it to work I wrap the div class “black-and-white” around each image which I want to have the effect.

Then the script then creates an HTML 5 canvas on top of the image through cloning the original image and de-saturates the duplicated image. Then when the image is hovered it fades in the original image using CSS3 and jquery.

This plugin works effectively for all browsers and with Internet Explorer believe it or not they had created this idea before any browser  from ie7 + :
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
The full plugin in internet explorer does not have the fade effect however it does have the rollover effect which I think is more than enough for what I was trying to achieve – browser degrading gracefully is what web design in this current age is all about.


The footer consists of 3 Columns:

About Us

A simple post pull with a brief explanation about the company.


A WordPress plugin using a short code which is then inserted into a post and customised. I used the twitter name for grand designs magazine and changed the count of how many are outputted to 2, then published this, outputted the code and I used get a post again to put into my container. After this then it required some styling for some reason the plugin outputs everything in a “< code >” format so this was a bit strange, however using firebug and css it wasn’t really an issue.

Contact Us

This is quite straight forward, it is simply a list with certain styled elements however for the first time I decided to use a sprite technique. Basically what a sprite is is all the icons needed for a website / list in one file then using background-position in CSS I can then target each item Indivudually using classes for example I used the man class with a background-position of 0px 0px for the man to appear on Duncan’s list name. Using sprites is beneficial as the browser / website only has to load one image as opposed to 20 images and is much easier to manage.

Section Pages

The section pages were quite difficult in logic to work I had two different approaches to doing them until the third approach finally worked, the main issue being I wanted the full page to be dynamic

First of all I created a new page template and named it accordingly, we will take bathrooms as an example.

Approach one

Add all images into one post and float the images left then wrap the div that creates the black and white images around that


  • easy to maintain


  • the floating of elements did not work accordingly and gave uneven heights
  • hovering one image causes each image to turn colour as wrapped in same div
Approach two

Create 3 columns and inside each have a separate post, so for column one have post one, column two post two etc.


  • again relatively easy to use


  • issue with script repeating hover for each div hovered within the column
Final & third approach

Relied solely on category pulls so for the bathroom process I made 4 categories;


  • Bathroom Left
  • Bathroom Middle
  • Bathroom Right

Bathroom is the parent which means that when the client wants to find any post within this page he simples filters by Bathrooms and then if he wants to be specific selects Bathroom Left for example. There is then 1 get a post which displays the category about text on the left hand side then 3 category loops which pull the Left, Middle & Right categories respectively.

This solution works fully, it is a bit more maintenance than the original solutions however it is simplified as much as possible for the client.

The process for client

What this means is the client creates a new post per image that he wants to upload he then uplaods the image and inserts the medium image selection from the options also making sure that the option of linking it to the main image is still selected by default. After this then he selects which side / category they want it to appear on. For example if bathrooms has 6 images 2/2/2 and he wants to add another image he will judge the height himself to see which would line up best so it will be something like 2/3/2 all he does to achieve this is before publishing make sure that he has selected the category Bathroom Middle in this case.

The section page is completed by adding fancy box to the image when clicked this allows a bigger image to appear in colour above the image.

The beauty of this is before I had an issue with fancy box opening on mobile devices and not working very accurately however it is disabled on mobile so all it simple does when clicking the image on mobile is fade to colour.

I think after a few explanations to the client on how the section page works will be necessary, however I wanted it to be completely custom manageable for them and I feel I have definitely achieved that and with keeping it fully responsive this is just another added bonus.

Browser support

Something that I wanted for my project was as much browser support as physically possible and I feel I have achieved that. The live project site which I have created works in;

  • IE7 +
  • Firefox
  • Chrome
  • Safari

On both PC and Mac then for mobile devices I have tested the website on;

  • IPad  1st Generation +
  • Android Nexus tablet
  • iPhone 3G +
  • Samsung Galaxy
  • Microsoft Phone

And the site has been tweaked accordingly to fit all of these devices as I have gone along. I am quite pleased with this as before I was unable to even begin to think about doing a website that works in IE however now I am more than capable of this.

So far I am really happy with the look I have gone for, I think it has worked out well displaying all the information and photographs clearly while still maintaining the simple, clean, professional and modern look of Duncan’s business.

The Website is live at liveproject.poppydotcom.com



This week we had a crit session for our live projects. I was really happy with the feedback gained in this, not only in my own design of the site but through listening to the crit for everyone in my group. It helped me to notice small things I might not have noticed before. The feedback I gained was quite positive and I am happy that I only received one change. I learned that when displaying phone numbers on a website they should be broken up into sections rather than just displaying the numbers as a whole. Displaying the number without any breaks makes it hard for someone to read it, they can easily lose their place as the numbers are so close together.

I have made this change to my footer and I agree that it does look a lot better and is much easier to read. Its safe to say I will always remember this when displaying a contact number on a website, I will never display it without any breaks.

Refined Logo

I refined my logo slightly this week as I rushed it a little towards the end last week and it wasn’t all lined up correctly. I wasn’t 100% sure on the logo to begin with but once I saw it live on the website and received positive feedback I realised it wasn’t so bad and actually fit in with the website design really well.

I used Apex Sans Book for the word ‘Vision’ and Century Gothic for the word ‘Carpentry’.

Facebook Timeline

I created a mock up design for Vision Carpentry using my finalised branding. I created designs for both the actual page and a tab page. On the homepage I have put all the relevant information that a business would need such as their logo, name, a bit about them and their website address. I have made use of the cover photo area to display one of the photographs of their work. Cover photos are 851 x 315 px and although there are a variety of ways to utilise this space there are various rules by Facebook which you must adhere to.

Cover photos must not contain prices or offers, contact information such as web address or email, reference to Facebook features such as asking people to like or share your page, it must also not include any calls to action such as “get now” or “play now”.

Facebook is a great tool to gain an audience through photographs and statuses which advertise your business. Compeitions through Facebook also greatly increase awareness of your company and gain an audience of people who have taken an interest into your business which they have newly discovered.

I designed a tab page for services which follows the same design as the website keeping it consistent. This allows users to see the information which is displayed on your website and if they want to find out more they can then click through to the section pages on the website. Tabs are also a good place to have advertisements and competitons.

Twitter Background

I also created a quick mock up of a possible Twitter background design and also utilising the space available in the new Twitter banner area to advertise some of Vision Carpentry’s work.

The logo is displayed to the left of the background along with their small tagline, keeping it consistent with the website design.  Below this I have displayed the contact information in the same way as the website footer again for consistency.

Mashables New Website

This week mashable launched a new website, it’s very different from their previous website however I think it is moving more into the way of how the current web is becoming, which surprisingly is possibly argued a step back in design as it seems to be moving more into modular based design.

There are some very cool features throughout the site so I will talk a little about the ones that stood out to me.

Endless Scrolling

Whenever the user scrolls the page, the stories (using Ajax) keep loading onto the end of the page meaning that no matter how far the user scrolls there will be stories constantly appearing. Now in certain websites this simply cannot work however with Mashable being a news website and being established for many years this feature works perfectly and is a very rewarding and fresh approach for the user. It keeps them constantly scanning articles throughout.


Websites like Mashable require adverts to keep their revenue income and I have no issue with this. Mashable have done a great job in the implementation of the adverts. If you look at the left hand side you will see a column named “” in which they have there MPU’s, however the MPU is content specific plus it appears every 5 stories keeping a break in both the stories and a bombarding of adverts down the left hand side. When I speak about adverts being content specific I’m talking about if in a certain section the advertisers have paid to target that section.

While on placement I have dealt a little with advertising and I learnt a little about googles doubleclick. Effectively what doubleclick does is it manages the advertisements then the developers place the JavaScript on the website in the placeholder and then the person in charge of doubleclick can then target the adverts to load in certain sections / situations.  For example on Mashable if someone was in the apple section all the adverts could be of Incase cases for iPads and iPhones, clients want their adverts to be seen by a wanted audience. This makes sense in any situation and with the use of doubleclick this is possible.


Of course a big part of this website was making it responsive for all media queries I tested the site and it is slightly buggy in places when scaled up and down sometimes modules don’t appear or menus cannot be closed however over time I’m sure that they will fix these issues.

As an overall experience having a website that is mobile friendly without the necessary popup to download our iPhone app I am happy with it. Realistically everyone is moving forward to a mobile website than apps, it’s all about cost and now that responsiveness brings that solution without the clients having to spend a fortune on developing an app the majority of them are settling for a mobile website solution.


I think the approach with the navigation is very slick, they have grouped a lot of elements together such as search and then social houses all relevant social media links under one icon which is clear to the user. Mashable is a website aimed at people that know about technology and want to know more, this can be of all age groups. They can rely on their audience to pick things like this up as a majority of users will be quite tech orientated.

Another major bonus of the navigation is the stories appearing on hover I have seen this on websites while on placement, Ahlan for example however I feel for the user it is a very pleasant experience. Effectively what it does is when hovering a section it shows the user the latest 5 stories of that section along with an image and title, this then allows the user to make a decision before they click the section if it is relevant to them by scanning the articles or of course they can click an article and begin reading it.


For the website they use ‘Museo Slab Regular’ for headers and ‘Helvetica Neue’ for the body text and article intros. I feel Museo definitely gives the website a new and fresh approach to the previous bold blue headlines.

This is effectively the way the web is going, becoming more elegant with fonts and not as much needing to tell the user to click this as its a link – the user knows that in most situations now that by clicking the image or a title it will 99% bring them to the article as this is common on all news sites.

Managing Projects

While on placement learning how to track how much work / time was put on a project was essential for charging the clients properly, also tracking what current jobs I had was very important and for this I used our own Navitask system. Its a piece of software designed and developed by Flip and is their ultimate project management tool. Its a document and message management suite and is used as Flip’s intranet, extranet and CRM system. It is the backbone of the agency, an essential everyday tool. It allows all staff to manage their projects in terms of starting new jobs, assigning team members and communicating with them, maintaining an archive of all project communications, files, timesheets and documents and sharing those with clients controlling their access and allowing them to see how projects are progressing.

For my live project however I decided to take the same approach in management, to lay out my goals and give myself deadlines then hopefully that would save me from getting behind in my other modules plus give me a realistic deadline. For this process I used Google Docs.

I firstly started writing down all of my tasks on a sheet of paper then depending on importance & correct order of doing things I added them to the spreadsheet.

When I was finalised the general points I then broke it down further such as design section page and code homepage giving each a realistic timeline so that I never got behind and stressed.

I feel for this situation the planning process worked very much in my favor and I was able to instantly know each day the tasks in hand, plus if I got behind in a task I knew what I had to do to make it up and that day to stay on top of the whole project.

Most likely I will use Google Docs in my final major project, it is handy as easy to set up and maintain plus available wherever I may be on whatever device. Making a simple excel document requires saving and emailing constantly however Google Docs is hosted in the cloud and it auto saves as you go.

The planning process for the major project will be obviously more complex as many more different sections and stages to the process however if I keep updating the Google Docs regularly I feel it could be a vital tool in managing my progression throughout the process.

Finally a major bonus of Google Docs is the ability to share with others so for example if I have a freelance client I can share the spreadsheet with them and they can see the progression and add tasks accordingly dependent of course if I give them the ability to read/write.

I have used other applications such as Basecamp and as discussed Navitask, however it was just me on this project plus the client did not need to know my status so a simple spreadsheet seemed perfect.

When building a website for a client I also like to offer extras from the start as clearing up these process from the start allows me to avoid taking on another client when the client then decides they want an extra media solution.

Such things as Facebook timeline and page design, Twitter backgrounds, business cards, promotional t-shirts and possibly an advertising campaign solution. Clients regularly expect these to be part of the deal of “building a website” however on placement I learnt to make sure to clear these factors up in the first meeting. For vision carpentry I have gone ahead and done some solutions to these, as seen in week 9’s post.

LESS and Sass

There are many articles out there that explain the process of the pros and cons of the two, the most interesting I found and clear to understand was Chris Coyier on CSS tricks.

Effectively the both do the same thing they are code compilers that allow the designer / developer to write reusable CSS then when it is deployed to the browser it is switched to normal CSS. This is to avoid repeating lines of CSS that realistically don’t need to be there. For example if you are using the same colours for headings as you are for subheadings originally you would have to either create two classes one for sub heading and heading and style these with color: red. Or you could style them without color:red and create an additional class called .red {Color:red} then add this class to your appropriate tag. <h1>I’m a h1 tag </h1> Less and Sass remove this process.

To break the two down simply to show I have understanding on the two:

Sass or SCSS

It is used in conjunction with the development of Ruby / Ruby on Rails. This is through compass which is highly useful front end development group of tools for this language.


LESS is built with JavaScript this makes it most likely the more popular code compiler as it applies to all platforms as apposed to sass is specifically for ruby projects.

So how does LESS work?

Basically first step is to define the CSS class you want to define so for example I will stick with my above suggestion of changing the headers to red

@red : #FF0000

This is defining the colour red and using the @ sign is showing that it is a variable.

.subheading {
font-size: 20px;
line-height: 22px;

What this does is simple, it is creating the subheading class then whatever the variable for @red in our case the colour #F0000 this will then when the code is deployed change automatically using JavaScript. The whole point of the process is to stop repeating unnecessary code such as typing color : #f0000 five or six times etc.

My solution of course is a very simple one however any css class such padding or margins can all be defined within the variable.

LESS is also used in the Twitter Bootstrap build which makes it effectively my choice from the beginning. Also the website of LESS itself is much more informative and well documented as agreed by Chris Coyier in his article.

With predefined classes already built into bootstrap and well documented solutions on both the bootstrap website and LESS website itself i feel LESS is perfect for a beginner such as myself. I have started using it a little throughout projects such as my portfolio and my live project however hopefully by the stage of my final major project I will become very comfortable with the framework.



This weeks lecture which was taken by Chris was all about doing work in the real world. Helpful tips and tricks on how to get client work, how to manage the work, contracts and basically everything we would need to know. This was a very beneficial lecture and seemed to come at the perfect time.

Happy Monday Podcast

This week was the start of a new side project for Sarah Parmenter and Josh Long. The launch of the Happy Monday Podcast was designed to cheer people up that have just started their hard working week, although in Dubai the working week starts on a Sunday, so maybe theres a gap in the market for a Happy Sunday Podcast. The site itself is very basic and focuses clearly on who the special guest is that week and of course downloadable links and play options for the podcast itself.

This week Tim Van Damme was the special guest, I have been a keen follower of Tim’s for many years now, especially looking back at Gowalla and now Instagram. I also got a chance to hear him speak at Build Conf in 2010. His designs are inspiriing and a part of our everyday lives, this surely for a designer is anyones goal.

There was one occasion where I was having my regular Starbucks Frappuccino in Dubai with friends and one of them turned to me and said have you seen that Starbucks have a middle east website now – needless to say this made my day that I could turn around and say yeah I designed/worked on it, however I’m sure Tim has the opportunity to brag a little more often!

Throughout the podcast they talk about different discussions and different factors that affect his designs and the three of them in general. Tim was asked about inspiration and he said that he does regulary check Dribbble, however Sarah was giving the point of view that she doesn’t really do this anymore and actually prefers to design on her own and keep away from the “trends” as such as there ends up being too much similarity.

I think personally there are two ways to look at it, Dribbble is a game changer in our industry, something has never reached out to such a broad range of designers offering a chance to gain feedback and direction on a project and also a major way to promote your work for external people to see. There are many different stories you read on Dribbble where the dribbbler actually gets offered his or her dream job at the likes of Google / Apple etc. This is because the clients know exactly where to start looking to get the best of the best. The other side of Dribbble is yes it is mainstream and a wide variety of ideas are duplicated with a slight change and people claim it to be their own.

I personally find myself looking at dribbble, however I have a line that I do not cross – if I’m scanning trying to find shots that are similar to what I have done I will look at them as soon as I open Photoshop or before I begin sketches, I never look back at the previous shot, its quite a simple rule and requires a lot of discipline however I feel it is necessary not to steal ideas and to be unique of course you are still taking there ideas in cases but your putting your own flair on it.

The happy Monday broadcast I think is a great idea however I am not sure how different it will be from previous shows such as the award winning Big Web Show. Sarah and Josh presented very well for there first time doing such a show however at times me as the listener felt some awkward silence or conversation breaks that just didn’t go the way they had hoped I think most likely this is where the big web project will be more successful as they are all using webcams.

Google Hangouts

Recently I have been using Google Hangouts to talk to my friends in Dubai. It never fails to amaze me at how advanced webcam technology has become today and that it is all through your browser and not a native app.

The design keeps the obvious Google feel to it and keeps the design consistent throughout right from the icons, sidebars and to the where the webcam feeds are presented. This I think is very important for any product especially Google, I looked at some previous releases of hangout where they feature a dark bit along the bottom and it features the icons based on it as can be seen here. However I think the much more minimilstic approach they have now took works much better and doesn’t take away from the main feature itself which is of course the webcam conversation.

The application within the browser is also fully responsive – I find this really amazing and I imagine there has to be javascript involved as when rescaling the browser there is no jumpiness and the feed is quite clear from big to small.

I will now go into talking about the features of google hangouts as a whole and why it is different from other applications such as Skype and iChat;

Up to 10 webcams

The purpose of Google hangout was to combine people with a tool that they can have multiple people in one conversation talking simultaneously. The application does not require an install and is a click of a button to start a hang out. You can also change the settings to private or public hangouts meaning it is perfect for the likes of video conferencing and private conversations. At any point you can change who is the main feature on the screen this makes it very useful for listening directly to the person that is talking – something that could maybe be implemented further on this is that when someone talks it automatically switches to them on the main screen.

If the hangout is set as public then anyone with a Google account can join and it will feature on your Google plus account that your in a hangout.


Screensharing has always been an offer for webcam applications such as iChat or Skype however Google Hangouts allows it within a browser. There is one downside to this though when screensharing is selected you only really have control of one windows in any application that is selected by the person sharing their screen – for example if you wanted to edit a word document whatever screen is active is the one that will be controllable accessing things outside this window doesn’t work unfortunately however it is still some very advanced programming to get it to do that.


My favourite part of Google Hangoust by far is the ability to view YouTube videos together, so when chatting to friends you can be like did you see this video, then paste the URL into the browser app and it will play the video to all viewers. This also then mutes all microphones to make sure its uninterrupted viewing. I feel the successful integration of this works so well and leads the way in webcam sharing as we see it today.


Amazon this year launched their new website a few months ago and it features a responsive template however has a twist to it there is a certain point just beyond iPad screen size that it stops and doesn’t drop the whole way down to mobile while rescaling in the browser. However they do have a mobile version and also many apps for Apple and Android etc, which the user can buy off.

The nicest part of the responsive design is it doesn’t hide or take away anything it only adds if you have a bigger screen. For example on my 15inch Macbook I have 4 products in a row however on my brothers 27inch iMac he has 8 products in a row giving him more variety that is visible but it doesn’t subtract from my experience just improves his.

The design of the website is uses white space to their advantage and utilises the key point of sales which they want to promote. From the start the user is directly shown the Kindle (amazons number one product) then if you choose to use the slider they have done something quite different from other websites usually the slider would start from 1-6 but amazon actually start at 4 of 7 meaning 3 on each side can be switched to plus the importance of each product either way the user goes is of same importance. This is a really smart way of displaying the information and means the user will always be interested in something. Another interesting factor on the slider is that they do not feature any navigation buttons to “slide” through each thing or have an automatic changer. Its up to the user to click on the other links in the slider to see the information. I see this design point as both an advantage and a disadvantage.

Advantages being that it gives control to the user and makes them make the decision whether to click it or not. Now if a user clicks on the title to see more information and they like what they see chances are they will continue on and click on the view more links.

Moving past the main slider dependent on whether the user is logged in or not will decide what the next content is. If logged in then it will show related to previous searches or purchases however if not logged in then will show individual sections according to popularity.

Amazon in its side bar focuses its advertisements and pushes its current deals however they still have a few MPUs promoting other products which I assume the clients pay for to drive them to there assigned products for example I seen a MPU which promoted Logitech and instead of going to the Logitech site it brings me to the search results for the product within Amazon.

The content from there on is row based as discussed above this then scales depending on the size of monitor something that they do well is change the layout based on image sizes. For example when viewing down the different rows if the columns were all the same size I as a user would simply loose interest however with the use of images they keep this interest there and the usability. By showing me the latest 5 books in a portrait image format or 4 related products in a landscape image format it breaks the website up and stops it from being too repetitive changing scanning a page to reading.

New Google Maps App for iPhone

This week was the launch of the new google maps app for iPhone and I can say that google did not disappoint the users. I actually have a lot of respect for what Google have done here in making such a quick turnaround of this app and offering it for free because realistically after the way Apple just dropped their current maps and the two companies being such rivals at the moment in the phone market Google could just never release an Apple maps alternative and Android would take over that market completely as a unique selling point.

As discussed above with Google Hangouts the design is keeping with Googles new style, minimalistic and a traditional white colour scheme with grey icons. They have made the map the map the feature and have a simple search bar along the top which then along the bottom have the various different options to route a location when search has been enabled etc. The only flaw that I have with the app is the small 3 dots to the very bottom right of the app now they are visible however I find them quite hard to press as the hit box of it is quite low this then in turn opens a navigation on the right hand side. This I think is pretty bizarre because after learning about its location I then closed the menu and instantly swiped the right hand side thinking it would open like many different menu variations where I have learnt to do this, however it simply didn’t open and moved the map instead. Main thing is that Facebook and other apps do their main menu on the left hand side and activated by a button or a swipe and users have learnt this to take this feature away seems quite strange to me as it is a trend that is already established which they are going against.

Apart from this usability flaw I think the application works very effectively and as an Apple fan I can still admit is a lot more usable, reliable and effective than Apple maps.

Finally the icon design for the app I think is very fitting it keeps in google’s new approach to the logo (g+ orientated) and then features a road, grass, water and disserted land this is as broad as a spectrum as they will get and they are able to combine it all subtle coloured icon.

Team Tree House

I have been using Team Tree house for a few months now I find it very useful. It consists of video courses and exercises that help teach different skills dependent on what you want to learn. These range from simple HTML, CSS to Android App development.

It makes learning interesting and the ability to get badges keeps me hooked trying to get more. At the end of each exercise it will then ask questions some based on multiple choice some on input the answers to these will then decide if you were listening / paying attention and can continue to the next stage and receive your treehouse badge for that topic.

The main feature of treehouse is usability, having experience with tutorials websites before it is quite unique to find a clean interface to these type of websites. A bad example of how not to do a tutorial website would most likely be something Lynda tutorials however team treehouse have put a lot of effort into making the style usable and beautiful.

They have got the learning process down to 3 stages with very clear selections the whole way through with chunky clear buttons.

  1. Firstly you select the topic which you want to study
  2. Select what lesson you want to learn if not locked
  3. Watch video and begin learning

This simple process has been refined greatly and works effectively.



This semester has involved a lot of hard work and late nights. I have carried out various different prototyping exercises for different things that will be used in my final Major Project. I decided to go through the previous 11 weeks and recap 6 of my main prototypes I have created to make sure they are all collected in one post and so I can reflect upon what I have achieved.

Major Project Prototyping Recap

1. Google Charts API Prototype

Since I will be using a lot of infographics throughout my final major project I thought it might be an idea to have a look into the Google Chart API. After playing around with it and coming up with a variety of ways in which I could customise it, I was very happy with the resulting pie chart I created. Google Charts have many other types of charts available but this one is definitely my favourite. It could prove very useful in YalaDXB and may make an appearance along with some other numbers information.

2. Map Generator Prototype

I played around with this a bit testing out the features. Then decided to customise my own small map to see if it would be useful for my project. When I added the map to my page it seemed quite glitchy around the marker, I’m not sure whats wrong with it but I couldn’t fix it. As you can see the marker image has a glitch on it that looks really bad. Therefore I think I will be avoiding using this tool unless somehow it gets fixed, but I have tried a few different things and it still looks the same.


3. Display Checkins on Foursquare using KML Link

I was playing around a bit with the Foursquare API originally and came across this cool and very simple way of using Foursquare to display data. It displays your Foursquare checkins on Google Maps by simply using KML link you can get off your Foursquare feeds page. You simply copy that link and paste it into Google Maps search, this then displays a limited number of your checkins. You can choose to display more checkins by simply adding the number to the end of the link like so ‘?count=100′. Obviously this would be displaying the checkins of one users account so wouldn’t be useful in YalaDXB unless it displayed multiple users data.

4. Instagram Prototyping using Snap Widget

I wanted to try out some stuff with Instagram that I could use for my Major Project. I had originally thought about showing photographs that were tagged to a certain location, then I realised the widget I used to put my instagram feed on my portfolio had a new update. This update allows you to show photographs on a map that are posted by a certain user or have a particular # included in them. You can check out the prototypes by clicking on the image below.

These instagrams on the map aren’t very accurate as they are using hashtags, so even though the photo may be tagged #Dubai it could have been taken in a different country therefore appears on that different country on the map.

5. Instagram Prototyping using Instagram API

I found a tutorial that explains how to pull photos from an Instagram users feed. I then realised I could amend it so that it allows you to pull images that are tagged at a specific location, this is exactly what I need as it means the content is more specific to the area and therefore likely to have better images. Images are retrieved using PHP’s curl library to send the requests. After getting this working to pull my own Instagram feed I then had a look at the Instagram developer documentation and found how to amend this to pull images uploaded from a certain location. I simply found the latitude and longitude for the Burj Khalifa, changed the distance to within 400m and managed to get a feed of photographs.

For YalaDXB I could use this for all the locations on the website, by simply amending the latitude and longitude for each. Allowing each tourist spot to have its own unique Instagram feed of pictures tagged at that location.

6. MapBox with Foursquare API

This is definitely a working prototype that will be used in my Major Project. At the minute it is maybe not exactly how it will be used but definitely the majority of the things I have learnt to produce this will be used to create a similar map in the YalaDXB website. The prototype has a map of Dubai with a series of different markers on it. When hovered over each marker displays the name of the location. The location name is pulled from Foursquare and therefore is displayed in both English and Arabic.

Once clicked on a tooltip displays the number of checkins at that specific location and the amount of users this includes. MapBox with the Foursquare API is an extremely powerful tool which will really enhance YalaDXB and help engage a social audience.


Implementing SEO for Live Project

Over the years being the top of Google and other search engines has been one of the many requests by clients, and even more so how quick can I be the top result for “Northern Ireland furniture” or top result when searching “interior designer”. However Google doesn’t for one give instant results unless you are willing to pay for it.

The truth is that SEO as a whole is a time consuming thing which needs to be nurtured. You have to keep adding to it and finding ways for it to be better each day that’s why the job SEO specialist now exists as its not as 2 minute thing, however there are steps you need to always take at the start. Defining these from the start is half the battle to good SEO.

When asked for the live project to research and achieve these goals, obviously not all are achievable, however I have researched into how and when I should implement SEO.

As said previously, SEO doesn’t just happen instantly, in fact a bit like my analogy of how building a house is similar to building a website I think I will analyse SEO with growing a plant.

The Pot

This is your keywords, what does the client want to appear as within the search engine. For the live project, Duncan and his wife specialise in:

  • Interior Design
  • Bespoke Carpentry

However these terms are quite generic so it’s important to specialise on these. There used to be a point in SEO where with the use of meta tags in the code you could find anything so if your site was for a zoo and you added popular google searches such as “cat meme” it could in some situations return your zoo! But luckily this “cheating” of the system has changed and it follows a much more organic growth.

By adding content in my website in certain html tags is how I access these keywords so in my case I have used the tags <h1> for my middle of the website which then in turn shows this is the most important part of the page as it has the most important tag. Within this then if I target the selected words with bold this will then show even more importance, this is how the ideal keywords come into play.

The Soil

Having Google Web Analytics in your site from the start will greatly increase your SEO and once Google bots have started searching it will pick it up faster and be able to tag it accordingly to your account.

Tweak your website Urls for a default WordPress site the URL will look like this “http://liveproject.poppydotcom.com/post.php?post=378″ however by accessing the permalinks options within the admin side we can change that to say the actual post name so now it will read “liveproject.poppydotcom.com/kitchens” this URL makes it recognisable to google and will allow you to get again a higher search than just having the post ID as its not relevant.

The final thing to do that greatly increases the chances of getting indexed quickly and effectively is by submitting a direct site map to google then it knows instantly “oh there’s a new site I better index all these pages”. Sitemaps are in XML format and allow you to place your links and subsection.

Planting the Seed

Know your website and keep the content updated regularly. it is hard to do this in portfolios for example as all you upload is the latest image of the project and your done however try and look into this further and instead of that make a dedicated blog post on each project and explain your skills at you used them the next time someone searches for web designer you will have much more chance in appearing as more entries and not a static site. Google loves blogs so its important to keep this up to date.

In my case for Vision Carpentry I have all the content based into separate pages and its dynamic that if Duncan wishes I can easily make an inner page describing the product in more detail and a possible gallery of images from different angles. For this to work on the website side simply all the user has to do is click the image of the piece that interests them within a category page and then it would automatically go to this new page. I think if my website gets chosen then I will suggest this to Duncan plus having an extra gallery of images would be great to show the craftsmanship that goes into his work, which effectively is the whole point of bespoke furniture it has to be unique unlike mass produced products from Ikea etc.

Keep Watering the Plant

Be patient SEO doesn’t happen overnight and requires a lot of tweaking along the way, the main things to look at and keep revisiting are:

  • HTML Tags
  • Correct URLs
  • Dynamic content

Websites that are news websites or interesting blogs however are coming through instantly since the release of Google News, so keep checking if creating a news portal website that you are appearing in Google News. It is quite common at the start for Google News to be slow at registering your sites content however keep at it.

A great way to instantly get to the top of Google is though Google Adwords. So what is Google Adwords? Effectively every time you search on Google there is results highlighted in a yellow box that based on your searches are paid to be displayed in that area. A perfect example is when you search for “Apple Mac” a second party companies advert will appear I this box as obviously Apple will have the top results as they’re the main party seller. Adwords are charged based on usage so you know exactly what you are getting for example if you sign up to the deal of “50″ clicks for £20 a day that’s exactly what you get based on the keywords that you select.

Plant has Grown

Something that is important is that SEO techniques are constantly changing, there are thousands of blogs out there with completely different situations and solutions however this is simply my spin on what I’ve read and practiced.

One final thing I would say is since that SEO has changed and is constantly changing, what happens if tommorow SEO is completely different from what it is today? This is how newsletters and subscriptions to your blog come in, try and get a presence and a group of people that believe in your product and want to know more.

As well as newsletters social media implementation and presence is a great asset in linking users to your site. Everyone understands the concept of liking a Facebook page and some have millions of followers. With Facebook it allows them to see your updates but it doesn’t become a hassle like an app newsletter would, just when they’re scrolling through their timeline your post of a new table that you handcrafted for example appears with pictures and a link directly to your site. This is perfect for driving more and more visitors to the website.