I still believe that I have made the right decision to use WordPress to create my personal portfolio website.  I have learnt a great deal about HTML and CSS that I would not have learnt had I used Flash to create my site. If I had created the site using Dreamweaver I would have missed out on the functionality of having a WordPress back-end which enables content to be changed and added easily. Having learnt how to create a theme from scratch I would now seriously consider designing more themes for myself and potential clients.

There were a few minor niggles with using WordPress. I found it quite hard to control the layout of the actual content within pages and posts, for some reason space breaks kept collapsing for no apparent reason and it is difficult to control widows and orphans within the type.  There are probably plugins to fix these problems and I intend to keep exploring the possibilities so that I can make my website look as good as it possibly can.

I created the website live on the web, primarily because I did not know how to turn my mac into a server which meant that all my mistakes were there for the world to see.  If I create another site I would definately look into how to do this offline. However, it was good learning experience being able to see the effect of every experiment straightaway!

I did feel a bit restricted by my limited knowledge of HTML, PHP and CSS which impacted slightly on my overall design. For example, I would have liked to have added more visual navigation links rather than just underlined words, but I just did not have the time to keep experimenting with how to make this work. Over the coming months I intend to keep learning more about these programming languages so that I can keep improving upon my site.

Design

I think I have fulfilled my design aims for my personal portfolio site.  I wanted to create a site that was easy to update, user-friendly and did not detract from the work contained within it.  It may not have fancy animated features but it works and looks very professional in my opinion.  If I was to design the site again, I think I would have spent more time designing the header and the background and possibly incorporated more of a ‘personal’ style.  At present I am still deciding what my personal style is and I feel that I will need to produce a lot more work before I will know the answer to that question. I am happy with how my work is displayed within the portfolio and that users are able to effectively zoom-in on the content to see the detail.

Conclusions

I consider my portfolio website to be very much a ‘work-in-progress’ and I intend to keep making changes to it and using it to publicize my skills. I found the construction experience a bit frustrating at times due to my lack of knowledge, but now that I have finished it I am still amazed at what I have accomplished and I hope to keep building upon what I have achieved.

After looking at several portfolio websites I noticed that a lot of them shared a common structure, as follows:

• Home or welcome page – with most recent work and/or blogs
• Portfolio page – with links to individual project pages
• About page – with personal information
• Contact page – with contact details or contact forms
• Blog page – for blogs

I decided to adopt this structure for my portfolio site as I thought that it would be a familiar to most users and fulfill my requirements.  Once I decided the structure of the website, I began thinking about the actual layout and design.

Layout Design

During my research there had been two websites that had particularly appealed to me : anderbose.com and purpleraincloud.com I especially liked the modular design and colours/textures used by Anderbose.  I tried to create my initial layouts using a variety of industry software packages including Photoshop, InDesign and Illustrator. I found that Illustrator was the easiest to use for creating the rough layouts because it allowed me to set the document width in pixels and I was able to position elements on the screen easier than in Photoshop because it did not place every new element in a new layer.  I experimented with a couple of colour schemes and layouts:

After much deliberation I decided to work with the cream on black modular design and began to think about how this could be converted into a wordpress theme.

Developing the WordPress theme.

One of the reasons why I chose my hosting provider was the fact that an automatic install of WordPress could be done via the CPanel thus saving the tricky requirement for creating various database folders.

Meanwhile, I had purchased the book WordPress 2.7 Complete by April Hodge Silver and Hasin Hayder, published in May 2009 by Packt Publishing hoping that it would help me build the theme from scratch. However, I felt that the book did not go into enough detail on how to do this because it assumed that the user already knew about html and css. Consequently, I turned to the web for help on on to create a WordPress theme. Fortunately for me I found an excellent tutorial on www.wpdesigner.com which went through the code required to create a complete theme in baby-steps and really explained the purpose of each piece of code. I can highly recommend this tutorial if anyone is thinking about creating a theme from the beginning.

