Homemade! Flash Gallery

The client specified a flash gallery. It had been discussed that the images would pop up in a way similar to that of the bottles on the feel good drinks website.

However a plugin gallery using Polaroid’s was found and it was thought that this would be a better option as it ties in with the site theme more successfully. This idea was aborted as the hosting the client has gone with blocked the application and I could not find a way around this problem. However the idea of using Polaroid’s was kept.

An open source Polaroid stack gallery was found and adapted to display homemade images however after much work on actually getting the gallery to work the client decided she in fact wanted to return back to a more simplistic grid layout.

The final layout therefore consists of a grid of Polaroid’s which when you click on one brings up lightbox with captions for the photos.

WordPress Plugins!

I found a simple contact form plugin that I edited slightly for each of the pages that needed a contact form. These pages were:

- contact page
- party booking
- wedding catering
- sandwich king
- homepage
- cakes to order

The main contact form has the most required fields with, name, email, subject and message. The subject field is needed within this form, as it is a general contact so could be for anything. This form is inserted within the edit box of the page.

The contact forms for the party and wedding pages were cut down to only have the form fields, name, email and message.

And the subject was set to automatically appear as wedding catering or party bookings for ease for the user. These forms are inserted within the edit box of the page.

The rest of the contact forms had to be inserted within sidebars as they needed to be positioned within the page. Sidebars were set up in the functions.php with a simple line of code.


The code was then called within the page.


And then the sidebar appeared in the themes – applications within the wordpress dashboard and then by adding the contact form code within it, it would then appear on the page in the required position.


The homepage contact form simply consists of an email field, as it is to join the mailing list so this was all that was needed. The subject again was set as mailing list, and the email address was changed to send to mailinglist@.


The cake to order contact form only has the form fields, email and message. Name was omitted due to the space available within the page and this was the field that was least important. The subject was set to automatically appear as cakes to order for ease for the user.

The sandwich king contact form has the fields, name, email and what is your favourite sandwich and why? The subject will appear as sandwich king for ease.

WordPress....WordPress.....WordPress!!

Ok I have neglected the blog for a while with 2 hand ins and all this wordpress building but I can now say I am liking wordpress and all it can do!

The first thing I had to do when it came to wordpress was to download the file package. Once I had done this I had to make a few minor alterations to the wp-config file to allow wordpress to link to the websites database. I also followed advice from the smashing wordpress book I had read and generated authentication keys to help keep it more secure from hackers. The dashboard was then set up and the link was made between the two.

The next job was to add the pages to the blog and activate my theme within wordpress. This was a nice and simple task and didn't take long at all :) To create a theme within wordpress I had to name a folder within the theme folder (in this case I chose homemadecafe) and then within that folder you have all the usual files of the website, index and pages, images, swf files, javascript, css etc.

As I had multiple layouts for the pages i had to add a piece of php code at the top of the site pages to allow a specific template link to the css of that page. This was then linked within the wordpress pages too.

I then set up permalinks so that the web-address was more relative to the user (for example homemadecafe.com/cafe-menu) and now when you visited the page address there were empty templates displayed.

Within the php site pages a wordpress loop was added where the editable text was to be displayed. Once this task had been completed any text written within wordpress would now be displayed within the page online.

The pages of the website that the client is able to update are:

-Cakes to Order
-Contact Homemade
-Find Homemade
-Friends of Homemade
-Homepage
-Party Bookings
-Sandwich King
-Wedding Catering

Pages that are listed that the client is unable to update are:

-Café Menu
-Homemade Gallery
-Homemade Suppliers

With the basic wordpress working site now complete I next wanted to look into plugins for the contact forms required within the site.

Homemade Goes Live!!!!

My Homemade client live project has now officially gone live :D Check it out at: http://www.homemadecafe.com/

SPP3! Code Image Layouts

It was felt that maybe some element of coding should be incorporated into the design as page shots do not show the back-end coding behind the working websites. This was achieved within layouts in two ways. Firstly simply including an image of coding from one of my projects. This works well as it is a direct way of displaying the code however it is also not very visually stimulating. I did try and make it more visually appealing by choosing code snippets of PHP rather than HTML as it offers colours.

The second way of incorporating code within the design was a sticker idea. Listing the code used within the design on the sticker allows back-end skills to be acknowledged in a way that has less of an impact on the visual design.

