Group presentation

blue nun presentation

The Mobile Internet And The Smartphone

The mobile internet is essentially the internet but when accessed from a mobile device like a smartphone. The development of smartphone technology has happened so fast and is still improving today. It is the huge demand and popularity of smartphones and other mobile devices that has encouraged the innovation and evolution of mobile web technology. Experts have said that mobile devices will soon surpass computers as the most popular way for people to access the internet which is something i also believe, i mean why bother worry about getting home to check your bank or order a new shirt when you can do it by simply taking your phone out of your pocket?  The history of the mobile web can be traced back to over ten years ago, but development has exploded in recent years.

Smartphone

The introduction of the smartphone stamped the beginning in a important shift it web development and mobile device technology. Smartphones essentially used a number of devices into the single product. It served as a mobile cellular telephone and a personal digital assistant. Today it is also used as an mp3 player, web browser, navigation system and a number of other things. And although smartphones have had the challenge of smaller screen sizes and slower download speeds, now have evolved into real computing machines capable of performing up to the standards of some computers.

Above is the IBM Simon and todays iphone 4

Advertisement

How Design Has Changed

Although the history of the web is short there is so much that has changed. The way the web has improved since the first website was built is enormous. The website has helped people all over the world with the internet creating thousands of jobs that were not there and accessible before such as; SEO marketing, online telemarketing, freelance writing, blogging and of course, in web design.

http://www.infinity-plus.co.uk/screenshot-of-microsoft-coms-first-web-page/

Above is a early Microsoft website which with compared to today’s designs and styles you can really notice the difference and i am sure the involvement of CSS has had a big impact on the way the designs began to change.

http://news.cnet.com/8301-10805_3-20028852-75.html

Above is a more updated homepage from Microsoft and you can really see how web design has really progressed in recent decades with homepages using flash and animation to enhance there websites. And with it still progressing today i can only imagine the things that will be possible within web design in the coming years.

My Design Logo

Specialist Topic – Typography And Typography For The Web

Above are  anatomy of letters to further explain each part of letters that are not explained below.

Typography is a key aspect of design as it can either make a design or ruin one.  It is an art in which language can be made visible by using various techniques and medias. Type can be arranged using different methods such as; point size, leading, kerning and tracking. Kerning is the spacing between each individual letter for example, if i had my letters apart from each other like this.. ‘r  y  a  n’  i would have a high setting on my kerning whereas if the letters were close to one an other than you would have a low kerning setting. Leading refers to the distance between the baselines of succesive lines of type. The term ‘leading’ came about in the days of type hand-setting, where strips of lead were inserted into forms i order to increase the vertical distance between lines of type. Typography is used in professions such as; typographers, graphic designers, art directors pretty much anyone who arranges type for a product. There are two different typefaces known as a serif and a sans serif which are both used to convey different messages as well as suiting certain designs. Serif  fonts as you can see have ‘serifs’ and the end of the strokes whereas sans serifs do no have these. Certain fonts are used for certain types of design for example the font Helvetica  is used widely in information design unlike fonts like  Times new roman which is used in articles such as the times newspaper.

Typography within web.

Typography is an important part of design. Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that it is a crucial part of a web design. Although the internet and the way we looks at the internet has and is changing rapidly the use of typography is still as important as it was in the beginning. Handling type for print has many differences to handling type for the web as there are things you need to consider such as; contrast, colour, readability, and size.

Colours on a monitor screen are created by light therefore it becomes more important to think about contrast as it is straining to look at and read text with poor contrast. white background and black text is the easiest to read because it provides the most contrast due to the colour difference. Colour theory and colour choice play an important role in web typography.With regards to serif and sans serif fonts sans serif fonts have been proven to be more easy to read with online body copy as the serifs on the typeface makes it more difficult to follow. Although sans serif fonts can work when you increase the point size and use more leading as doing this makes it easier for the viewer to read.  This is another example and reason why choosing you type is vital in order to create an effective piece of design with even the smallest of detail leading to a failed piece of design. Choosing a poor font can ruin a beautiful layout and structure to a website. In addition to this serifs work good for headlines as they give a special accent to the headline and they are easier to read when used within a small amount of text. Choosing the correct point size for the type is also important as having type to large can overpower the design that is why when designing you don’t necessarily need to choose a certain font but just one that works well within the design.

Here is a screenshot of the University of Worcester homepage with the headings and subheadings using serif fonts (headlines in small amounts of text) and the sans serif being used for body copy. http://www.worcester.ac.uk/