Once I had created all the PHP files required to make the theme work, I began to experiment with the style sheet to see what effects I could achieve.  Using basic CSS I was eventually able to replicate a layout very similar to my initial layout by applying a 1pixel border to each div.  However, this did not look as stylish as I had hoped and I began to research how to create rounded-corners.

Rounded-corners

It would seem that I had un-intentionally chosen a design that I would be unable to recreate using CSS alone. I discovered that it is not possible to create rounded corners using CSS. Yet they were everywhere, so it must be possible! ?  After trying a couple of rounded-corners tutorials, which involved positioning an image of a ’rounded-corner’ at the edge of each div, I gave up deciding that it was too complicated.  That was until I read about slicing layouts and positioning them as background images in the html code.

Web-Slicing

After learning how to slice my layouts for the web, I realised that I could enhance my original design and add some different visual elements. To add depth to the design I developed a smoke background effect in Photoshop using various techniques. I then placed elements from my original modular layout on top of the smoke background and applied an inner glow to each ‘box’ to add another dimension to the design. I was really pleased with the effect that this produced.

I then ‘sliced’ the design according to size of my header, container and footer so that the images would seamlessly slot together.  The slices were produced in Photoshop because I was able to optimize each slice ready for the web.  It would have been possible to produce the  slices in Illustrator, however it could not handle the raster effects that I had applied to my design so I decided to stick with Photoshop to make the slices.  I then uploaded the images and wrote the HTML to position them within my layout. Initially the text did not line up with the elements, but I was able to overcome this by adjusting the padding for each div.  I had the greatest difficulty trying to align the navigation links with the buttons slices. Eventually due to time constraints I gave this up as a bad job and thought that I would be to return to this later, so I left the links without any button image.

The final home-page design sliced and live on the web. I applied a different slice to the portfolio container without the banner element so that there was more room for my work.

However, I was unable to make the slices work correctly with the blog page, because of the sidebar and container divs being aligned vertically.   Thus, I decided to revert to the CSS borders temporarily for this page hoping that a solution would present itself later.

At this stage in the process I was reasonably happy with the layout, so my attention turned to how best to add my portfolio content.

Portfolio Gallery Plug-In

Although it is possible to easily add and position images within WordPress pages I wanted to make it easy for my audience to enlarge my images and scroll through my work.  Rather than spend time developing a gallery I decided to use a WordPress plugin.  After researching what was available I installed the nextgengallery version1.5.2 gallery developed by Alex Rabe. The plugin was easy to install and its interface was very user-friendly.  Initially I had the idea of creating two ‘albums’, one for print design and one for interactive design. I began uploading images into my first ‘gallery’ for the Beside the Seaside Stamp designs. I then placed the album tag into the portfolio page.  I was amazed at how easy this process was and I created my second gallery for the Seasonal Cat Postcard designs. The only thing I was concerned about at this stage was how large the font-size was for each gallery label. I tried to edit the CSS for the gallery and nothing seemed to work.

Each thumbnail linked to a separate page that I was able to apply the portfolio page stylesheet to.  After tweaking the padding I was happy with the layout of each gallery page and I was especially impressed with the image rotator that appeared after clicking on the first thumbnail.  This enlarged the images and allowed users to scroll through my work.  I was also able to add a description to each piece of work.

Things were going well until I decided to upgrade the plugin! After upgrading the plugin strange things happened to the gallery layout. The gallery labels became enormous and a border was applied around each gallery. Quite frankly it looked ugly and I was distraught! I tried to fix the problem by editing the CSS but nothing seemed to work.  Thus, I had to re-think my design! Luckily the individual gallery pages seemed unaffected by the upgrade, so I thought that I might be able to overcome the problem by creating my own thumbnails and links from the portfolio page to each of the gallery pages.

I created a new layout for the portfolio page to overcome the problems with the NextGen album view. I created my own thumbnails with rounded borders and linked each image to the relevant  gallery page. By the time that I had completed this for each of my galleries I was a lot happier with the portfolio layout than I had been before – so the upgrade had a positive outcome in the end.

Browser testing