SPP3! Single Image Layouts

Another idea taken from portfolio research was simply including one large single image of a page. Therefore I have chosen a single page and created a single image for each of the websites i have chosen to work with for the catalogue layouts.






Out of all the single images I would chose to use the Homemade image (first image!) as within this project I have implemented all my skills developed throughout my three years at university. It has been dominate of this year and therefore I feel if any it should be dominate within the catalogue. However If I do chose a single image as my final entry i may use the idea of a composition similar to the one used for Homemade in the previous post.

SPP3! Standard Image Layouts

I have now completed a few standard layout ideas for the exhibition catalogue. I like the more standard layouts as although structured there is still room for design within them.

Block Layout

The first layout concentrated around four squares displaying four sites. The sites have not be styled but have simply been positioned to show a key element within the design of the page. This was an idea incorporated from previous portfolio site research on layouts. The Bestwood Engine House image has zoomed in on the interactive floor plan as this was an element purely designed by me within the group project. The Yorkshire Tea re-design concentrates on the tea page as this was the page design I felt was most successful within the site. My portfolio highlights the flash header, this was chosen as I feel it is representative of me and my communication skills which is why it was originally incorporated into the portfolio site design. Finally the Homemade image displays the polaroid and menu navigation across the bottom as these were quirky elements within the design bringing both the off-line and on-line presence together. This layout is successful at identifying key elements within my design work however with simple straight images it may be thought as bland within the catalogue design.

The second block layout follows the same layout and site choice as the previous but instead of a single shot of the site there are compositions of elements and pages. This layout was successful as it allows multiple elements within the page to be displayed at once and is more visually stimulating then the previous. However mixing elements especially in the case of the Bestwood box may cause the design to become slightly overcrowded.
The third block design incorporates an extra box within the layout. This therefore allows an extra piece of work to be displayed. The boxes give a slanted view of the sites to move away from the conventional straight layout within the box. All of the boxes incorporate key design elements with the pages as demonstrated before.

Horizontal Layout

This horizontal layout works well as it allows multiple pages to be viewed within the windows. It gives a feeling of progression through the site reflective of viewing the page on-line. However the multiple pages also create a busy layout and cause information displayed to be covered due to the overlapping of the pages.

This horizontal layout is simplistic in comparison but also a lot cleaner than the previous. It allows a wide view of the page and therefore a greater page span then previous layouts.

Vertical Layout

The use of a vertical page layout allows a greater span of the page as a whole in a vertical sense allowing a more complete view of the site design. The opposing slants separates the windows successfully and also leads the eye along the line. The downside to this design is that due to the width of the windows not much information is seen within them which can be limiting at highlighting design skills. However this could be overcome by using only three strips allowing a larger width.

SPP3! Non-Standard Image Layouts

I have put together a few non standard page layouts for the catalogue design. It was chosen to do this as I wanted to include some images that would stand out within the catalogue so moving away from standard boxed layouts achieves this.

The first Image incorporates the idea of displaying portfolio work on a screen, discussed in the previous blog post. I like the way this design allows the work to be viewed in the same way as it would be online and also the incorporation of my laptop which this year has harldy left my side! The colours (due to the green laptop) ties the catalogue in with the branding colours of my blog and portfolio site. The downside to this design is that the images on the screen are quite small and therefore can be difficult to see.

This image was used as I wanted a way to show more than just one page of the site within the catalogue image. It works well and is a clean design however this does not work with all sites as some of the key design work can be hidden due to the overlapping.

The final image used the idea of the large image similar to that found when researching how portfolio sites display web work. The shape of the image is the city of Nottingham reflecting where I am currently based and where these designs and my development into a web designer has taken place. I chose the image of the grass and the sky and I wanted a way to symbolise how my front-end design and web development skills are separate and yet work together in my final design outcomes.

Artefact 3! Findings

All banners tested showed a higher level of interaction than previous results gathered with each of the participants fully completing the required interaction.

Skill, Visceral and Motivational rewards were the least successful with the participants not using the replay button. However mouse movement in the Visceral recording indicated that the user was attempting a replay but was not using the intended replay button to do so. Therefore in future tests the inclusion of a replay button must be more obvious to the user.

