RSS

Creating an additional version for the iPad/tablets?

In last week’s workshop we were shown how magazines are created for the intention of the tablets and the iPad in Adobe InDesign. It seemed like it would be very easy to create, and I thought about the idea of creating a second version of my web app; for the intention of being used on a tablet. This would allow more users to access the information that I am creating for smartphones. In the industry it would be expected for the creation of a website to cover all forms of technology that we use to access the internet, which would mean that creating the magazine afterwards would be good practise for me.

It’s just a thought but if I have enough time after creating the web app, I might create a magazine version for the tablets. With the previous experience with adobe InDesign, it should be a lot quicker to create than the web app, as I will already have the resources, and the knowledge to create it.

 
Leave a comment

Posted by on January 14, 2013 in PCA - Interactive Design

 

Learning the design process: Dreamweaver CS5.5

David Powers, Dreamweaver CS5.5, 2011.

I was recommended a book by David Powers, “Designing and Developing for Mobile with jQuery, HTML5 and CSS3”. The book displays a step by step guide to creating a mobile website/app. This will benefit me to gain a better knowledge of how to create the structure for a web app. I have learnt a lot from the workshops up to now, and have learnt that in the newer versions of Dreamweaver, creating a website has become much easier than when it used to be all about the coding!

I will now work through the book to create a working web app, and product me results and evaluate what I have learnt, so that I can then begin drafting and creating the web app for my chosen theme.

The book was fairly straight forward, however I came across several issues due to working with a newer version of Dreamweaver  and possibly the mobile templates/jQuery files having differed since the book was created. Here’s a list of the issues that I had:

  • I had to manually add back buttons, as in CS6 they need to be enabled through the jQuery functions panel
  • Back buttons don’t automatically create themselves, and when loading external pages from index.html the back buttons it says will be created do not appear.
  • Clicking on the image does not load to the next page as the “href” is placed after. However, you are told to place the image first to allow auto re-sizing, which does not function correctly as displayed in the book.
  • As it mentioned that it should automatically create back buttons when browsing (though in the version I used from CS6 I had to manually create them on each page), it stated code which would be useful to prevent the homepage from being given a “back” button (data-backbtn=”false”) which would be inserted to the div for the header. This however is beneficial if it does work properly when taken to a live web space, so I will keep it in mind with my design.
  • Later it explains how to add an icon for the back/home buttons. Upon doing so the images were not added, for reasons which I don’t know, as the coding is the same as the tutorial’s finished version.

Having issues from following basic tutorials can become very frustrating as the code is the same, and I don’t know why it would not work, other than the external files differing and how mobile websites/apps work compared to when the book was made in 2011 to now. I guess this is why it is always better to use the tutorials as a starting point to your experimentation to create something; a theory I had when I began graphic design and teaching myself how to use some other programs from the Adobe suite after seeing what others had created and watching online tutorials.

I had to research on the internet about why the automatic “back” button had been disabled in the new version of Dreamweaver. I came across a forum topic on Adobe which explained that it was not due to Dreamweaver but a change in the jQuery JavaScript file. They mentioned a website that explains how to “re-enable” the feature, that also explains many other functions with mobile websites that I found to be very useful jQuery Mobile

I have gained a lot of useful information from the book; and been able to learn what I wanted about creating mobile websites, as without it I would struggle to find the specifics that I would want to know for where to begin making one.

img_tut1img_tut2

img_tut3img_tut4

I have learnt that working from the template and not redirecting to additional .html files has worked out to be more reliable than redirecting to other .html files. That may have been the coding, though I followed the tutorial in the book so it shouldn’t be. I will need to look further into automatically re-sizing the images; there is probably another function which is turned off by default. If I can’t amend it then I will simply re-size the images manually, which is not a problem.

I now feel capable of creating the mobile website, since following the tutorial to create a basic website with a navigation page which links to other pages. I have also read up to understand what further you can do, such as animations when you click the navigation links, adding collapsing bars and more; so that I can get a good idea of what my website will look like and what is available to include for functionality on a smartphone.

 
Leave a comment

Posted by on January 2, 2013 in PCA - Interactive Design

 

Chosen theme: Housestyle and ideas for interactive product

I was hoping that Porsche wouldn’t already have created a mobile version of their website so that my ideas could be entirely based upon my ideas analyzing their website initially. But now knowing what they do have, I see what I could create if I had more knowledge with creating websites for mobile.

