Finishing touches

Favicon: creating a tiny logo to be displayed at the top of the page load. Also known as a bookmark icon.

http://en.wikipedia.org/wiki/Favicon

Coverletter

This is my coverletter: It is double sided ad i've mixed fonts which was intentional, but I'm not sure if this has the desired effect. It is indended to be a 'teaser', and would hopefully create enough interest to get them to take a look at my website. It should also stand out from other applicants, as it is very different from the standard cover letter. I couldn't find a huge amount of existing examples.

Designing my portfolio cover letter

I have decided to design a graphical cover letter to go alongside my project, to hand out during my presentation, and i decided that it would be a good idea to tailor it to an actual job listing that i found to create more realism.

I found a posting for a interaction designer based in Enfield, London, which suited my skillset.

http://www.greaterlondonjobsonline.co.uk/detail/i-285465/interaction-designer-jobs-in-enfield

I also found an internship programme with IDEO, that i can now apply to with  full online portfolio. http://www.ideo.com/careers/interaction-design-internship-summer-program1

It was important for me to get a job/internship posting to work towards, so that i could tailor the cover letter to it. I am intending to put a QR code on it, which would form the 'CV' part of my application.

IMPORTANT: If the CV will be accessed by employers on iphones/smartphone via a QR Code, i CAN'T use FLASH in any part of the website as it is incompatible with the iphone. This was a consideration when building the website, as i want it to be compatible. I have tested the website on my iPhone and on a few different smartphone browsers to ensure compatibility.

IMPORTANT: Signposting for the introductory page: it is just an image, and although it matches the logo i will use on my cover letter, i am unsure as to whether this adds to the experience, or removes from it as an extra barrier to get to my content.

I have just found a second advertisement, speificaly for a junior interaction designer, and also based in London http://www.ujob.co.uk/job/junior-midweight-senior-interaction-designer.htm?utm_source=Indeed&utm_medium=organic&utm_campaign=Indeed

I may use this as part of my application for a short work experience posting this summer as it is a recent posting.

My aims:

• Thematically and aesthetically similar to my postfolio
• Short and sweet
• Possibly mention my skillset briefly
• Contact information
• QR Code

Research:

Looking at existing graphical cover letters

 http://img.thedailywtf.com/images/200909/graphic_design_resume.gif

NORMAL COVER LETTER: Looking at it for 'usual' content

 

http://www.twc.state.tx.us/graphics/jhgcoverletter.gif




http://farm5.static.flickr.com/4031/4711830966_725394dc8b.jpg

Context of use

The who:

1. potential employers: internships
2. Teachers/Examiners
3. Other Students
4. The rest of the world

How would they come across it? What Are their Neds? Do i meet these needs?
1.  potential employers: internships

• Email with cover letter & link
• Postal with cover letter & QR CODE 
•  Their needs are: ACCESS TO FINISHED PROJECTS/DESCRIPTION OF SKILLSET
• Do i meet these needs?

2 Teachers/Examiners

• Disc access (when reviewing the entire project-so link must be made available easily from here on the disc & i will put it on my sketchbook cover heading)
•  Their needs are: ACCESS TO ALL SECTIONS OF PROJECTS, CLEAR DISCTINCTIONS BETWEEN THEM ALL. SELF ANALYSIS, LEARNING OUTCOMES
• I do meet these needs

3. Other Students

• URL Link
• Their needs are: ACCESS TOOUTCOME SECTIONS, ACCESS AT DIFFERENT LEVELS: MIGHT NOT WANT TO READ THE TEXT, SO MAY WATCH THE SHORT VIDEOS INSTEAD
• I do meet these needs

 4. The rest of the world

• Google/Search engine 
• Their needs are: EASY SITE NAVGIATION FOR BROWSING
• I do meet these needs

 Potential Employer Diagram (access route) & comparison to other access routes. Demonstrates expected paths: allows me to see if the website is easy to use for these paths, and if any improvements could be made.

Additinal path diagrams.

Site Changes

-Small Error Tweaks (Wrong page headers, broken link finders)
-Emphasised site hierarchy: Project two is the immediate focus, and the user is gently guided towards initially viewing these
-Resized Elements
-Better Singposting
-Editing Fonts
-Blog links are all black, and near the bottom for continuity

Designing my presentation

The colourscheme, fonts and logos have been applied to my slides.

I am also going to design some handouts with a quick feedback form to use as part of the project.