Throughout the construction process I kept testing my website in different browsers like Firefox and Internet Explorer.  My browser of choice is Safari and there were no problems with the layout in this browser. Firefox added an additional ‘link’ border to each of my thumbnails in the Portfolio page. As I do not know how to fix this I have decided to live with it for now until I can find a fix.  However, Internet Explorer made my layout look amateurish – enlarging my font and adding extra space between my content. I tried removing the space between tags but this did little to improve the situation.

Contact Form

Rather than add my personal e-mail address to the website and risk receiving lots of spam I decided to use a contact form. Fortunately WordPress has lots of plugins for adding contact forms.  I installed the contactform7 plugin by Takayuki Miyoshi. However when I placed the contact form tag on my contact page the size of the form was too large to fit in my existing background.  This combined with the Internet Explorer browser issues reinforced my decision to create a background that would stretch with the content.

Elastic Background Images

When learning about slicing images I had read about creating layouts that stretch to fit the content.  Initially I thought that this would be too complicated to achieve so I went with the fixed height option.  But I realised that I could not overcome the spacing issues unless I did something about the height of the background image.  Knowing that I would have to re-slice the layout I decided to evaluate the existing layout and I decided to make some changes.  I decided to remove the banner box and replace it with something more meaningful that would communicate the purpose of the site.

To create this design I created the text (Gill sans bold) in Illustrator and applied an inner glow with a slight blue tint so that it would match the smokey background. I then placed the text into Photoshop as a smart object layer. I created the text in Illustrator because I did not want it to appear rasterized. I sliced the header so that I included the top of the box below. To match the new header I added blue to the inner glow on the  box frame.

To create the elastic box effect I then made a 1pixel high slice which I then applied the following CSS: background:#000 url(‘images/newpixelwidth.jpg’) repeat; This allowed the 1pixel wide slice to be repeated in the container div to fill the gap between the header and the footer. The Footer slice included the bottom of the box.

The contact page now fitted the contact form.  This technique was also applied to the blog page which was also vastly improved.  Finally I adjusted the colour of the font used throughout the website from white #ffffff to a light grey #c2c2c2 so that it complimented the smokey blue theme and reduced the glare against the dark background.

Portfolio Content

The images for the portfolio were all made using the screen capture facility on my mac which automatically saves the images as .png files and I then uploaded directly into WordPress. The Ugli Buni sketches were scanned in and then captured on screen to save time optimizing for the web.  Unfortunately I was unable to add an example of the Flash content to the web site because WordPress would not allow me to load the large file sizes.  As a temporary measure I have loaded screen shots of the presentations until I can resolve this problem. I may have to set up a sub-directory of my website and load the Flash content there and not in WordPress. Given the time constraints for the project I have made the decision to investigate this later.

I quite enjoyed producing the designs for the postcards and I feel that I achieved all of my intentions.  After finding three of the designs relatively easy to come up with, I struggled with the fourth (summer cat). To me this is the least successful illustration in the set, probably because I was trying to represent the sun as well as the sleeping cat and although I like the illustration as an individual study, I am not sure that it works with the rest of the set.  If I had had more time I think that I would have represented a ginger cat with the suns rays in the background.

Printing

This project has taught me a lot about printing.  Most importantly I have learnt about the importance of saving files as .pdf for printing.  The time that I spent formatting the packaging file ready for printing really paid off. The document was cut and pre-creased in exactly the positions specified and the colours were more or less exact to the screen colours.  I was really impressed with the quality of the printing.  By contrast, I was very disappointed with the online postcard printing.  I now realise why the quality was not as good. The document format requested was .png which is not really suitable for high quality printing and does not maintain CMYK colour spacing. Consequently, I will have to get them re-printed at the same printing firm that I used for the packaging.  I would be very reluctant to use a printers again that requests .png,.jpeg,.gif as suitable file formats for printing!

Cost