You can see the images taken of the mobile website below, and will be able to notice that the style is still consistent with the main website version. This is something that is very important with a business when you create something for them which will be used on multiple devices. It’s a similar idea to what I was thinking to create, so my ideas haven’t been swayed entirely.

mobile_porsche2mobile_porsche3

I spent some more time comparing the mobile version of the website to the original, and there isn’t really anything to fault it on with making them relate to each other  This version is the main portion of the original website on a mobile, without the large background image of a Porsche and empty areas on the sides and footer of the web page. This means that I will need to create something different, or create something similar which isn’t an exact copy of what has already been created.

Here’s a view of the layout compared with my new idea;

Porsche web design Porsche webapp design

You can see that the website itself is very basic, which I feel is what it should be for a website designed for smartphones. I have decided to go for a gallery style website, where the user will click on an image and be redirected to a specific page to that image; here being the chosen Porsche model. There will also feature a menu underneath for general information such as contacting, finance etc (the categories displayed on the original website). I intend to add a button to post on facebook/twitter as this seems to be a regular occurrence on the business websites that I have researched, and also appears on Porsche’s website.

There is a total of 32 different cars that Porsche display information about on their website. For the purpose of creating a web app I will limit the number for my design to 9, so that it can fit to my initial design, and restrict myself from making the design become a copy and paste job for the majority of the work.

Do I feel that the design I have adapted to from the original is better than the current for the purpose of a website on smartphones? Yes, simply because the navigation is quicker and easier to find what you are looking for. As I have mentioned time and time again, you use the internet on a smartphone for quick browsing, so you want there to be a deal of functionality on the websites that you visit so you can spend less time trying to click the right button or view an image you can’t find. I admit that a list of the cars is as simple as it could get, but I think that by relying on an image of each car as a substitute of this, it would be visually more appealing to the public, and thus would make this version used more than possibly what it is currently.

The main issue with a mobile website is the buttons. If they are too small then it will become frustrating to use, but if they are too big then it will look ugly and like a set of “tetris” boxes rather than a website. But considering the reduced screen resolution and size compared to viewing it on the computer, you do have to adapt, and allow for a lot of the text information and wallpaper images of the cars to be removed. The reasoning for this is that you would be forced to do a lot of “scrolling” and “pinching” to read the text and zoom in on the images. This will result in the webpages being slower to load, and you’re eyes can become easily tired when having to read lots of text from a smartphone device. This is why I intend to create a simple web app, with boxes containing an image of each of the 9 chosen cars, as opposed to a scroll-down list. There will also be a drop down menu that will feature the additional information, such as is included on the main website so that there is a continuity; meaning that you can view the web app I am creating and instantly recognize it with Porsche  but also not feel you have to view the website version to get information that wasn’t available here.

Given that I was making this web app for Porsche officially with this design, then the boxes would contain each type of Porsche car, that would then redirect you to a list similar to that of their current design, to pick the version of that type of car. This would mean that all 32 cars aren’t featured directly on the homepage; cluttering up what you want to be very basic.

The following pages for when you click an image to view information about the cars, will be much the same to the current pages. My intention was to include a slideshow set of images for the chosen car, and a list of categories to view information about the car. However, as you can see this style has already been applied to the current website, so I will need to vary things up a little so that it is not an exact clone of the original.

 
Leave a comment

Posted by on January 2, 2013 in PCA - Interactive Design

 

Mobile websites: The good and the bad

Since the mobile web has taken off with the popularity of smartphones, and more recently apps, websites have been creating an app version of their website, allowing more functional gestures and extra effects/functionality to their website that just viewing the website through the web browser on the mobile would not allow. This makes it easier for the companies to connect with their customers; allowing them to notify the user when an offer is on, or certain stock is available. You can enable notifications, regularly upgrade the app for whatever reason, and quickly access your favourite places, staying logged in and the fact it will be more compatible for your specific device, rather than being made for the whole range of smartphones/tablets.

Here are some examples and comparisons with their computer version, mobile version, and app if it is available:

mobile_facebookapp_facebook

Displayed here is the mobile version of the facebook website, and the app for the iPhone. The difference isn’t great, they’ve just allowed more interaction with the touch screen, so that you can swipe left-right to view who’s online to chat to, and your navigation sections (friends, messages, news feed etc.). The main reason for facebook to become an app, is to that you can receive up to date notifications automatically when you are messaged/tagged/invited to something from there. With the website, you are restricted to being given notifications by email, which will only be given after each scheduled scan for new emails (hourly, daily etc), which drains battery and doesn’t always display every notification that you receive; it’s very unreliable in comparison to the app.