Designing my presentation

The colourscheme, fonts and logos have been applied to my slides.

I am also going to design some handouts with a quick feedback form to use as part of the project.

COMPLETED WEBSITE

I have now finished the entire portfolio website, complete with video clips, links and descriptions.

The next thing that i have to do is debug, user test and then finish off the presentation for it.

Audio commentary for the intro of the sound project

I am creating the ambient noise to go with the audio commentary that i will record for the overview video of the sound project. I am taking clips from freesound.org and mixing them together. I want to create an atmnosphere that creates almost a suspense about the next stage of the project.

http://www.freesound.org/samplesViewSingle.php?id=33796

http://www.freesound.org/samplesViewSingle.php?id=1178

http://www.freesound.org/samplesViewSingle.php?id=21911

The way that i am designing this video is slightly different from the videos for the first two projects. It is much more expressive and personal. The overview video for the community project is very straight forward an analytical, much mroe like a presentation. I like the different styles of video and feel each relates to the project, as this project was much more experimental than the first. Having different styles of video brings depth to my portfolio project, and shows that i can create both informative and experimental videos, whilst getting my point across in both.

I decided to make the intro video a 'teaser' clip, viral video style. It will be very obscure, building upto an atmnosphere. However, the description underneath will explain the overview and aims of the project as usual.

This is what i came up with:

PORTFOLIO PROJECT: Developing The website

I have so far almost finished putting in the content. All i have left to do is the 'fashion section' and create two videos for the Sound Journey Project. I have decided that i want to use sound as a descriptor. I also have to add to the portfolio section.

As the portfolio has grown, i have noticed some organic changes being made i.e. the length of descriptions underneath the explanation videos have shortened and are become more concise. I am considering goign back and rewording them. I am also finding it easier to make the explanation videos, and am having much more fun with them. they are not all slideshow presentations. However, i do think that the slightly different styles of video do 'fit' the projects themselves.

PORTFOLIO PROJECT: year 2 project 1 research/process section

Page 12 in the sketchbook

I just started to plan the video for the research/process sections of my portfolio, and i am instantly realising that the content is simply too long. I really do want to keep the video under 5 minutes long and for it to simply outline the major points of what king of research i took and the things that influenced me. At the moment it is becoming a stage by stage account. What i should do instead is post a short video, with a textual description below it and then simply post a link to the appropriate blog for vieweing in more detail. The content of each project within my portfolio shouldnt take more than 10 minutes to view (all of the videos combined), and should be short and concise.

Below is my current script. I am going to change it so that it is more of an overview and less of a step by step account, which my blog is for!

Designing for real spaces and evolving communities RESEARCH/PROCESS VIDEO

For this I am going to extrapolate images and content from my blog, and the separate it into titles. I have already noted down what I want on each slide, but here I am going to build it. I am them going to write the script below each individual slide, and together at the bottom.

SLIDE 1

‘This presentation will describe how I went about my research, how it influenced my work, what I came up with originally and how it changed in the second outcome.

The project was started at the British Museum, where we were invited to look at various artefacts to try to understand the kinds of communities that created them. Trying to understand a community based on design that evolved through them was really useful as you questioned yourself on the observations that you were making and why you were making them. One of the things I observed were the black folding chairs placed in a corner of the room, and suggested that they were perhaps not just for the older visitors, but perhaps children on school trips who were expected to engage with a specific area for an extended period of time.

What I noticed most of all was the situation of them, however, they were placed at the exit area in a place where they were unlikely to be noticed, obviously intentionally as to not detract from the exhibits. You’d only see them when it was too late, or if it was too late to see them. This made me realise that whilst it is great to design something that slides neatly into the existing space, this is useless when it goes unnoticed or is noticed too late to use.

SLIDE 2:

We were also asked to identify three objects and design useful technological suggestions that would benefit the community that we deduced they were from. One of the communities that I had looked at was the isolated small 1960’s Ghanaian community that had created fantastically detailed coffins for their loved ones. I wanted to make suggestions that would not be patronising or compromise the way of life that they had a right to. I was very conscious of making the assumption that ‘new automatically  equals better’ and that the community I was designing for were probably very happy with their way of life.  I made small suggestions such as roads and basic tools. This exercise helped me to appreciate the collective wants and needs of a community.

SLIDE 3