I also discovered how expensive it is for high-quality printing in small quantities. Thus, if I was to use these postcards as I initially intended  I would need to assess the cost-price benefit of distributing them as a promotional item. Given the costs involved to date, which equates to approximately £12 per calendar (based on 7 units), I would seriously need to consider who they were sent to!  Having said that I still think that the set works very well as a self-promotional item (albeit a bit expensive) and the innovative packaging has showcased my vector illustration, layout and packaging design skills.

Construction

At the beginning of the project I knew that I wanted the postcards to be utilised as part of a desktop calendar so that they would create a memorable impression on my potential clients. Now I had to consider how the postcards would be delivered to my intended audience.  This presented an interesting challenge with regard to the final packaging design.  The packaging had to act as both the initial presentation container and form the component parts of the desktop calendar.  As most desktop calendars are usually flat-packed when they are received and then expanded with a triangular stand to hold them upright I started with the triangular model.  I experimented by folding various pieces of rectangular card into triangular stands and then folding them back on themselves to create a presentation pack. It was important that the construction was fairly simple and that glue was not required as the user may lose interest.

Once I was happy with the dimensions and the folds required to make this possible I then had to think about how the packaging would be secured to stop the contents falling out.  I decided that the tab inserted into a slit method would be the best for securing the front of the packaging. Initially I cut out a circular tab but although this worked well as a securing method I decided against it because of the costs involved in using die-cut printing. For this project any cuts would have to be made by hand and a circular cut could look shabby if not done correctly. Thus I decided to cut a triangular tab because this could be made neatly using a ruler.  I then used the triangular tab method to secure the postcards in position so that they did not fall out of the packaging.

Packaging Design

Initially I had no idea how I wanted the exterior of the packaging to look.  I ended up breaking it down into different elements. There had to be a preview of the four postcards on the outside of the packaging so that the user could see what was contained inside. Assembly instructions were also required so that the user knew how to assemble the calendar. Using these elements as my starting requirements I set up the custom template in Indesign using the measurements from my experimental cardboard models. I created two pages within this template, one for the front and one for the back of the design.  I knew that I would be using a local printer for the packaging printing so I knew that it would be ok to create the layout in Indesign because it would ultimately be transferred as a .pdf file to the printers. I applied the four images of the postcards to the back of the outer packaging this would eventually be on the reverse of the actual postcards when the calendar was constructed.  I thought this area would be a good place to add my contact information.

I then started to think about the assembly instructions.  I had seen other desktop calendars with simple assembly instructions on so I thought that this would be a useful element to add to my design.  I drew the diagrams using Illustrator starting with rectangles which I then attempted to make look three dimensional by using the Shear function at 45 degrees and then adjusted the positions so that the diagram looked realistic.  I added arrows to help the user with the direction of the folds. I placed the final diagram on the inside flap of the outer packaging that would ultimately form the base of the calendar.

My attention then turned to the back of the calendar, the reverse side that would be visible when the calendar was constructed.  Some calendars have an annual calendar on the reverse, but I thought that it would be useful to summarise the public holidays for 2010/11.  After looking at how many public holidays there are in Great Britain, with Scotland and Northern Ireland having some different public holidays to England and Wales I decided to just show the public holidays for England and Wales.

After adding all these elements to the packaging design I just had to think about the overall colour and front cover design for the packaging.  I figured that because the calendar starts in December 2010 that it could be sent as a Christmas promotional gift.  This inspired me to apply a Christmas theme to the front cover. This would not be visible once the calendar was assembled so it would not look out of place.  Rather than design a completely new Christmas ‘theme’ from scratch I incorporated elements from the winter postcard design. I then applied the message Merry Christmas to the front of the packaging design.

When the packaging is opened the rest of the message becomes visible.  I thought this was a good place to promote my services and my website.

Once I was happy with the final design and layout I prepared the document ready for printing. I saved the file as a PDF so that it would be accepted by the local printers. When formatting the PDF I had to make sure that  printers marks were displayed so that the crop marks were visible. I added a hairline fold mark to the bleed of the document with a very slight overlap on to the final print area so that I would know where to fold the document when the final print is received. The printers have offered to pre-crease my fold marks so that a better fold is created. I did not realise that this could be done so I will be really interested to see the results.

