Keppel’s Handy List for web design – after Hill Farm B&B

 Design  Comments Off on Keppel’s Handy List for web design – after Hill Farm B&B
Nov 302010
 

I have really enjoyed reading others experiences of the design process and what a great journey working through to a kinda completed phase.

My first draft of the B&B makeover was the best learning but despite starting again from scratch I learned a lot about illustrator and white space .

 In my designs at this point in our course I always try and do things I have never attempted before and hence why I landed a big slideshow in on the home page. But in the end I realised that moving images of any sort was not the look I thought was right for my target audience – in my view that was the 40+ year old couple that have some spare pennies like waking in comfort but don’t want to do a totally typically ltitle trolley of tea and old biscuits and old kettle type of b&b. So Mr & Mrs More Luxurious wanted style and cool things to do whilst enjoying the lovely stylish rooms !!!

My first draft

So the end product I feel hit the spot more and all those lovely spirals in my draft design’s background that weren’t visible on a small screen were shelved – I will use in a design again thou.

Final Rework of Hill Farm

Final attempt – more stylish cool and luxurious

So my quick checklist before I start another project:

  1. Really spend time on the profile the audience and name them – so you design knowing who you are appealing to
  2. Layout on paper and grids – consider white space and style of navigation based on how your users will use
  3. Go and look at other webs in same genre – make sure your design stands out – nothing worse than vanilla
  4. Check early with someone in target audience on initial priorities on the must haves of the site e.g. price, easy contact details
  5. Consider use of php includes early to save developement time reworking navigation, titles, footers etc
  6. Colours – contrast of text on colour – go cautious if not sure and style colours from the emotions you want to portray
  7. Images – must be good quality and suitable but consider these later in the process or you get distracted
  8. Test in IE lower versions fairly early on so you can adjust padding and layout for IE 6 etc – saves time
  9. Fonts – get busy early deciding what you are going to use and stick with it – check doesn’t break from IE to firefox – lots do and wreck your spacing/layout
  10. Don’t forget to step back and review -and re-size the screen to review ahhaha

That’s it — hope you find of interest

 Posted by at 9:41 am

Writing a design brief

 Thesis Project  Comments Off on Writing a design brief
Nov 282010
 

Yesterday I was browsing the web looking for some tips how to write a design brief.

Most of the guidelines refer to situations when a designer works directly with a client (some of us will have to deal with this…).
Freelance Switch highlighted some good points like thinking about the main message and looking for inspirations.
Also in Suspire Blog you can find a list of key points that you should think about before designing, i.e.: objectives of your website, branding, accessibility and timetable (!!).

More information can be found in Clear Design, Nlinghn Media, Harmony, Method and Class.

I also found a nice PDF document, a Design Depot Newsletter from September which point out where to start…

 Posted by at 5:02 pm

How did it go – a small design process of a small business website

 Projects  Comments Off on How did it go – a small design process of a small business website
Nov 282010
 

First of all I’d like to say I was impressed how everyone put themselves in designing a website for Hill Farm. Each site was different and at the same time each one was really good!

Thank you all for feedback and comments. I will take everything into consideration and make a few changes in a couple of weeks – for now I need a break 🙂

Here is how my design process went…

INSPIRATIONS

Before I start designing anything, I usually browse websites related to a particular topic.

I found a few articles linking to beautifully designed hotel websites: in Vandelay Design Blog, Webdesigndev Journal and Creative Fan. Obviously some examples repeat in each of them but it’s always useful to look at various galleries.

My favourite hotel websites are: Accommodation Manjimup (clear layout, design associated with villages, nice big images, eye-catching navigation), Trapp Family Lodge (large images, not too much text, everything created on a paper-like background), Jackson Hole Dude Ranch (details related to nature, large and clear top navigation), Visit Snowy Mountains (vivid boxes colours, large buttons).

I also found two websites advertising farms in Cornwall: Hilton Farm Cottages and Bocaddon Holiday Cottages. Both use green colour, horizontal primary navigation and large images.

And when I get stuck having too much information or no ideas in my head, I go for a walk or do something completely different 🙂 Nature and contemporary art help!

LOGO