Next was observing real-life communities, and I chose London bridge. This introductory exercise helped me narrow my focus, and decide what it was that I was looking for. I ensured that I observed in multiple levels of details: to see the community as a whole and as individuals as both are important when you are designing. I observed things such as how much  time was spent in particular areas, general demographics as well as things that were happening to individuals. I noticed the trouble that some parents were having navigating the station, and I decided that I wanted to make something to help them.

I decided to try to reach as many people as possible at once to try to get preliminary responses, and the best way to do this was via online communities. I looked online for applicable webites for my research and whilst doing this I realised just how many resources there were available for single parents, although many were offering similar things i.e. child rearing advice and moral support.

Moving forwards I wanted to observe the community in the real world, and decide to do this in an informal situation where there was a common goal, and my trip to support family at the cancer research 10k run was a perfect place to do this as everyones barriers are lowered by a common aim. 

EDIT: 25 APRIL I have just finished off recording my new research/process script. A transcript is below:

We were given the brief at The British Museum, where we did some exercises to make us think about the function of community within design. From here I identified my chosen community as ‘Single Parents’ after doing some participant observation at London Bridge. It interested me to see how parents behaved in a busy station with their young children.

My first contact with the community was made within the online community where I not only contacted the members directly, but also looked at blogs by single parents to gain a greater understanding of their everyday lives.

I approached the task of designing for my chosen community would by looking at difficult or high-stress aspects of their lives, and then to design something that would make this part easier for them. I soon realised that food preparation and feeding kids took up huge periods of time. Rising food prices and wastage meant that expenses were high. It also requires a lot of effort to ensure healthy, varied meals for them and their children. I realised this not only by sending out questionnaires, but I also designed ‘day maps’ where single parents could fill in what they are doing hour to hour, so that I could quickly identify how their days are structured and how long is spent doing various things.

In addition to the day maps I did myself I also found some online which increased the depth of my understanding and also validated my findings.

 Though the questionnaires I learnt about average expenditure and food wastage to back up my research into national statistics and newspaper articles on the subject which reports huge amounts of ‘avoidable food wastage’.

 I found that parents had trouble finding quick, healthy meals for their kids, and also that a lot of food was getting thrown away as they had no idea what to do with it!

‘Dinnermate’ was created to specifically approach these needs, and once the concept was created, most of my process work was focused on developing the appearance and functionality of it. I engaged with my chosen community to ensure it was appropriate and useful to them.

Now dinnermate is both a website and a physical installation, and I am clear in the context of use. The physical installation would be used by parents waiting to pick their kids up from school, and not only does it approach the food problems, it would also provide a talking point and bring all members of the community together as observers. Parents would search the database or the other sections and then print ut their findings. I have provided two clear interfaces for the two different contexts of use. Dinnermate for the web has the added functionality of a login feature which provides access to a section to upload your own recipes as well as see what your friends are doing and even post in the forums. There are kids activities as well as sale alerts and shopping alerts.

I created the website using a freeware piece of coding software called netbeans and uploaded it to website via Filezilla. I was originally using Dreamweaver as a creative tool, but writing the code from scratch allowed me to develop my HTML, PHP and CSS skills that I had learnt in my other lectures during the year. I even tried some j-query script which I didn’t end up using. During this process, I referred to a website called w3schools as well as looking at online forums.

I feel my process has taken me to a point where I am pleased with the outcome and feel that I have not only developed both my research and ideation skills for design, but also learnt some valuable technical skills. I attempted to push myself to create a fairly functional outcome that satisfied the targets that I had set myself as well as the requirements within the brief.

PORTFOLIO PROJECT: Site tweaks & current look

My website currently has a purple theme. It also has page indicators, so you know which page you're on. I just added page titles to the page heasders instead of all the pages saying 'siobhanmckenzie.com'. I have tested the website in firefox and google chrome. It doesnt really work in internet explorer, and i cant really understand why. The elements are all over the place. I am not too worried at the moment as i know that a lot of websites have problems with compatibility in different browsers. I do have an old version of internet explorer, so i will update it and see what happens.

 this is a screenshot of the tools that i am currently using to build my website: netbeans and filezilla!

 my website index which is an introductory image, and takes you to the main portfolio when clicked.

my homepage with a little bit of information about me on the left, a message to turn our speakers up, and the intro video



a screenshot of the overview of my first project. There is some text below it which differs slightly from the content of the video, but is essentially the same information, just edited to make it easier to read.

PORTFOLIO PROJECT: TESTING IN DIFFERENT BROWSERS

