Module 9 – Design, Wireframes, Story Boards

Design

There's a lot of talk in this about having everything 'above the fold' – interestingly today on the radio say that on the web there is no fold – different people have different browsers, screen resolutions etc so you can never really know where the cutoff line is – and further, people are much more accustomed to scrolling now than they were just a few years ago. That being said, I tried to keep Trip Takers generally within the space that the majority of users would see without scrolling. Certainly the map and main navigation items will be.

I thought it was interesting that they mentioned the 'What If' in relation to travel planning. The functionality to change search options is one of the reasons I use Kayak and will implement it on Trip Takers.

I'm not so worried about restricting data input as the site is specifically geared towards the US.

Well – I guess I'm going to break the pages that link to themselves rule – I want the navigation to be clear and consistent so pretty much all the pages will have a link to themselves. C'est la vie.

 

Wireframes

I'm usually rather anti-wireframe as it seems like an uncessary step – but I found it interesting that the notes said that 'much time and money can be saved in developing a Web site if you can get your client to understand and appreciate the usability of the proposed elements on your site before becoming emotionally involved in the visual style'. I've been developing in a vacume here quite a lot but I can see how this would be useful with clients. I could have used this way back when as I was designing access database programs and clients always got stuck on what color something was going to be and then when it was all put together change their minds. What's that saying – 'Form before Function'.

 

I ended up dividing my navigation into three sections, as suggested. What was interesting was people still wanted there to be some sort of other defining feature. I used different colors.

 

• Use a Hierarchical Structure – Place items of higher importance at the top of the page in easy to find places. Well – I did put the login and start here what would be near the middle of most screens – and the Logo and map at the top. I think this is the best weighting for the site
  
• Text Links in Lists vs in Paragraphs – Better to keep links separate from textual content.
  
  • I have a few links in paragraphs – but they are also navigational links. Better than just telling something like 'we have these great video tutorials' without the link there.
    
• The Home Page Is the Doorway to Your Site – As with feng shui, the entry of your site has the power to make people feel welcome or scare them away. You home page design is very important. Be sure it clearly identifies your site.
  
  • I think the logo/map/navigation clearly does this
    
• Keep Pages Short and Concise – Long scrolling pages are difficult to read online.
  
• Provide a Link to a Site Map on Each Page – This would normally be part of your administrative or utility set of links.
  
  • I don't plan on doing this – with the same navigation on every page it's virtually the same thing
    
• Use Consistent Navigation Cues – Keep your link sets in their same locations on each page. Think about conventions you see in the outside world and how they're consistent followed: road signs, street addresses, page numbers, book indexes, etc..
  
• Use Links Thoughtfully – Label your links using clear and obvious terminology. Bury your external links deep in the site to force visitors to use your site before they leave it. Sending external links to new browser windows allows your visitors to easily pick up where they left off on your site. – I don't know what this means
  
• Test As You Go Along – Even at the wireframe stage, you should be getting feedback from others. Show them your pages and see if they can understand how you use your site.
  

 

 

Story Boards

I do all of my story boards in Power Point and find it's the easiest way to arrange/rearrange things. I might at times be guilty of making them more attractive than the final site will be though.

Module 8 – Search, Logo Design & Flowcharting

I'm a little perplexed as to why these things were lumped together but there you have it.

I've specifically decided not to have a general search function on the site. Users will be able to search for hotels, things to do, directions etc. but these will all be specific tasks in specific locations. I thought that it would probably be confusing to users. Also, none of the other sites which I reviewed had a general search function (except Google – but they're, well – Google). The searches on Trip Takers will return just what the user asked for and be filtered in a certain location.

Logo Design

Ok – so I'm the first to admit that design is not my strong point. Here are the items from the tutorial about logo design, and how I tried to incorporate them into my design.

• A logo must be easily recognizable; it has to be simple and memorable.
  
  • The one negative comment I received about the logo was that the pictures were memorable, but not the name. I enlarged the name a bit – but I think it needs a bit more tweaking to make the name stand out.
    
• The purpose of the logo should influence its form.
  
  • I wanted to convey that it's fun, you'll see beautiful things, and there will be memories. I also wanted it to seem a bit like a scrapbook. By using the pictures in the tilted manner with the frames I hope I conveyed that
    
• There must be contrast and tension.
  
  • The colors and offsetting of the images creates tension and contrast
    
• Interior space and spaces between shapes carry as much weight as the shapes themselves, and all the graphic elements have to form a unit.
  
  • I hope I achieved this.
    
• A logo should be more than a conglomeration of unrelated elements that are held together by a border.
  
  • I didn't want to use a traditional 'border' as it's been done and done again. I like that there is movement from left to right, up and down which corresponds somewhat to the road movement in the right hand picture
    
• Most graphic forms of advertisement are based on or include the logo of the subject
  
• The logo usually appears on letterheads, brochures, labels, packaging, and delivery vans. It may be necessary to render it in varied materials, such as cardboard, plaster, glass, metal, fabric, or even neon.
  

Logo Design Objectives...

• Design Clear & Legible Type
  
  • I believe the text is legible, but maybe not memorable
    
• Create a Distinctive Look
  
  • I think this is distinctive – it's different from any of the other sites – but somehow has that road trip feel to it
    
• Differentiate from Competition
  
• Appropriate for the Business
  
  • It's a fun site, about planning a road trip so I wanted the logo to reflect that
    
• Express Client's Personality
  
  • I'm the client – so that was easy
    
• Aesthetic & Graphic Impact
  
  • Graphically it works very well – I've had lots of compliments on it – people find it striking and engaging
    
• Balance & Unity
  
  • By using three images with the two outer ones being similar in visual weight I believe I've achieved this
    
• Use Positive / Negative Space
  
• Make it Memorable
  
  • The images are memorable – might need to work on the text
    
• Suitable for Color Reproduction
  as well as Black & White
  
  • Well – this just isn't the case with this logo. I would probably do some interpretation of the Trip Takers text for print
    
• Suitable for Small & Large Reproduction
  
• Logos are Subject to Fashion
  

Flowcharting

The flow chart for Trip Takers is actually quite simple. Because the navigation remains the same, and there are a finite number of tasks that can be undertaken there isn't much in the way of involved navigation.