3 Examples of Good Design

 Design, Webpage design  Comments Off
Oct 122011
 

Window in My Room

One of the best designs I have seen in quite a while, is the window in my room. Whenever I look outside, I most often find myself taking a bit of time to admire this “classic work of art.” This window looks alot like most other windows out there but scores very highly in functionality.

Window Handle

Window Handle with directions for use.

With a twist of the “magic” handle, this multifunctional masterpiece could either open up as a normal in-swinging window or a half-way hanging unit which allows for night ventillation especially during periods of warm temperatures.

In-swinging window

In-swinging window.

Window in Tilt/Night Ventillation Position

Tilt/Night Ventillation Position.

My single window unit seems like every other solidly built window, but turns up the style with a single twist of its handle!

Burton Over Head Cable Shawl

Burton Over Head Cable Shawl (Close up)

Burton Over Head Cable Shawl (Close up).

This beautiful high neck cardigan is both stylish and practical. Whether in the red, blue, or grey colors, it maintains an urban/modern look without the ubiquitos hood and still works perfectly well to keep you warm, especially during this cold autumn season.

Gets two thumbs up: one for style (aesthetics) and the other for functionality.

Audi TT

Audi TT

Audi TT the Aquiline!

Though much has been said about the engine performance and interior design of the TT, my intrigue is with the aquiline exterior. Whether true or not, the eagle head shape conjures up visions of powerful aerodynamics.

Though I’ve never driven a TT, I would consider getting one because of the image that has been lodged in my mind. And this says alot about the design!

 Posted by at 4:16 am  Tagged with: , ,

3 examples of good design (not websites)

 Coursework 1  Comments Off
Oct 012011
 


NotebookNotebook

This notebook is covered with oil cloth therefore is durable. It has thread bound pages, acid free paper, elastic closure, bookmark and inner pocket made from card.

 

 


Key

The key is a good design. It is made from metal so is durable. This key will only open the lock that it is designed to open. It has a hole in the top which has a coil for a key ring or for attaching it to something so it does not get lost.

 

 

PencilPencil

The pencil design is good because it uses a material that can be easily held and used for writing, the lines that it makes can be rubbed out easily using the rubber that is on the end of the pencil.

 

 Posted by at 2:47 pm  Tagged with: , ,

App production and web design

 Content Management, Coursework  Comments Off
May 032011
 

This is an expanded version of a presentation that I gave in class on the 23rd of March 2011. Original presentation (pdf).

How are apps produced and how could they work as an alternative or supporting publishing format for web content creators?

What is an App?

Strictly speaking ‘app’ is just an abbreviation of the word ‘application’ and so could be applied to any piece of software. However with the rise of the smartphone, and in particular the introduction of Apple’s App Store, it has acquired a more specific meaning: a software application which runs natively on the operating system of a smartphone or tablet computer. Although the word app was at one time closely associated with Apple’s iPhone, it has now assumed a more generic meaning. Continue reading »

 Posted by at 8:59 pm  Tagged with: , ,

The trick navigation of Mark Boulton

 code, Shoulders of giants  Comments Off
Apr 042011
 

I was reading an article on Mark Boulton’s website, the first time I’ve visited it since the redesign. The article, A Richer Canvas, was interesting but that’s not what this blog post is about.

The website is very minimal, with typography the focus. The navigation is in a sidebar on the right and just simple, grey text. Until you mouse over the sidebar. When you do, all the links turn from grey to green. It’s a really effective technique and quite eye-catching. It’s simple, but elegant, and not something I’ve seen before.

Now all I need to do is work out how he did it and then steal the idea.

*** Update ***

I gave it a go, and it’s very easy. Took me 15 minutes to find out how he did it and then code my own (very rough) example: Trick navigation example.

All you need to do is apply a hover pseudo-class to a div, and target each anchor within that div (see code in comment below). That way the anchor changes when you hover over the div, not the anchor. Use some CSS3 transitions to add a little easing and that’s it.

 Posted by at 1:05 pm  Tagged with: , , , ,

Old computers: site analysis and redesign

 Coursework  Comments Off
Dec 152010
 

For this project I decided to redesign www.oldcomputers.net. You can see the designs at:

www.webdesignstuff.co.uk/work/jt008/projects/old-computers/

www.webdesignstuff.co.uk/work/jt008/projects/old-computers/sub-page.php