After completing the illustrations of the seasonally inspired cats I compared them as a set and made any necessary adjustments to ensure that the colours and layout worked together.  The next stage was to add the calendar element to each postcard.  My logical choice was to use Indesign to perform this task because it is far better than Illustrator for laying out typography.  I wanted to keep the calendar fairly simple and not clutter the design with days of the week so I just decided to give structure by distinguishing the weekend dates. I did experiment with laying out the text in a swirling pattern, but this just looked confusing so I decided to stick with the vertical arrangement.  I considered several different typefaces for the design.  I wanted a clean and modern looking sans-serif font but I also had to consider the appearance of the numerical values in each typeface.

Because the font size had to be relatively small to fit on the postcard I found it quite difficult to find a typeface that looked significantly different when applied in bold weight.  I did experiment with just showing the outline of the font for the weekend dates as a differentiating method, but it just did not look crisp enough when printed. I don’t think the white colour of the font helped this situation, but I did not want to use black. Finally, I chose the Eurostile typeface and adjusted the colour of the weekdays to light grey by adjusting the key colour by +10% this made the weekend dates stand out more.

After completing the calendar layout on each postcard design I then returned to the printers website to check what file format was required for printing. To my surprise a .pdf format was not accepted, but .png, .jpeg and .gif were. This presented me with a problem because I then discovered that it is not possible to save Indesign files in these formats.  To overcome this I had to decide which file format would be the best for preserving the detail and colours in my designs. After doing some research on the internet I discovered that none of these formats were ideal for transferring professional graphics because CMYK was not supported, which begs the question why online printers accept it for printing purposes?  These file formats are primarily used for transferring graphics on the internet.  Given that it was too late to find another printer at this stage I decided that I would have to continue and hope that the images turned out as I expected.  I decided that .png  (portable network graphic) was the probably the best format to upload my work for a number of reasons.  Without becoming too bogged down in the technicalities I found out that .png was invented to improve upon .gif (graphics interchange format) format so it must be better and that  .png is better than .jpeg for transferring images that contain text or line art like those contained in my designs.

The upshot of this decision meant that I had to return to the original illustration in Illustrator and see if it could be saved as .png  The drop-down menu did not offer .png as a file extension so as a last resort I just typed it in at the end of the file name and it worked.  This meant that I had to transfer the layout and typography from Indesign. Fortunately this was a fairly simple process.  After re-checking the consistency of the layout across the four postcard designs I uploaded the files to the printers for printing.

I was able to personalise the reverse of the postcard with the title of the illustration and with the url of my web-site. Thus if the postcard was separated from the calendar set it would still act as a promotional item.

Template

Before setting up the templates for the postcard designs I researched into what file size was required by the printers to print the postcards.  I have decided to use an online printing firm that specialises in small runs to print the postcards because I have used them before and I found their on-line system very user-friendly.  The quality of the print was also superb and my order was delivered really quickly. The file size required by the printers was 1795 x 1287 pixels, and the finished size of their postcards is 148mm x 105mm.  Using Adobe Illustrator I created a document 1795 x 1287 px for the vector illustrations.  I also set up a custom document in InDesign 148mm x 105mm with a 5mm bleed so that I could layout the illustrations and the typography.

Illustrations

The cat illustrations were inspired by various images located on the internet and personal photographs.

The first illustration was inspired by a photograph that I found on Flickr taken by Piez.  The shape of the cat really did look like a snow ball and I thought that this idea could be developed into a winter themed postcard.

In Illustrator I began by drawing the cat’s face using the pen tool and then created the body using the ellipse tool. I added some texture  by creating my own custom brush which I then used to soften the edge of the circle and create the fluffy fur effect.  Finally I added an outer glow to the fur which accentuated the fluffiness of the cat.  Once the finishing touches were applied,  I began to think about it in the context of my theme for the postcards.  I wanted this cat to represent winter and although the blue and white colour scheme was appropriate I still felt that another element was required. To resolve this I downloaded some free snowflake scatter brushes from www.vector.tutsplus.com and then added them to the illustration in different sizes and opacities.