mobile_footlockerapp_footlocker

FootAsylum has created an app version of their website for the same reason; functionability for smartphones and notifications. You can see that the most notable difference is the search bar at the top and the footer navigation. These features work very well in an app, but possibly not so much on the mobile website as it would require additional coding which isn’t available? I’m not sure, but comparing the two, I would rather use the app, so that I can keep up to date on a website which I visit regularly.

mobile_o2

O2’s mobile website I found to be very frustrating and difficult to browse on. They seem to have taken the creation of a “mobile” version of their website quite literally; and shrunk the width of the original down to fit the smartphones. This results in a very long page which makes you spend a lot of time scrolling to figure out what is going on and where things are that you are looking for. I recently tried to use this to try and top up my balance on my o2 sim, and found it hard to do so compared to the original version on the computer. This same version is forced on tablets; making it impossible to sign in to top up, as the feature doesn’t work. It is incredibly annoying to want to use the tablet/phone to lie down away from the computer chair to do something and having to revert back to old methods to complete a process.

mobile_ebayapp_ebay

eBay’s app is very different to their mobile website. There are many extra features such as scanning a barcode, a running number of watching/buying/selling at the top, and notifications when items are ending etc. The mobile website is very good; which is a tidy version of the actual website, looking very similar. The app however makes the website much easier to navigate and do what you desired, as you can search, watch an item, bid, and contact sellers/buyers easier. The notifications that you receive from apps is what generally makes them better than the mobile website, but here you can see that it also has a nicer appearance and has what you need where you need it, instead of having extras such as “popular categories”, as shown in the mobile website version.

mobile_dabs

Dab’s mobile website is a mix of o2’s and eBay’s; you get the functionality of nicer looking buttons and the like to access what you need to for buying/selling, but you are given excess data, with a long scrolling list of “hot deals” to navigate through before you do anything. This is the same as on their main website so in that sense there’s nothing to criticizing it on, but mobile websites should be cut down on the information so you can quickly process information and do what you wanted to. I feel that mobile phones are used less for internet browsing, and more for socializing  When you do use the internet, it’s usually to quickly search for something or to buy; rather than spend hours browsing through a website.

mobile_porsche

Porsche’s mobile website does exactly what I expected of a website designed for smartphones. They have cutdown on the information, and made it easy for quick browsing to find what you want. The homepage has a list of each version of their car, and then a submenu of the model for each version. You are then redirected to a page which gives you written information on the chosen car and a slideshow of images. It does what was intended and you can’t fault it. It’s a shame that my theme is Porsche, I should have chosen o2 or Dabs!

 
Leave a comment

Posted by on January 2, 2013 in PCA - Interactive Design

 

Website deconstruction

I originally thought that the website’s style would differ depending on the country, as some like to have a different website to, say America from the version for United Kingdom. From experience this is often for Clothing/food websites, simply because the nationality may have a different type of audience to target in a certain way for advertisement. Here’s some examples;

KFC | http://www.kfc.co.uk | http://www.kfc.com

Website_KFCUK Website_KFCUS

McDonalds | http://www.mcdonalds.co.uk | http://www.mcdonalds.com

Website_McDonaldsUK Website_McDonaldsUS

Footlocker | http://www.footlocker.com | http://www.footlocker.eu

Website_FootlockerUS Website_FootlockerUK

So you can see that depending on your location, you are given a different website. The website will generally change depending on the seasons through the year, but both regions’ websites differ dramatically here. The difference in target audiences is a large separation due to the cultures that they live in. America seems to rely a lot on using celebrities to advertise their products, aswell as relating products to the sports and heavily focusing on social networking. We are slowly catching up with them though.

They also differ with several car websites, such as Honda, Volkswagen, BMW and i’m sure many more. The interesting thing here is that some of them will try to copy eachother, but will have certain different style aspects such as the positioning/choice of images and background colour.

Examples:

BMW | http://www.bmw.co.uk | http://www.bmwusa.com

Website_BMWUK Website_BMWUS

Honda | http://www.honda.co.uk | http://www.honda.com

Website_HondaUK Website_HondaUS

Volkswagen | http://www.volkswagen.co.uk | http://www.vw.com

Website_VolkswagenUK Website_VolkswagenUS