I just tested my website in IE and google chrome, and it is displaying extremely poorly in IE but OK in google chrome. The problem with google chrome is the way i've done the line breaks. i just need to make a small change to the code! I was doing <br></br> line breaks which is fine in firefox as it ws ingoring the second break close, but not google chrome. The problem was that i was using XHTML break code in a HTML document.

I currently have no idea why IE isnt displaying it properly. I am using the DOCTYPE declaration at the top of the page, which W3schools sugested.

PROJECT1: Developing the 3D model and video presentation

 Page 11 in sketchbook.

As i have already developed the interface, it is now the time to demonstrate where it would be used and how. I am going to build it in google sketchup, create short animated scenes and edit it with titles in windows movie maker to present it.

I originally created an ad for it, which although was very quirky, didnt really show how my outcome would be used in context. The simplest way to do this is through a model, and the presentation of this.

I have taken some screenshots from google sketchup to work from (i am not allowed to take photos on site for child protection purposes).

This will form the basis of my model, and i will then place an interactive piece in the space to show where it would go. The interactive screen should not detract from the childrens enjoyment of the playground or feel like an obstace, and it must not distract the parents from collecting their children too much, so they should still be facing the places where the children come out (there are two doors which i will mark on my map. i will also show where the parents are and their eyeline.). The playgrounds are quite visibible, and the interaction would be placed somewhere in there.

 

Edit (Next day)

I have just finished the basic 'before' state of the model. I overlaid it onto a google earth screenshot of the layout.The next thing i have to do is put together the video. I am first going to record my introduction into the piece, so that everything happens in order and i dont get too far ahead of myself!

EDIT: i just finished my introductory video. Now to work on my research and process sections video. I have uploaded this to my portfolio wesbite. I have decided to put titles, and a textual version on every page underneath the video so that there are more options for users.

PROJECT1: Re-Applying the outcome to the brief

pages 9-10 in my sketchbook 

Now that i have a fully functioning website, i now need to consider how it would be used as a real-life installation and how it would potentially bring people together!

I didnt really contextualisemy work into one specific site, and instead looked at various different sites and tried to gain a greater understanding of the community itself, and how it functions and adapts to different surroundings. I stand by this research, and feel it enriched my outlook and allowed me to create something uself, but looking back i do ned to contextualise it into a particular 'site'.

I have decided to focus in on schools in particular, as it was one area that i knew was quite time consuming i.e. getting kids ready for school, dropping them off and picking them up, as well as ensuring  they ate soon after they got home. Food preparation times was a big one, and thats why i feel that a school context i appropriate. 5 out of 7 times a week, food is prepared for kids when they finish school, so it is the most visited place around the time that dinner is eaten.

I have chosen a primary school called 'Mission Grove' as my selected site as it is a place that i used to be very familiar with as i attended there, and i could get access to and i knew a few parents whose children went to school there. I know from experience that my parents would get there early to ensure that i saw them as soon as i got out of classes, and they could be waiting upto 25/30 minutes as the classes are let out one or two at a time to ensure that they know where all the children are (for safety). I visited the site today to pick up a cousin, and took a few sketches and notes. Although it is a chance to socialise, from my site visit i saw that the parents were talking in small groups, with quite a few people on their own with nothing to do, smiling at a few people but generally not doing much. there was a good atmnosphere, but after making small talk with a few parents, i realised that they were impatient to get the children home.

