Simulated Client Project – Healthy Living Microsite

I’ve made a micro-site based around healthy living, specifically student healthy living. This mini project was the first part of the client module this year, its acted as a practice for the real thing that’s coming up shortly, more on that later…

I chose the topic of healthy living because an idea popped into my head as soon as i saw the list of potential topics, i am terrible at cooking but am frustrated with what i eat and know that a lot of students feel the same so a micro-site containing short simple recipes for a healthy balanced diet would be the perfect solution to this brief.

The initial research process lead me down a path of handwritten fonts and hand crafted aesthetics, they are a bit of a trend at the moment and i thought it would fit the student concept well, with the vague concept being that the site could look as if it was scribbled down by a student in their notebook whilst bored in a lecture or something.

I drafted up this mock up in photoshop…

So using that design as a base i began constructing the site in HTML & CSS. I really learnt a great deal about CSS layout techniques during this process, a lot of the techniques i had used in the past i found were more on the side of workarounds than best practices, i was conscious of the need to make sure everything validated and as a result i feel my knowledge has come on leaps and bounds.

So after a hectic few days coding the site, and dealing with ie7 (didn’t even get started on ie6, more on that later in the post!) i arrived at the outcome of the image below…

I made a few adjustments from the original mock up, the main one being adding more detail to the page background image, the little doodles really enhance the hand drawn look.

One of the things that I’m not happy with is the typography, i like the custom fonts used in the headers but the body text just doesn’t look right. I didn’t have time before the deadline to tweak it as much as I’d liked, i just haven’t got to grips with web typography yet. Very much going to get some books and nail it on my next project, its often an area that I’ve overlooked and as a result my skills in this particular area are a little underdeveloped at the moment.

One of the main learning outcomes of this project has been dealing with cross browser issues. I wanted it to work in firefox and ie7 as minimum, and in the end that turned out to be what happened as i just didn’t have time to deal with ie6. I was experiencing great problems with ie7 that lead to a complete restructuring of my css rules about half way through construction. This turned out to be a good thing as it enhanced my understanding of css and how best to use it. I got to a stage where the site was nearly the same in both browsers but there were a few layout issues in ie7 that i just couldn’t fathom so i used conditional commenting to load an additional stylesheet for ie7 users that fixed the errors, a very useful technique that i’m sure i will be using again! Would liked to have made it work in ie6, particularly as my next project will definitely need to work in that browser, but i just didn’t get time to start implementing all the various browser hacks that would have been required for my site to display as intended in this terrible excuse for a browser. I’m aware that future sites will need to work in ie6 so definitely will allow more time for that next time!

Here is a shot of the site in ie7…

So all in all i feel pretty pleased with this project, ive certainly learnt a great deal and it also had the added benefit of helping me get my head back into web design after some time consuming extra curricular distractions of late, but thats another story for another time.

I will get a live version of the finished site online soon. Just need to sort out some copyright issues first,  i ‘borrowed’ the recipes from a popular cook book for the purposes of this project so will come up with some original ones for the public domain version of the site.

Bantr! – Coursework website

An update on my coursework website, i handed it in about a month ago, but ive been continuing work on it since as i felt there were still many improvements to be made.

Below are some screen shots of main pages of the site.

Homepage

User Profile Page

Private Message Sending Form

They are the three main pages, the others consist of some basic forms similar to the private message screen shot. As i have previously stated, this project was more focused on learning the back end side of things rather than aesthetic beauty. I’d like to sort out the typography, its far too inconsistent across the site and i just dont like the way it feels. The layout could be a bit tighter, perhaps too much un-used space on some pages. In general i am not happy with the overall outcome, there are many lessons to be learned from this and improvements must be made on my next project, it should have been a milestone for me but has instead turned out to be a rather significant disappointment, back to the drawing board i go…

Now the coursework is out of the way i can continue to use this as a nice practice tool, and i intend to chip away at it over the coming weeks slowly improving the visuals so that they come inline with my original vision.

CSS – from design to the finished article……

*Been going through some old drafts i had waiting to be finished, so thought i’d stick this up. It was a task set early last term, and since i quite like the design i shall convert it into a proper webpage soon using xhtml and css. Look for that post in the near future but for now, read on…..*

We’ve been learning about CSS lately as part of our coursework task of creating a social network website. One of the problems i’ve always had when starting projects like this in the past is always the design process and how you go from ‘flat’ designs to properly marked up web pages.

Well this is exactly the task we went through in our seminar. I messed about in photoshop for a bit and came up with this generic design for a blogging/journal type site.

We then went through it piece by piece and using xhtml and css transformed it into markup. The basic layout is there, but there are many embeliishments that i would like to add if it were to become a functioning web page.

This is the part where i show you an identical photo to the one above and tell you its the proper html version, err not exactly. I’m still working on nailing the techniques for layout using css, making slow progress and rest assured when i get there i’ll post the results here.

Bantr progress update…..

Well its been a week or so since i updated you with progress on my coursework so here goes. I have got the layout looking pretty much how i want it, still need to tweak things and add some little visual flourishes to give it that extra bit of web 2.0 sparkle, but its there in a basic form.

As for the php side of things, that has been very time consuming and difficult. Ive got several functions working on simple example pages but when i try to integrate them into my site that’s when problems arise.

Anyway, here are a few screenshots of how the site is looking at the moment, its starting to take shape but will look a whole lot better by the time deadline day rears its ugly head!