Both the Extension and Resource banner interactions were repeated indicating more successful reward systems. However the recordings show that overall the Extensional reward was the most successful. As although the Resource reward banner was repeated the reward was not actually used whereas the Extension reward was.

The Q&A results found that the banner was liked due to the score system and this worked as a reward in itself giving the user the feeling they had achieved something. The lack of levels within the banner was indicated as an element disliked most and users suggested if they were to be included interaction length would be greater. Therefore for the next artefact levels will be tested to see if stages do in fact lengthen interaction with online banners and increase addictive potential.

SPP3! Catalogue image layouts

Above are some image templates to which i will add the images of my work. The work i am looking to include within the catalogue i feel would best highlight my design skills are:

• Homemade client project
• My Portfolio site
• Bestwood group project
• Polyverse poets
• Gardening site
• Yorkshire tea/squares redesign

SPP3! Exhibition Pack - Image research

I have looked at some web designer portfolio sites to see how they have captured images of their website work for inspiration for my 8 portfolio images as part of this submission.

The first portfolio looked at was http://www.omdesign.co.uk/website-design-portfolio.html :

I love the large image and used on the website for a start and would like to possibly incorporate something similar into my catalogue image. Other image captures include displaying the web page on a slant which works well as it moves away from the conventional. Another is simply using a stricking image used within the work rather than the page itself. Or selcecting a certain section of the page rather than the whole, or finally if the website included print work then a typical portfolio shot of pages laid out as though on a table top.

The second portfolio looked at http://www.danlindop.co.uk/default.html :

This portfolio also uses alot of the same image layouts as the previous. However an image idea used within this portfolio is to simply use the logos from the work rather than an image. This could work for a few images within the main catalogue image, as logos will not really display the work successfully to prospective employees/clients.

Another portfolio viewed was http://www.joystik.co.uk/design-portfolio/design-portfolio.php :

From this portfolio i liked the idea of having 2 larger images with 2 smaller below showing site content. This is a possible layout idea to be incorporated into the catalogue image.

An idea taken from http://www.pixa.co.uk/ was to chose one single site that i feel best displays my design abilities and have one large image of this piece only.

The portfolio http://www.dannyhaines.com/ used the idea of displaying work on an a computer screen which i thought was a nice touch and could maybe be built upon for a layout.

Homemade! Meeting - Minor Changes

Todays meeting was the third milestone where minor changes to the design were disscussed. These are now the only changes that will take place before the deadline date and any other changes the client may want will take place after project completion in my own time. A form was signed to agree to this and the changes to be made are:

• 2nd kebab image on the wedding catering page to be changed to a buffet image.
• party booking page title to be changed to party bookings and to further highlight FREE hire
• navigation menu to be a constant animation as though they are jumping around and flower/star images taken from the index page menu board are to be added
• supplier page = 5 images
• Add written captions to poloaroids
• Cakes t order page - horizontal layout with rollover effect where blackboard bubble appears with handwritten explaination
• Index page change cafe image to menu board with opening times (add am/pm) and add animated button "are you the sandwich king?" in the left margin
• create new page for sandwich king competition
• add join our mailing list under top menu board on index page
• remove testimonals from party booking page
• add icon links in footer - facebook etc

Although this looks like an extensive list for minor details a few of them are very simple tasks so this is why it has been allowed!

Homemade! Content page development continued!

I have completed 3 more of the content page designs. The contact and useful links page follow the same layout as the find us page to keep the design consistent. A team photo will be added in the following week after the client has provided one for me. There is no contact form present in the design as like the other pages requiring one I will be using a Wordpress plugin at a later date.

The supplier page images will also be changed and maybe a few more suppliers added after the meeting on Monday when I have a definite amount of suppliers and have been provided with the images.

Below are the designs :) just the cakes to order and gallery page to go!

Homemade! Content page development

I managed to get 3 content pages done in HTML so now only have another 6 to go! The designs follow the layouts finalised in the last client meeting and also have followed the final content page decided. I have created a slight tilt on the Polaroids but not as extreme as in the original design due to the client wanting to be able to update the pictures, so they have to be held in CSS so I was unable to have them on a diagonal.

The Booking forms have not been included as I will use a Wordpress plug in to create these at a later date.

A white border line has been included under the menu in the footer as Sarah suggested that the black of the menu on the dark purple meant it didn't really stand out to the user. Which I agreed with an this simple solution seems to have done the trick :)