I asked a few parents (non-exclusively single parents-only one of them was a single parent but i did feel that my idea relates about what they were making for dinner, and i got the impression that there was little variety week to week, and i find myself that its easy to get stuck in a rut despite having much more free time. i also asked if they threw a lot of food away, and in contrast to my original research, the parents i spoke to were quite responsible with their food, and said that they didnt throw much away, although it could be better if they could find uses for them! I mentioned my website, and they seemed enthusiatic about the idea especially the sale alerts and the 'cheapest places for their weeks shop' would be a great help although they were worried about inputting their shopping lists being time consuming. They said that the recipe ideas was great and that it would be a great inspiration to get some variety into their diets.

As i have gotten some really positive feedback, i feel that it is now time to bring the functionality of the website to them for them to use its ffeatures within the space. It will hopefully bring them together as a talking point.

I essentially just was a touchscreen installation. I have designed a 'touchscreen' version of the website, with larger icons and only four features: quick search, full search, kids area, and sale alert section. The first three sections are all very simialar, but the sale alert section diplays sale items locally to the shops. I considered having a login section to display the cheapest place for your recipe list, but it would require the user having to login to an account in a public space and i think that this is inappropriate.

The search functions would then allow you to print out the results of your search onto a piece of paper, and there would be a printer in the installation which would allow you to print out the kids activities. I feel that this itself would bring people together, and would actually be useful aswel.

Surrounding objects would play some part in the placement of the interaction.

I now have to design a google sketchup model of the site and animate it. I am going to use the edited sketchup video footage to explain how it would be used and give it a context of use. This woud be mixed with the website and the interactive simulation (also hosted online) to bring the whole project together.

The installation interface mockup is hosted on dinnermate.net but is accessible only directly here http://www.dinnermate.net/interface1.php

NOTE: Photography is not allowed on primary school grounds (child protection) so i am going to take my images from google maps, have done brief sketches instead.

My portfolio website: Development

pages 5-8 in sketchbook 

I have made a few changes: introduced a blank introductory screen with just a logo, and changed the colourscheme. I have also signposted the year 2 projects which are the focus of the portfolio by putting a title 'YEAR 2 PROJECTS' above the project number. When you hover over it, it instructs you that you need to select a project number below it to proceed. I think it is self-explanatory without, but i will do some user research soon to find out.

I have also introduced mouseover explanations to each project number so that when you hover over it, you get the full title. Once the number it clicked, the project title will become permnanently visible in the page.

I plan to use audio and video presentations throughout my portfolio, and now i have to record the introductioon for the homepage. I will record it on my iphone, and use an audioboo plugin to host it as it is the simplest method. When i take my portfolio presentations i will use the HD recording settings on my SLR and put it on a tripod. I plan to use a presentation to show my research/process work combined, much in the way the the final presentations at uni work. I am considering recording my presentation of my 2nd year work at uni in a few weeks time. However, this would mean leaving some content out of the portfolio until it is sumbmitted a few hours earlier which isnt ideal

As you can see it is now purple, and i really like the new look. the design has changed so much from my first idea, but i feel it still represents me as a designer and the layout is more appropriate for a portfolio!

I am now going to fill in the homepage content and design the bottom layout!

I also want to put it into a video which will have floating words in it!

i have just finished editing myintroductory  video. I storyboarded briefly in my sketchbook. I created the slides using pixlr, and edited it in windows movie maker. I do like the look of it, and will apply the purple design to the appearance of my other presentation videos!

I have added the frame to my website. I have decided to signpost the fact that you need to turn your speakers up (learnt from my previous project with sound) so that they know that there is something to listen to!

Inbetween these stages i decided against using numbers as titles, and instead to use shortened titles as it was simply pointlessly  confusing not to. The full titles are seen when you mouseover the link, though.

NOTE: possibly applying this colourscheme to my presentation and blogs!

http://youtu.be/-Xy1iOBllA0

I was fully intending to add bos to my website but it doesnt really 'fit' in terms of dimensions and design so i am deciding against this feature. It was only there to provide a way for people to hear my introductory speek without having to load any videos, but it is very short  so it wouldnt take very long to load. The content of it is also quite self-explanatory, but i though having my voice on there was a nice way to personalise it, and make users feel more connected to me.

My portfolio website: TRYING OUT NEW THINGS

With my portfolio website, i wanted headers that would expand when hovering over them, or have a full title displayed below.


I started experimenting with javascript bout couldnt quite get it working properly!

<html>
<head>
<script type="text/javascript">
function displayDate()
{


var textchange2 = "The title of project 1" ;
var id = document.getElementById("DP");
id.innerHTML=textchange2;

}


</script>
</head>
<body>



<h1>My First Web Page</h1>




<button type="button" onmouseover="displayDate()">1</button>

<p id="DP" > </p>

</body>
</html>

I could get the button working, but it looked a little strange and i realised that i should do little tweaks like this at the end, and get the content sorted out first rather than doing it now.

My portfolio website: BEGINNING STAGES

This is currently how my portfolio website looks. I am trying to arrange the elements to look as i want them to before i start putting content in! This method worked before!

this is how it looks a few hours later with the banner completed. It is very similar to my fashion website, which i designed 2 years ago, and have constantly been making small changes to. I like the clean-ness of the logo, but it looks too sharp against a white background. I also have to remember to do a favicon for the site!!

I am still using netbeans and pixlr to design the website, and filezilla to upload it to the server.



I have added some detail to the banner. I love the greyscale colourcheme, and crisp font (Adobe Caslon Pro).. It means that the focus will be on the content. Although there is not a huge amount of colour, i feel that the website does reflect me as a designer in the same way that my fashion website design reflects me as a designer!

I have had a slight u-turn and decided that the website looks too much like a shopping site. I want to keep the site clean and neutral, but i am going to change it and invert the colour on the banner. I want to have a colourful animation grow at the bottom though to add a bit of life to the site.

I am also going to have a look at existing design portfolios for some inspiration. Although i do essentially know what i want to do, i want to have a look at others. In my last project, i looked at graduate portfolios, or those of people already in the industry, but i want to see if i can find any examples of design student portfolios to see what kind of things they have included.

University hosted student portfolio: http://www.wherecreativitygoestoschool.com/portfolios/vancouver/681479/ Examples of finished work only, no additonal information. Seems that the purpose of it is to encourage students to come to the university. There are ony titles.

Advantages: Quick access to 'list' of completed work. Very slick and easy to use.

Problems:  No understanding of the process behind it, or their range of skills.

 Another university hosted portfolio: http://www.sessions.edu/for-students/student-gallery

Again, very slick, but contains no contact information about the individuals or their individual strengths. 

http://www.joannamorgan.co.uk/
There is an introductory page. With a welcome message, quick links to the cv. Navigation is at the bottom, with all projects listed by category.

Problems: slight information overload, no particular focus on one project/set of projects over another.  


Bottom navigation means having to scroll to the bottom of the page. In a way this forces users to look over everything, but at the same time perhaps they dont want to and would leave the website, frustrated.

http://vimeo.com/10731856 Casey Defay Sound Design Portfolio-video, hosted by  Vimeo. Contains contact details at the start. Almost a series of short ads put together. High quality video.


Problems: Very slow to load, frame-jumping and slows me browser down. Difficult to skip between different portfolios.

 I have made the decision to have four main sections, and to include an overview of my research and process, but to this time not include the actual sketches, as it would only be for the examiners/teachers benefit, who would also have access to my sketchbooks. Potential employers/placement companies would also have access to my physical sketchbooks, so an overview would be enough.

Having too many images on a website causes slow loading issues, and could cause problems for other potential users. 

Working on the website

Page 6 in sketchbook.

Now that i have successfully completed one stage of my project re-working, i want to start building the portfolio website itself so that i can simply drop the projects as they are completed.

I have had a few ideas: Video presentations of my research. In my previous project i showed a collage of my sketchbook with rollover buttons explaining what they were, but there were no in-depth descriptions of what they were looking at, or to describe how it influenced my work. In this project i have decided to present my work, upload it to youtube and embed it in my portfolio

I did my original portfolio in flash, but i am now more comfortable with HTML, so i will use HTML and CSS to build my webpages. It means that when i upload it to the host it will be much easier to read in all browsers. I also had the problem of limited page sizing with my first portfolio, and had to cut out text to fit the screen. If i use normal HTML, the page will resize to fit the content so it will be much for flexible.


I want the navigation to be much more straightforward. I had an 'exploration' concept which i applied to my portfolio which was fine when i was there to explain it, but when it was being marked solo it became confusing i believe.

There was the problem of missing identifiers to indicate thich page i was on-the headers didnt change when selected so it could be easy to forget where you were and where you had been.

I have done some sketches in my sketchbook.

I eel it is slightly less encessary to look at outside sources, as i did this when researching the first brief, but it is always good to gain insight into what other people are doing and for inspiration.

I have decided to apply some elements of my fashion website to the project i.e. my labels logo as well as the black/nude colourscheme. I feel that this element of a personal touch was lacking in the first portfolio.

I have also decided to show my personal work in the portfolio as well as work from both years, although the work done in the first year will probbaly be embedded in the first portfolio as it helps bring it all together and i can say what i learnt from the year as a whole instead of analysing individual projects.

I have decided to create an introductory screen with simply my logo on it, which i will animate in adobe fireworks. I decided to try to use fireworks to try to teach myself something new, rather than just using flash cs5 which i am quite familiar with. i am using youtube for tutorials. I simply want my logo to fade in at launch.

Project1: Completed website

The website has just been completed

It contains an 'abous us' section for more details about me and a description of what the website is for.

It also contains a 'help' section with sample passwords and the entire database of recipes to help with picking sample keywords

The login and signup sections work.

The search functions work properly.

I am pelase with the final look and functionality of the website. I feel it helps my chosen community, and that there is definately a sense of community with (bnot working) live updates from friends, recent activity on the site and a forum section.

the website also has a kids section with activites for the kids to do whilst you're cooking.

The website is at http://www.dinnermate.net/

there is a link back to this blog in the help section

PROJECT 1: writing the code

i am now attempting to write the code for the quicksearch panel.

i have successful got my variables posted from the previous page. what i need to do now is get all the results displayed in a table. once i have done that i will tweak the code so that it only displays certain entries.


i am using some code from my previous solo database systems coursework as i have forgotten how to display results in a table!

PROJECT 1: CHANGING THE DESIGN

 page 4b in sketchbook

I've made the decision to change the fucntion of the quicksearch panel to give you recipe ideas based on how much time you have.

i also want the 'recipe of the week' to be real, and will use my database to populate it. i will have to add another field to my database to store how many times an intem has been viewed though.

I have also changed the design to make it easier to navigate, and improve the general aesthetics.

I have rearranged the headers.
I also decided to change the quicksearch panel to find a recipe based solely on how much time you have.
I also want there to be an icon explaining the main function fo the website, and displaying it prominently rather than just having a 'search' link at the top.

There is still a lot of work to be done!

I although thought i'd mention the tools that i am using to make the website: I am using netbeans and filezilla to upload the files to the server. I am not using dreamweaver or any c reative tools- i am writing the code and CSS myself. I am using http://pixlr.com/editor/ to edit the images.

I wanted to learn about writing websites myself, without using authoring tools and i am learning a lot about CSS as well as how to structure HTML andd PHP files. I am using http://www.w3schools.com/ for tips and code snippets and hints such as the code i can use for creating radio buttons and forms.

I have also decided to use tables to store my data rather than just larger images which will store data better, and i am using these two tutorials to help.

http://www.myhtmltutorials.com/table.html

http://www.w3schools.com/html/html_tables.asp

i have finally finished the homepage, and i took an icon for the recipe section from here:

http://www.totallyfreecrap.com/Images/2009/aug/rec.gif

NEWS: I have just bought the domain www.siobhanmckenzie.com to host my portfolio website.

PROJECT 1: REBUILD PART 2

I've been thinking about the relevance of food to my chosen community (single parents) and done a bit of research and discovered that its the biggest single expense aside from mortgage/rent.

It would be a useful tool to have a link to mysupermarket.com which is a tool which incorporates the stock of four of the biggest supermarkets and allows you to choose what you want from each. It also allows you to easily select cheaper alternatives. There could be a link to mysupermarket for recipe ingredients and also sale alerts.

There couls also be a function which allowed you to put in your weekly shop, and it would then tell you where the cheapest place to get our list was on any given say (if you didnt want to order online!)

DEVELOPING THE LOOK OF THE WEBSITE:

I have taken my logo design, and elemental design through a few different stages. I have designed on the computer as well as on paper. Below i will explain some of the steps and decisions i have made.

Overall design: i wanted a retro theme originally but i didnt have the time to take it through much development. I wanted to stick to this concept, but apply it more effectively. I've never written a full html and php website before by myself and found it frustrating, but i found http://www.w3schools.com/ to be a valuable resource for PHP, HTML and CSS. I decided on external style sheets as it meant that i had a formula for the design and didnt have to keep on redesigning elements.

 https://www.fabricsfromtheheart.com/store/images/uploads/Michael%20Miller/Fun%20Pink%20Polka%20Dumb%20Dots%20on%20Chocolate%20Brown.jpg

this polka dot background is taken from the source above. I used it as part of my logo.

 This cupcake image was taken from http://1.bp.blogspot.com/_iKg39c6CSwE/S88ZbPrbqDI/AAAAAAAAAHo/vAp3LnOSNEE/s1600/cupcake.jpg

 the old design- very retro and i love the tiled wallpaper but it is far too basic and outdated!

the overall design as of the 18th of april. 

I have gone with a retro polka dot theme with a pink backing.

I have included where i'd put advertising space.

At this point the website only have one page.

the advertising space is very prominent, and large which would create more revenue.

the logo is still prominent, but not the focus of the page. 

the login and signup is very prominent, but doesnt yet work, 

i have included a 'quick search' panel'

Major links are in the middle of the page. I have to add more headings though.

this was my original signup.login button but it looked a little dated in a bad way, so i instead but form buttons over the top. It also meant that i could reuse the image, but change the conent of the form buttons to suit the apropriate page.

my website currently looks like this:



so far the login, checklogin (homepage), logout, and kids pages are working.

PROJECT 1: REBUILD

Minor tweak: a homepage-you dont login right away!

I am also adding a logo to the address bar and external style sheets today.

DONE: Adding the logo under 'favicon.ico' which adds the logo to the address bar. Learnt at: http://www.chami.com/tips/internet/110599i.html

I am looking at a few different websites to see how they are constructed and to look at the colourchemes to give me inspiration for mine.

Recipe websites:
http://www.jamieoliver.com/

I need to find some food images for the website: http://www.freedigitalphotos.net/images/search.php?search=food&cat= for free stock images

bright and colourful. Easter images at either side. Very clean. Links to social networking
IDEA: possibly make a facebook page & create social networking buttons. DONE. Facebook page setup & like buttons setup.

http://www.bbc.co.uk/food/recipes/

grey theme with splashes of colour. i noticed that there is a recipe finder which has a similar function to my webstite. There are additional fields such as cuisine and special diets, but there is no community built around it. There are forums however.

Female oriented social networking websites:

http://www.cosmopolitan.co.uk/

pink and white theme with lots going on, advertising etc. moving GIFS. community aspect: forums and commenting feature enabled on some of its content.

http://mashable.com/2008/05/11/top-10-social-networking-sites-for-women/ allowed me to find varius social network sites aimed at women.

kaboose.com family tips and social networking. clean, modular layout with pastel colours.

http://www.ivillage.com/
clean, bright, questions and topics displayed at the homepage. lots of ads and photos.

i am trying to design the homepage to obtain the CSS for the rest of the website. at the moment i am looking at a bite logo from  http://iamdonu.com/buzz_files/bite%20icon.png i also really like the logo http://www.sanfrancisco.com/cake-coquette/gifs/cake-coquette-logo.gif and am basing mine on this.

i am using http://pixlr.com/editor/ to edit my photos as my netbook doesnt have photoshop. it is quite a useful tool!

cupcake stock image http://cdn.taste.com.au/images/recipes/del/2005/09/4150.jpg

PROJECT 1: BUILDING THE DATABASE

Note: Page 3b in sketchbook.

In my previous post i mentioned that i was going to setup the basic functionality of the website, and the databses before i worked on anything else, and this is what i am going to do!

 Step1: users database

Fields: user id, username, password, email address

STATUS: POPULATED WITH 4 USERS

Step 2: recipe database

fields: recipe id, title, time, cost, ingredients, meal type, instructions

STATUS: POPULATED WITH 5 RECIPES

SOURCE: CREATED BY ME

These have been created on both the hosted database and my local database for testing. I am now going to construct a login page, a checklogin page, a user account page, as well as a page to search the menu database and a page which displays the results.

 

THIS SCREENSHOT DISPLAYS MY LOGIN PAGE DATABASE ON THE SERVER!

THIS SCREENSHOT SHOWS ME EXPORTING  THE DATABASE SO THAT I CAN DUPLICATE IT ON MY SERVER FOR TESTING

I need to do some planning which will be in my sketchbook on pages 4-5

Pages i need to make: WELCOME PAGE, LOGIN PAGE, CHECKLOGIN PAGE, SUCCESS PAGE, FAILURE PAGE, SEARCH DATABASE PAGE, RESULTS DATABASE PAGE.

It outlines the pages i am making. The php code files that i am making the login pages from will be derived from my PHP blogging project that i am doing for another university project.

I am writing my own recipes for the purposes of this project. They will use only 2-5 ingredients.I will derive some of my instructions and info from various sources which will be listed below!

cheese on toast: ME! (SIMPLIFIED)
red pepper chicken pasta: me! (simplified)
tuna pasta bake: me! (simplified)
bacon and cheese pasta: http://www.studentrecipes.com/recipes/quick-food/bacon-and-cheese-pasta/
chicken and chips: me! (simplified)

The offline database source for the recipe is titled 'recipe database' and is a .txt file. In the next post i'll have my basic website up and running.

EDIT I added a second recipe to the end of the database with duplicate ingredients in order to test the function & show how results would be displayed.