Creating a logo was a big challenge for me…

The first floral ones didn’t go well with the green background and large main image below. So I decided to use a solid colour instead, still using the same Just Old Fashioned font. Still the effect wasn’t as good as I expected (thanks David for suggesting I should spend more time on my logo).
Finally I realised using too many fonts doesn’t mean the website looks better. That’s why I decided to stick to Verdana as my main font, use Delicious Heavy for the logo and Delicious Italic for the strap line.

Links to nice free fonts available in Smashing Magazine article.

BACKGROUND COLOUR

My background colour is quite vivid. I must say I love playing with colours. That’s why I couldn’t resist styling fonts and background. I do agree the body text is not readable enough, both because of not enough font contrast, and too small line height.
I will look into it in a couple of weeks. Let’s see what can be done to improve readability.

USER FEEDBACK

I’m experiencing some problems with hovered links because not all the styles I applied seem to work… (it also depends on the browser apparently).
Anyway, this is another issue that needs improving.

 Posted by at 4:43 pm

Comments spams

 Other  Comments Off on Comments spams
Nov 282010
 

I was wondering if the rest of you guys is also receiving comments that are spams?
I immediately delete each (in fact most of them)…
Are you having the same issue?

 Posted by at 1:30 pm

The perils of the design process

 General, Webpage design  Comments Off on The perils of the design process
Nov 252010
 

Now that we have submitted our Hill Farm websites, I thought I would share with you the design process that I have been through over the past couple of weeks.

Last week, I mocked up a potential design for the first crit (see previous blog post). I wasn’t particularly happy with what I had created, but I was interested to see what feedback it would receive. Seemingly, the design wasn’t offensively bad, but nor was it particularly good. One of the more positive comments though, was that the typography was very appropriate for the look and feel of the B&B.

During the crit I was inspired by Tom’s idea of stripping back the website to its bare bones; removing all colour in order to critically consider the layout, typography and content. I find that I am often excited (or blinded?) by colour – rushing in with the idea of a potential colour scheme before considering the more important elements of the design. So this time, I took the time to think about the target user for the website, the layout, and the visual hierarchy. I kept my original typography (using Georgia for headings and Arial for body copy) and decided to build the layout using a three column grid.

When I was happy with the basic design, I began to experiment with colour. I wanted to market Hill Farm as a romantic getaway, and as such the target market would be couples (perhaps in their 30’s or 40’s). I decided that the B&B should have a typical country feel, but with stylish country décor and I wanted the colour scheme to reflect this. I went with a soft pink and beige theme, thinking that this would be representative of the business and be appealing to the target market.

After spending a good 10 or so hours working on this idea I decided to take a break and go to Tesco. Upon my return, I excitedly opened the lap-top to marvel at my design, and the only thing I could think of was “grannies!”. I just didn’t know where I had gone wrong. I showed the design to my boyfriend and my friend Lucy, a graphic designer, and they both agreed that it looked too old-fashioned, or perhaps like the site should have been selling wallpaper. I thought about what David mentioned in class, that if you squint your eyes or remove the text, you should still be able to work out what the website is for. Even though I kind of liked it, this design definitely didn’t say “B&B”.

Back to the drawing board. I stripped the design back to black and white once again and seriously considered how I wanted it to look. I thought to myself, just keep it simple. I wanted to convey a chic, country feel that would both represent Hill Farm appropriately and be appealing to the target user. I thought of country kitsch and polka dot tablecloths, so I decided to incorporate a green polka dot background, and echoed the green as an accent colour within the mainly monochrome design.

To be fair, I am still not 100% happy with the design, but I am happier, and I figure that will have to be good enough for now. I have learnt an awful lot from this project and I am looking forward to developing my skills further with the next one. 🙂

/* — On a side note, I would just like to say how impressed I was with everyone’s designs! It is fascinating to see how many interesting and creative ideas can be formed from a single brief. — */

 Posted by at 8:23 pm

Server Side Includes (SSI) with the .htaccess file

 Resources  Comments Off on Server Side Includes (SSI) with the .htaccess file
Nov 252010
 

Hi all,