The Find Us page has an interactive google map and I have continued the content theme into the page with the use of the Polaroid even though there is less content.

Homemade! Latest Design Development

I Have slightly altered the design to incorporate further needs from the client. The client specified she wanted to add a sandwich competition so I had to incorporate this into the index page. Following the original design the page was holding too much information for a welcome page. So after some re-jigging I have now come up with a tab system shown in the images below.

I removed the menu board image and have included an image of the cafe as I felt this was a vital image for the homepage. Having the menu across the bottom also ties in with the other content pages and makes the user aware of its placement from the start.


The temporary page has also been re-designed following the latest look and is ready to be uploaded asap when i can get hold of the hosting password details!





The next job today is to complete the content pages for the rest of the site.

Course Final Four: Pros & Cons

Course 1: MSc Web Design and Development (University of Hull)

Pros:

-Develops understanding of human computer interaction and how this relates to web design
-Develop JavaScript skills
-Digital media management – allowing project management skills

Cons:

-Focuses a lot on web fundamentals so may be repetitive of previous studies
-Developing back end skills may hinder front end skills in future employment

Course 2: MSc Digital Marketing (Southampton University)

Pros:

-Allows knoweledge of online market to be gained
-Mixes development and management of site after completion togther
-Allows top ranking in websites created – module cocentrating on SEO
-Social media knowledge will be developed

Cons:

-First or upper class second entry requirement
-Some business knoweledge would probably be helpful for the marketing structure
-May limit jobs to marketing positions after completion over design

Course 3: MA Interactive Media (London College of Communication)

Pros:

-Gaining further interactive skills
-Longest established course in field
-Group project work rather than dissertation

Cons:

-Moving away from web and more into user interaction
-Bases around media and animation in first phase

Course 4: MA New Media and Internet Technologies (University of Bedfordshire)

Pros:

-Develop JavaScript skills
-Develops e-comerce website building
-Interface design allowing user interaction knowledge

Cons:

-Not really focusing on design
-Concentrates around WAP and mobile design rather than screen web design

SPP3! Jobs Final Four: Pros & Cons

Job 1: Web Designer for Limesharp (Creativepool)

Pros:

-Desired location
-Young company so being a graduate will fit in well
-Know how to connect with clients and small team means I will have to deal with clients
-They like starbucks!
-Front end skills – wireframes and designs which I have lots of experience in
-CSS/HTML skills required which I pocess
-Mention needing attention to detail – a quality I am regulary moaned at for having to an extreme!

Cons:

-Competitive location
-No linux server background
-Basic illustrator knowledge
-Comericial experience is prefferable and coming from graduation I lack this.

Job 2: Digital All-Rounder for Focus Integrated (Creativepool)

Pros:

-Ideal location from hometown easily commutable
-Large company for internal progression
-Multiple services meaning lots of skills can be developed
-Marketing and creative broadening skill set
-Separate web company = dedicated team
-Largest outside of UK city means strong commericial awareness
-Design experience required – can be proven through freelance/uni projects
-Front end skills required – my strengths!

Cons:

-Salary dependent on experience so could be low!
-No experience with HTML email design
-Being digital marketing may want further knoweledge within this area

Job 3: Web Designer (Guru Jobs)

Pros:

-I pocess all the skills required – HTML, CSS, Flash and Photoshop
-Wants potential which I can offer being a fresh grauate aware of current trends
-Agency has ambition which I can most definarelt bring!
-Location is good for staying here and comuting
-No mention of comericial experience being needed

Cons:

-Flash skills indicated to be quite high but mine are only medium skilled
-No mention of who the company is so hard to reserch around
-Specifically being web design not much scope for new skills to be developed

Job 4: Digital Designer/Web Designer (Monster Jobs)

Pros:

-Large client base means I can gain essential contacts!
-Need to be designer with little development knowledge or vice versa which I am with limited PHP skills
-Front end skills required are my strengths
-I have a knowledge of WSC standards required
-I have design experience which is mentioned and good as its design over commerical!
-I pocess some of the additional skills listed
-From final year of university I am compitent at multi deadlines!

Cons:

-No definate location could be one of three only one is really close to either nottingham or my hometown
-Assisting designs may mean limited design input
-Basic illustrator knowledge