The next illustration that I produced was for autumn.  For this I decided that I wanted to draw a black cat silhouette to represent Halloween.  The outline of the cat was drawn using  the pen tool in Illustrator, and filled with solid black colour.  Initially I was stuck for ideas for the background, but after looking at images associated with halloween I decided to draw a crescent moon on an orange sky.  The use of the moon was also influenced by the ‘circular’ theme in the previous illustration.  An outer glow was also applied to the moon and the star to accentuate their radiance.

For summer I chose to illustrate a sleeping ginger tabby cat curled into a ball.  I thought that the orange colour and shape of the sleeping cat could represent the sun at the hottest time of year. To create the illustration I studied photographic images of sleeping cats and then created my own unique markings for the fur. Initially the cat was more oval shaped, but by using the free transform tool I was able to render this into a more circular shape to perpetuate the circular theme of the previous designs.  For the background I wanted to create the effect of sunbeams but without drawing straight lines which would have clashed with the other illustrations. Eventually I created this effect by drawing a small circle and then applying the Object>Transform>Scale function to copies to reduce their size by 75%, 50% and 25%.  I then arranged the decreasing circles in a straight line and copied and repeated them at regular intervals around the body of the cat.

For the last illustration I used a photographic image of my cat, Kitty to create a detailed vector study. The colours of her markings were sampled directly from the photograph using the eyedropper tool and then applied in different opacities to add variety to the illustration. Continuing the circular background theme of the other designs I decided to add a flower shape behind the cat. This was created using the ellipse tool and then repeated at regular angles using the step and repeat function in Illustrator.   The stylised flower and the pale green background colour were intended to represent spring and new growth.

Design Rationale

Alongside developing my personal website I am also designing a series of innovative postcards and their packaging to demonstrate my creative skills in the digital environment.  From the start I knew that I wanted these postcards to be used for self-promotion so I began to think of ways that postcards could be utilised other than merely a means for communicating a short message via post.   After looking at some of the promotional material that we receive at work from different businesses, I have decided to create a set of postcards and packaging that can also be used as a desktop calendar.  I am hoping that usefulness, combined with an eye-catching design will create a lasting impression on my target audience.  Given that most people would already have calendars for 2010, I have decided to create a calendar that starts in December 2010 for 2011 as part of a Christmas promotion.

Theme

I have chosen cats as the theme for my postcards.  Initially I thought about designing 12 different postcards to represent each month of the year, but I soon realised that given time constraints that this would be unrealistic.  Thus, I have decided to divide the year into seasons: Winter, Spring, Summer and Autumn and create four designs inspired by cats and the seasons of the year.

As part of our final assignment for college we are required to create a personal online portfolio.  The portfolio needs to showcase my work and all the design and application skills that I have learnt over the last two years.

Research

After receiving the brief I began researching about portfolio websites.  I found some really informative articles about portfolio design at www.smashingmagazine.com along with some examples of some stunning websites.

In summary I have learnt about the following considerations:

• Present your best work on the front page so that your audience can find it quickly
• Less is more – the website should not overpower the work contained in it
• Uncommon navigation should be avoided
• Needs to be accessible to everyone, different browsers, screen resolutions, web standards, etc
• Maintainability, must be easy to update
• Adequate contact information, and explanations to work, case studies, etc
• Promoting the portfolio eg via a blog; e-mail links etc
• url needs to be appropriate, easy to spell and memorable

Domain Name

Before spending time designing the portfolio website I did some research into what domain names were available.  During my research I noticed that a lot of design oriented websites have quite quirky names, like ‘purpleraincloud.com’, ‘bythepond.co.uk’, ‘hellomonday.net’ etc.  Although I was tempted to come up with a quirky name I eventually decided against it. At this early stage in my career I felt that I needed to build a professional reputation based upon my own name.  Thus I have opted for the domain name: www.sarahdelaney.co.uk which I have purchased as part of my hosting package.

Construction method