We didn’t have time yesterday for me to explain my findings on Server Side Includes with regards to the .htaccess file. So I’ll give a quick summary of my findings here. Plus, it’s a useful transition and comparison between includes in .htaccess and the PHP that we learnt yesterday.

So similarly to PHP, where you have common elements in your HTML code (i.e. navigation, footer, header) you can place these codes in a separate SSI file and link to that file in your HTML code. In that SSI file it would just be HTML coding which you want inserting. This would be instead of amending every single HTML page if you were to change your header, navigation or footer etc.

You can instead, amend your SSI file and it will affect every page that you have linked to.

The benefits of this is that you re able to maintain your code a lot better and it shortens your HTML pages.

Common examples of it in use (other than for structural elements) is for adverts on every page of your website or daily quotes etc.

To enable SSI you need to insert some lines into your .htaccess file placed in the root directory which will enable SSI throughout your site.

AddType text/html .shtml
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

However I believe that some hosts do not support SSI…so you have to be careful in that regard.

Conclusion

My main thought is that after hearing about PHP yesterday, that PHP is lot more powerful than SSI in .htaccess. However I think this is useful to be aware of at least and does not require you to know PHP coding.

 Posted by at 12:02 pm

Reflections – Aftermath of Hill Farm :)

 Designs  Comments Off on Reflections – Aftermath of Hill Farm :)
Nov 252010
 

Yesterday was a really insightful day and I enjoyed looking at everyone’s work and personal take on this Hill Farm project. I found it quite refreshing looking at other angles of design for the same site. I was genuinely impressed with everyone’s work, so well done all!

I’ve taken on board comments to my site and I thought I’d run through each comment and go through my thought processes for each. I have made small amends to my site, which mainly involve moving my elements slightly so that they line up, but that is all.

Gridding

After all my gridding in my design for my home page, I lost sight of it in my other pages, such as Prices and Location where elements didn’t quite line up.

What I’ve learnt from this is that although I gridded out my home page quite happily, I needed to have done it again for my other pages as elements had been taken out (i.e. Javascript gallery on home page) and so the look and feel would have been quite different.

Javascript

I think I got a tiny bit carried away with my Javascript. I like it on the home page and the rooms gallery page as I think they are appropriate.

For my home page, I thought even though someone may not notice that the entire image could slide, it would be a bonus for those that did notice it. I especially wanted it as a button, as I prefer the user having control of movement on a page rather than moving it for them.

With regards to my rooms gallery page, I thought it was appropriate as a user could view the rooms without the page refreshing and causing a blink. They could just compare and contrast each view quite quickly and without any distractions. This is contrasted with my individual rooms pages where I have used a sprite gallery instead, where the page will refresh when clicked. I thought this may cause confusion but I’ve tried to create a hierarchy with the javascript on the Rooms page as opposed to the sprite gallery on the Individual Rooms page.

However where I could have probably done without Javascript is for my guestbook. I had considered taking it out before submission and just have each guest’s image and review going down the page like in my other pages. However what I wanted for this page was a guestbook feel, as if, the user was turning the pages.

My entire thought process for use of Javascript was user interaction. I, personally, get a kick out of being able to control a site and its information. But i’ve tried to balance it so that even though you may not want to click and slide the guestbook page or the home slider at least you’ve still seen part of the design/information. Plus, the elements for these Javascript were not the most important that a visitor to a bed and breakfast must see the entirety of, so I thought it would be alright.

Navigation

There was comments about confusion of my navigation bar at the top and the side. So I thought i’d clarify my thought processes on this.

The reason why I added a navigation in the header was because on my home page that is the only navigation that is above the fold due to my large image slider. I didn’t think it caused too much confusion on my other pages where the sub-navigation was bumped up so it was near the header.

The reason I didn’t think it caused confusion was because the user would first see “Home, Book Online, Contact”, which I think are important and should be “stickied” at the top, so that after users have seen the whole site, than at least it’s somewhere easy to locate.

Their eyes would then travel down to “Rooms, Prices, Location, Guestbook” etc and thus the exploration of the site can begin with the primary navigation always being at the top. Plus, I did create user feedback in terms of, if they were on the “Book Online” page it would be highlighted in the header nav, sub-nav as well as the footer-nav. So my thoughts at the time was that it would be clear where you were and what options were available to you.