BMW is an interesting one; the style is almost identical, but the UK version has a larger navigation and text; maybe we find it harder to read on their site and they changed it for that reason? This same theory applies with Volkswagen’s website, it’s bizarre why they would change the font size for one version of their website depending on the region. They also include a completely different name for their website instead of it just being the domain’s country code. Stereotypes and general assumptions tend to have a big effect on the appearance of websites, as creating a website by them will in turn create a stronger reaction which will result in the advertising to be successful.

Porsche is one of the few major brand companies that I have come across which have an identical website regardless of your nationality. You are initially brought to a splash screen which gives you the option to pick your country, and then you are redirected to porsche’s website displayed in the nationality that you have chosen. If all websites were like this then there would be a lot less confusion over the web, but you can understand that other companies alternate the website’s visual style to advertise better for the chosen country.

Porsche | http://www.porsche.com

Website_Porsche

Ferrari also adopts this format, but I would assume that the reasoning is that they do not require different tactics to advertise to the public in different countries, as everyone knows their cars the same; luxurious, expansive, fast.

Ferrari | http://www.ferrari.com

Website_Ferrari

 

To conclude; food and automobile websites are designed for quick browsing, therefore they will generally be displayed without a scroll bar  so that you can view large images, and click to the next one. Scrolling generally seems to be for online stores; such as clothing, groceries and furniture. It seems odd however, when certain websites are almost identical besides font/navigation sizes. I can understand the overall colour choice differing and choice of images, but it feel as if they are being picky with which nation they make more of an effort for. This theory could also be evaded due to the fact that some companies have completely different domains for each nation, which could mean a different website designer created each one.

 
Leave a comment

Posted by on January 2, 2013 in PCA - Interactive Design

 

Interactive Design – Initial thoughts

This module has a slightly bigger choice of interactive media that I can create and programs to use than the Motion Graphics module. From the beginning I decided to choose Porsche cars, because of their clean, stylish design which suits my interests of design, but also because there will be a lot of assets for me to incorporate into my interactive product due to how big they are in the car industry. I thought that I would either make an application for android, or create a web app. I decided against the alternatives of a website/iphone app for separate reasons; A website would become a repeat of another brief we have, and it would be difficult to create something different when the chosen theme already has a perfectly functional one, and iPhone apps require you to buy a license which costs around £100 per year. The use of web 2.0 is becoming rapidly dependent on mobile technology, to the point where people will rarely sit down on a computer to visit a website or do what they normally would, because it is all available on their mobile phones. This is why for me, I feel that creating a web app would be the perfect choice, so that I can stay up to date with how technology is evolving. It will also give me an idea to learn more about it, as I was unaware of mobile versions of websites and web apps being such a big deal. It’s one of those things you often don’t think about because you are easily consumed by all of the different technology that is available to you.

The next stage for me is to begin looking at Porsche’s website to get an idea of their housestyle and what kind of assets I can include into my interactive media product. From there I can draft a design and figure out some ideas of what I will be making. I will also need to compare the style to similar websites, and look at web apps for companies to see the general style and what features they include.  I will have to be careful with the design; such as the font type/size and the choice of images, taking into consideration that the final product is for the intention of being used on a mobile phone rather than a computer. This will mean that I will have to test my web app whilst creating it to correct any sizing errors I may create.

 
Leave a comment

Posted by on January 2, 2013 in PCA - Interactive Design

 

Evaluation

Being tasked to create an advertisement for a product, I chose the product of a cleaning spray, as a branch-off to Powerade. I had intentions to include more than I did, but due to the limit of time I had given myself and comparing it to Powerade’s own adverts I chose not to include them. I wanted to include some typography to form the shape of the product, but Powerade focuses more on showing a live showcase of the product in action, and uses words to describe it at the end and during.

I feel that besides what had not been included, I was able to follow the storyboard through and achieve an animation that I intended. The most successful part would be the intro, with the animated radial stripes. The video was more of a learning curve for me, as I had previously used flash for a game. I did learn new things however, most importantly how you can convert an image to a movie clip, and by entering the movie clip and converting the image inside to a graphic and animate it, you can then have it as an image you can repeat at different stages in the animation, and also include different sizes/colours of it, but keeping the animation the same.

I feel that it could have been improved a lot, which had become a downfall mainly because of myself. I didn’t give enough time to achieve what I wanted, and thus was not able to include any audio and further research. I chose a safe kind of animation rather than the “onion skin” or stop-motion. With the choice of animation I feel that it worked and I was able to create something effective. I would have liked to create something longer as it just reached the 20 second requirement, and I could have experimented with a different technique to make things a little more interesting.

 
Leave a comment

Posted by on November 5, 2012 in PCA - Motion Graphics