After sorting out the domain name and the hosting, I began thinking about which ‘method’ to use to construct my portfolio website.  In principle I would have liked to have created my portfolio website using Adobe Flash because I am quite familiar with the using the application. During my college course I had used Flash to create two interactive displays for the touch screen kiosk in the college library. In my opinion the creative potential in Flash is limitless and it is possible to create some really stunning effects.  However, my research also revealed that there are several drawbacks to creating entire websites in Flash.

• Flash is not search engine friendly
• It can be incompatible with certain browsers and it is not compatible with the Apple iphone or ipad.
• It is limited to those who have the correct Flash player installed
• Flash sites often take longer to load than html-based sites

I also had a couple of personal reasons for not wanting to create my portfolio website totally in Flash.  I wanted to add a blog to my website so that I could use it to link to other users and publicise my website.  Although I could have linked to this from a Flash website I wanted the design to be consistent.  Most importantly I wanted to learn more about HTML and CSS as these are the sought-after skills required for designing websites.

WordPress

I had been introduced to WordPress last Autumn when I started writing this blog on wordpress.org .  I found the WordPress admin area really intuitive to use and it was easy to add and change content. It was also possible to change the theme without  affecting the content which is an excellent feature for us girls who constantly change our minds! However, the main disadvantage of the .org version is that you are restricted by the themes available although some have customable headers.

During my research I had read several positive articles about using WordPress as a content management system and how it has grown in popularity with web developers.  I also learned that it was possible to create your own WordPress theme with some knowledge of HTML and CSS along with your own hosting and domain. Thus, I have decided to create my portfolio website using WordPress.

I am going to use the structure that I have adopted for my user questionnaire for my evaluation so that eventually I can compare the results of the questionnaire/survey  against my own evaluation.

Purpose

York Art Gallery is situated in the city centre of York and is free of charge to visitors. Given York’s popularity as a tourist destination the gallery could attract a broad spectrum of visitors, but after a recent visit I am convinced that most of these visitors would be adults with an interest in art and different cultures.  Thus, I have targeted this interactive prototype primarily at adults.

Navigation / Interactivity

I think that the main navigation buttons are easily accessible throughout the application, so if a user changes their mind during a movie they can easily select a different movie. The animated designs are intended to be eye-catching to draw the user’s attention, and when the buttons are pressed the movie is loaded instantly so I did not feel that it was necessary to create a roll-over state for the buttons. This saved time with the production as I was able to use invisible buttons throughout.  I have added the text to the last frame of the ‘home’ movie to guide the user to the navigation buttons on the left.  Elsewhere I have provided textual guidance eg “press X to return to the start of this presentation” so the user knows what to expect when they press the button.  The play and stop buttons have been applied consistently throughout so as not to cause confusion.  The buttons are sized at 100 pixels so this should be big enough for most fingers.

Content

The images that I have selected for the slideshow are relevant to the philosophical meaning of each element. I have included the name of the artist and the years that the artist lived so that the user can put the images into context.  I have included the video content about how Japanese wood block prints are made to offer alternative information for the user that may not be available in the main exhibition.  This is an area that I probably could have developed further, however it was difficult to find relevant content.  The slide slow about the Gorinto funerary monuments shows how the belief in the 5 elements is still part of Japanese culture. I did wonder whether it would have been helpful for the user to place a button for both the video content and the Gorinto slideshow on the main navigation movie, so that they could be accessed at any time however I think this would have spoilt the theme of the 5 elements with an additional 2 buttons and may have confused the user with too many choices.  I hope that by situating this content at the end of the Air and Void slideshows that the user can appreciate them in the context of the five elements.

Timings

The one area that I have concerns about is the length of each presentation. I am hoping that the user experience questionnaire will provide some guidance on this.  With the fading in and out of each image I am concerned that there is not enough time at 100% alpha for the user to appreciate each image.  Conversely I am also concerned that the overall length of each slideshow might be too long and that the user might become bored. To overcome this I might overlap the appearance of each image so that there are no gaps in the images being loaded.   The video content is approximately 4 minutes long, again I am not sure if this is too long for most users which is why I placed the stop button on the same frame in case the user decides that they have had enough.