That was my thought process at the time, however I do agree that I can make my navigation clearer even more so.

I haven’t amended my navigation as it would involve the entire site being re-uploaded so I have left it as it is but have definitely taken it on board for future projects.

Conclusion

I’m sure many of you would feel the same with their own sites and it has been said, but I’m not entirely happy with my site. It has been a great learning curve though and I think is an invaluable experience in our journeys to becoming web designers.

One final note is that I would prefer not to hear the words “bed and breakfast” coupled with “Hill Farm” for just a little while if that’s okay… ><

😛

Thanks for reading!

 Posted by at 10:59 am

CSS – styling the non- home page

 CSS, Design  Comments Off on CSS – styling the non- home page
Nov 212010
 

Well I after a rocky start I have actually sorted one issue I had. When you need quite differing pages for your web compared to your glorious index.html then create your new secondary html pages and link to secondary.css . This leaves you free free from any restarints of your home page template – I did use the index.html to give me bare bones structure and then adjusted from there. My fitst attempts for some reason didnt seem to work but I can conclude this is easy.

Interesting observation I will make — for future projects I think I will give more thought to index.html and any secondary page requirements – with a bit more consideration I may have escaped with only one css stylesheet – I am sure this is the lesson I have learnt here.

 Posted by at 4:40 pm

Coding Process – Hill Farm B & B (21st Nov 2010)

 Designs  Comments Off on Coding Process – Hill Farm B & B (21st Nov 2010)
Nov 212010
 

Hey everyone,

As I spoke about my design process last week, I’d thought I’d have a go at talking about my coding process.

As you may or may not know, I’m quite new to coding (i.e. I’ve only begun coding since the MA began), so I had a little difficulty getting my head around conventions and standards in terms of coding both in HTML and CSS. However, because of this project, certain things have started to click and come together in a really good way, so I thought i’d share with you all.

HTML conventions

In HTML, i’ve only just started to understand more so about hierarchy. I knew the basic hierarchy already but I didn’t really get it fully until we learnt about the DOM in Javascript. Because of this new understanding, I now can indent my HTML elements much more succinctly, to the point where it looks quite pretty! (I’m such a visual person…).

As well as looking pretty and neat, my HTML is a lot more organised and I can see clearly the main elements and the elements which are nested within them (and elements nested within them and so on).

CSS conventions

In terms of CSS (and HTML), this week has really struck home about the importance of being semantically correct right from when you start coding, not trying to tidy it and become correct afterwards.

I started coding willy-nilly into CSS and HTML. I suppose my thinking was, that I could amend and make it semantically correct after. My CSS had no structure (well it did, but not one that worked) and my class and ID names were all over the place.

If I wanted to find all the styles that affected a particular element it would be a nightmore to do so. After a while, if I wanted to change something as tiny as padding, say, and something broke I would have no clue as to where or what or why…The reason for this was because of my disorganised structure of my coding and I was kicking myself (hard) for starting off wrong.

So, I ended up just stopping coding completely and spent a full day just organising what I had already done. Of course, if I had just did it correctly from the start, it would have saved me the time. However I would then not have learnt this lesson…

By organising my CSS and amending my own mistakes and seeing and feeling the effects of this, it taught me more about being semantically correct, than I could have learnt from just reading a book. So it pays to make mistakes I suppose! And it pays to try things out practically, rather than just theorising.

After organisation, everything was much easier to then move forward and begin coding again. I could see where everything was and most importantly, I knew which bits of code affected each individual element and so it was easier to fix something that broke. Although I have to say, after my organisation, breaks happened less frequently. Woo! 🙂

Conclusion

I’m pleased with the progress I’m making with my coding, and things are starting to become more instinctive now. I never thought I would get this far and actually, have quite enjoyed the whole process of this Hill Farm project.

Thanks for reading! 😀

 Posted by at 3:12 pm

Back again!

 Other  Comments Off on Back again!
Nov 202010
 

My blog is working again 🙂
Thanks David!

 Posted by at 2:31 pm