Site analysis

This site does well in the search rankings. It’s the third result in Google when searching for ‘old computers’, and the first two are different pages on the same site – www.old-computers.com. I think this is respectable. www.old-computers.com is a much bigger site with a much wider remit. www.oldcomputers.net by contrast is a personal website, focused on a private collection. The Alexa site ranking of www.old-computers.com is 179,030 compared to 295,526 www.oldcomputers.net. Given this I think it would be difficult to overhaul www.oldcomputers.com without vastly expanding the scope of the website, which I don’t think is appropriate.

It also performs well searching for specific machines. It’s the second result (below Wikipedia) for Apple Newton and the third result for Altair 8800. It fares less well for some of the better known models – the Commodore 64 for example has many websites devoted to it – but it still gets a reasonable amount of traffic from them.

Continue reading »

 Posted by at 10:49 am  Tagged with: , , , ,

Hill Farm: A Visual History

 Coursework  Comments Off
Dec 062010
 

Grey boxes

Continue reading »

 Posted by at 9:27 pm  Tagged with: , , ,

Five things I learnt in week six

 Lists  Comments Off
Nov 102010
 

Five things I learnt in Week Six

  1. I’ve finally got the hang of semantic class names/IDs. Don’t use names which describe how an element is presented (.red, #nav-left). Instead use names which give the element meaning (.warning, #sub-nav).
  2. Always write a print style sheet. It shouldn’t take very long, and it adds an extra layer of functionality (and polish) to your website.
  3. Use uneven padding to to centre the separators when styling navigation. I’m not sure why this works, but it does.
  4. Don’t avoid selectors just because older browsers don’t understand them. Using an adjacent sibling selector is the best way to remove the border from the last item in a navigation list. All that will happen in older browsers is that the border won’t be removed and I can live with that.
  5. Always ask ‘What happens if..?’ The best way of making your designs bulletproof.
 Posted by at 8:47 am  Tagged with: , , ,

Pinning down the process

 Coursework  Comments Off
Nov 092010
 

Pinning down the Process

Rather than making a start on the specifics of the project this week, I decided to spend some time pinning down my own design and development process. Although this process reflects the way that I already work this is the first time I’ve taken the opportunity to really think about what I do, and why.

I am, fundamentally, a scatterbrain. If I want to be organised and methodical I really have to work at it. In my previous life as an English student I tended to be all over the place. My essays would be a series of unconnected paragraphs, notes, quotations and references which would miraculously come together ten minutes before they were due in. This worked fine for me at the time but it’s not an approach that would work in any other situation and certainly not in web design. I can only imagine the look on the face of a client if, the day before their website launched, I presented them with a seemingly unrelated collection of sketches, paperwork and broken code and a promise that ‘it will all come together in the end.’ Continue reading »

 Posted by at 5:17 pm  Tagged with: , , , , ,

Three examples of good colour schemes

 Coursework  Comments Off
Oct 242010
 

Note: All three websites have been tested using the Colorblind Web Page Filter and all performed well.

SilverbackVisit the Silverback website

‘Guerrilla usability testing software for designers and developers’

www.silverbackapp.com

The Silverback website uses what I think is an analogic colour scheme. Green is the primary colour, with blue used sparingly to highlight important areas of the screeen (‘download’ and ‘new features’). A dark grey is used in the footer to differentiate information about the application from information about the developers, and the same colour is used for the site heading. The website’s gorilla logo uses similar shades of blue and grey to provide a contrast with the background and draw attention to the website’s strong branding. Continue reading »

 Posted by at 12:13 pm  Tagged with: , ,

The top five things I learnt at university this week

 Lists  Comments Off
Oct 072010
 

My colleagues are interested in what I’m learning so I thought using my blog was a good way of keeping my thoughts organised. I definitely learnt more than five things yesterday, but these are the ones that really stuck…

  1. Specifying image sizes tells the browser how big the image is going to be and asks it to display the page accordingly. I did know this once but I haven’t been doing it recently. Time to start!
  2. Using  “/” in relative links tells the browser to go to the root to look for the document and using “../” tells the browser to go up one level and look for the document. I never fully understood the distinction before. Continue reading »
 Posted by at 12:40 pm  Tagged with: , , , , , ,
 Older Entries
© 2012 MA Web Design & Content Planning Suffusion theme by Sayontan Sinha