This is the main login page, its pretty much there but i think i shall make the ‘What is Bantr?’ information image a bit bigger so it fills the space better, need to play around with the columns in the css for that one. Also the footer is currently a bit bland and empty, needs a few more links and possibly a better background image.

This will eventually be a profile page, ive got the layout pretty much sussed, two columns with the left hand containing the main profile info and the right containing links to pictures and a facebook wall type of thing named the ‘Bantr! Box’. However whilst they are roughly in place they could be a lot tighter and i need to tweak the details so they sit better on the page. They just don’t look ‘right’ at the moment and that shall be remedied shortly, perhaps with use of some lovely shiny web 2.0 gradient fills for each section and some lovely rounded corners? Yes i think a rummage into the web 2.0 box of tricks is needed, cliche alert!!!!!

Right its back to work for me, got to get lots of php functionality done, sleep is for wimps!!!

Some more Web 2.0 inspired naffness….

Ive been coding php all day long and it has fried my brain so as night has fallen ive been playing around with more logo options.

For this particular idea ive taken one of the perhaps less obvious web 2.0 cliches, vector cartoon characters. There is a crop of sites appearing with vector characters giving a face to their site, such as the sites in the article from modernlifeisrubbish.co.uk below….

So ive taken ‘inspiration’ from the above sites and attempted to create my own vector character that could possibly be a mascot for Bantr!

As you can see my vector skills arent quite up as up to scratch as the above sites, but i’m working on it and learning some interesting techniques along the way. So below are my attempts thus far…….

Not too bad for a rough first attempt but will work on the shading to give the character more personality, a welcome break from code.

The site is starting to take shape now, so its back to the php and the css scripting for me, will post some screenshots up soon when things are at an acceptable level for public viewing…

Adios!

Bantr Logos – Web 2.0tastic!

After my research into web 2.0 visual trends/cliches i decided to try and knock out a few ideas for my site’s logo. I’ve gone with a green theme but this may change at a later stage once i get more into the design of the page layout and styles.

Anyway, here are said logo designs in all their tacky shiny shadowy reflectiony goodness….

…. and so the project rolls on, things are starting to gather pace now and i’ll be in touch soon with the next breakthrough. Cheerio!

Website Research – Visual Inspiration

Earlier this week i was starting to panic, time was running out, i didn’t have much of an idea what i wanted the site to look like and it was all getting a bit stressful. So i decided to slow down, stop trying to force things and do some good old research.

I created this mood board of sorts, its a mixture of all the current web 2.0 styles that i am intentionally going to mimic in this project. I think this emphasises my point that its all got a bit too much? and there’s plenty more where this came from!

I have a clearer idea of what i would like my site to look like and shall begin implementing that shortly, well after the php is done, and the XHTML is validated, and the logo is designed, and the ERD diagram is done and the…. ARRRGGHHHHHH!

The Big Idea – Bantr!

I thought it was time to set my stall out so to speak, let you know what my overall concept is for my coursework.

Facebook does everything you could ever want a social site to do and even if you don’t like it there are plenty of alternatives that provide pretty much the same thing but with a different name. No one needs a new social networking site so this coursework is not going to be a revolutionary attempt to gatecrash the market, it will be a vital exercise in learning the technologies used to develop and design modern day websites.

So I have decided to take a tongue in cheek approach to my site, to use liberal amounts of web 2.0 cliches/trends. There are a ridiculous amount of sites out there all trying to look like each other and jump on the bandwagon of the latest Internet boom and i shall illustrate this point by doing the same so you can expect to see plenty of gradients, reflections, high contrast colours, fake badges/stickers and cool snappy taglines, and of course it shall be a ‘Beta site’.

The name of my site will be called “Bantr!” After the popularity of Flickr it has become popular for start up sites to drop vowels from their name in an attempt to seem cool. So seeing as people are going to be having lots of fun witty conversation looking at each others photos and profiles on my site, i thought shortening Banter to Bantr! would be appropriate.

Right, time to get back to work, speak soon……

One step at a time…..

Progress with my coursework is being made slowly but surely, i have decided to get all my pages scripted using web standards before i start adding any visual elements. By having pages with clean mark up it gives me the best base to start adding css and will improve usability of my site.

With that in mind i have today produced my first page of XHTML 1.0 STRICT mark up, one small step for mankind one giant leap for me!

The exciting results of that code are below, time to roll my sleeves up and get dirty with some css….

Introducing Phidgets…….

This term as part of the interaction design element of my pathway we’ve been in introduced to something called ‘Phidgets’, they are a basically a system that allows you to connect computers to everyday objects and make user experiences a more physical activity. For example you can use them as games controllers instead of a mouse or keyboard, or you can use them to scan barcodes for identification purposes along with many other uses. The task we were set was to look at a few interactive based websites and take an element from those sites and think how we could use phidgets to improve or change the experience.

The website i looked at was www.comcastic.com, which is a site that contains various games designed to test your use of the mouse. Time challenges and click accuracy tests etc

The game i enjoyed the most was the endurance test, in which you had to move the mouse from left to right until the progress bar was full up, once the bar was full you clicked a button and ‘banked’ your points. When you do this 4 times the game is complete. My idea was to combine this with a running machine using phidget sensors, this would make the task of keeping fit more enjoyable and enhance the experience of the game, the faster you run the quicker the bar would fill up

Below i have composed a very basic mock up of what this may look like were it to become a reality.