Web safe fonts

These fonts make up a group of a select few fonts that are available on most computers.

Choosing from the web safe fonts on the list below will ensure better control over what your text looks like on all browsers and operating systems. Here are the most popular and safe fonts to use:

• Arial (Mac OS equivalent is Helvetica)
• Times New Roman (Mac OS equivalent is Times)
• Verdana
• Georgia
• Courier

Other popular fonts:

• Impact
• Lucida Console (Mac OS equivalent is Monaco)
• Lucida Sans (Mac OS equivalent is Lucida Grande)
• Palatino
• Tahoma (Mac OS equivalent is Geneva)
• Comic Sans
• Trebuchet MS

When using any of these fonts it would be a safe idea to have a option to fall back on in your CSS just in case the font doesnt work.

What not to do.

Selecting fonts that are too much alike is not a good decision to make, and should be avoided by closely looking at the style of fonts and the design of the site to choose something that is appropriate. Most serif headings pair well with sans serif fonts for body text. Pairing two sans serif fonts is a bit trickier but is certainly a viable option. Maybe if you were to use two sans serif fonts you could use a bolder font for heading and a lighter font for the body text to show the seperation.

While researching this topic i learnt a lot about how important choice, colour and layout of text is and how not getting your typography right can lead to a piece of design that simply doesnt work. I hope this blog has helped you consider your options when designing type layout for the web!

http://www.1stwebdesigner.com/inspiration/typography-inspiration/ – Here is a link to gain inspiration into good typography within web design, it shows 40 different types of good typography on a range of different designs.

http://www.google.co.uk/imgres?q=anatomy+of+type&um=1&hl=en&sa=N&noj=1&tbm=isch&tbnid=4AnEyNIbDHf7rM:&imgrefurl=http://www.planetoftunes.com/dtp/typography.htm&docid=1Sp1wJNLX_BtUM&imgurl=http://www.planetoftunes.com/dtp/dtp_media/fonts_typography/anatomy.gif&w=644&h=428&ei=267BTrCqIMqYhQeM-bmkBA&zoom=1&biw=1440&bih=670 – Letter anatomy image

Designing For Usability

Keyboards, cutlery, door handles and websites all need to be useable as without being useable these objects would not become popular. Usability is about the ease of use of human made objects. This is a key factor to remember when designing your website or the viewers will to lose interest and leave the site. The website needs to be functional and efficient in order for the viewer to access what the want quickly and without having to think about what they are doing.  Self-evidence is also a key aspect of designing your website for example make the viewer aware if there is a button by doing something as simple as putting it in a box, again you dont want the viewer to have to think about simple moves such as clicking a button when on your site.

Above is the google homepage which is a great example of having a useable web design. The layout is simple with just the search bar and title in the middle of the page and although the other options are in the top left corner you still know they are buttons as when you scroll over them they change colour. This whole website is a great example of knowing what your on without having to read about what you’re looking at. The design is that effective i feel you could take the google logo away and viewers would still look at it as a search engine.

Forrester Research 1998

“Websites that are hard to use frustrate customers, forfeit revenue and erode brands.”

http://www.lukew.com/about/index.asp, forrester research, 1998

Luke W

Luke Wroblewski (luke w) is a internationally known digital product leader.  He was a co-founder of bagcheck which was taken on by twitter after only 9 months of it being public. Bagcheck was a idea for people to just simply upload things they use and discuss why they like them with others whilst also being able to talk to others about what is in their bag. Before all of this Luke was a entrepreneur in residence at benchmark capital and chief design architect and yahoo! inc. Luke is also a popular author with two web design books already written. Luke W is a very creative individual who has achieved a lot already in his career and will continue to produce infinitive ideas for the future. Follow his ideas at;  http://www.lukew.com/

A Few Explanations

URL – URL stands for uniform resource locator and every website has one. It is the global address of documents and other resources on the web.

DNS – This stands for domain name server. Domain name server is technology for controlling the names of web sites and other internet domains. The technology in a DNS allows you to type into your web browser for example; ‘endclothing.com’ and your computer will automatically find the address on the internet.

HTML – HTML is the language for describing the structure of web pages. Below is a simple anatomy of html.

<DOCTYPEHTML>

<html>

<head>

<title> untitled document </title>

You must always close the tags always for this coding to work properly.

<body>

CONTENT

</body>

(I have changed the colour of the dash to blue to show where it needs to go in order finish the body content)

 

Fireworks – Wireframing procesess