Screen Layout and Graphic Design

Colours

In my opinion the colours compliment the Japanese theme /images and provide enough of a contrast for the individual components to be easily visible.   I have selected a textured red background to avoid reflections and finger prints on the screen that may distract the user.

Typography

I wanted to include the Japanese Kanji script so I had to select a simple sans serif font to compliment this script.  I have used the Gill Sans light typeface throughout the application in black on a light coloured background. The amount of copy has been kept to a minimum and I have tried to focus on this being a visual presentation

Images and Animation

I hope that I have selected a variety of images by different artists that are relevant to the philosophical meanings associated with each element.

The alpha fade in and out on the slide show adds another dimension to the slideshow although I have my reservations about whether the images need to overlap slightly to improve the speed of the overall application.  I am pleased with the animation of the scroll, but I would have liked to have developed this further with maybe a drop shadow that moves as the scroll unravels.  When you look on the internet there are several exciting methods for blending images in slideshows I would like to do more work developing this in the future, especially for my portfolio site.

Layout

I think that the layout is simple and un-cluttered and consequently does not confuse the user.  The movies consistently appear in the same location and the navigation buttons are located on the left hand side where they might typically be found on a web page.

User Feedback Received 16/12/2009:

During our college session last Wednesday we conducted user testing and completed questionnaires about each other’s prototypes. There were a total of three users available for testing on this occasion. For each category in my questionnaire I have summarised the phrases that received the most votes and detailed and specific comments that were made below:

Navigation /Interactivity

Users were asked to select phrases that best described the navigation buttons. Results: ‘Eye-Catching’ = 1tick;  ’Easy to use’ =2ticks; ‘Innovative’=3ticks; Specific comments: “Movement within the buttons helped stop the home screen looking dull”.

Content

Users were asked to select phrases that best described the content of the display.  Results: ‘Relevant’ = 1 tick; ‘Informative’ =2 ticks; ‘Interesting’ = 2 ticks; ‘Well presented’ = 3 ticks

Timings

Users were asked to rate the timings of different aspects of the presentation on a scale of 1-5 with 1 being too short and 5 being too long.

Overall length of the presentation = rated 3 by 2 users; rated 4 by 1 user.

Slide shows = rated 3 by 2 users; rated 2 by 1 users.  Specific Comments: “Anyway of pausing the images to view longer” and “I occasionally missed the end of a sentence…”.

Video Presentation = rated 3 by 2 users; rated 4 by 1 user.

Screen Layout and Graphic Design

Colours

Users were asked to select phrases that best described the colours chosen for the prototype. Results: ‘ Good combination’ =3ticks;  ’Relevant to subject matter’ = 1tick; ‘Suitable for screen display’ = 1tick.

Typography

Users were asked to select phrases that best described the typography chosen for the prototype.  Results: ‘Legible on screen’ =2ticks; ‘Well laid-out’=1tick; ‘Relevant’ =1tick; ‘Interesting’=1tick;

Images and Animation

Users were asked to select phrases that best described the images and animation created for the prototype.  Results: ‘Creative’ =3ticks; ‘Eye-catching’ =1tick;

Layout

Users were asked to select phrases that best described the screen layout used for the prototype. Results: ‘ Well Structured’ =3ticks;

Any other comments:

” Very smooth, flowing and attractive movie”; “Classy and contemporary design – Fits in well with  the theme”; “Nice One”.

My Conclusions

I was very pleased with the comments that I received although I do realize that these are the comments of my classmates, so it would be interesting to receive comments from users from a non graphic design background in order to have complete feedback.  The timings of the presentation seem to be a bit of an issue, so I would look to review the number of frames within the slideshow and maybe investigate whether it is possible to add a ‘pause’ button so that the user can stop the presentation at particular points and then continue from that point.  Two of my classmates had designed simple right/wrong games which I thought was a great way to make the prototype interactive for the user and especially relevant in an educational context.