Week 9: Minimalism/Flat Design

In this weeks blog we look on the topic of Flat Design

What is Flat Design?

Flat User Interface Design is a minimalist UI Design Genre, or design language, currently used in various graphical user interfaces such as Web sites or Web applications.

What is  its purpose?

Flat design refers to a style of interface design which removes any stylistic choices that give the illusion of three-dimensions such as drop shadows, gradients, or textures and is focused on a minimalist use of simple elements, typography and flat colors. Designers may prefer flat design because it allows interface designs to be more streamlined and efficient. It is easier to quickly convey information while still looking visually appealing and approachable.Additionally, it makes it easier to design an interface that is responsive to changes in browser size across different devices. With minimal design elements, websites are able to load faster and resize easily, and still look sharp on high-definition screens. As a design approach, it is often contrasted to skeuomorphism  and rich design.

Need assistance in making a Flat Design for your Website watch the video below

How and when should I use flat design?

Like most new trends you are probably asking why you should use flat design when it comes 

to your design projects  especially when more decorative, 3D elements have taken such a dominant role within technology.Well when you think of it like that, why wouldn’t you want to take a step in a different direction? Flat design is a refreshing direction for the design community whether you are for the trend or against it.

As you have probably noticed more and more designers are embracing the trend and implementing it in their personal portfolios, design agency websites, mobile navigation menus and in so many other areas to mostly positive reception.Flat design does have its problems and detractors. If all interface elements are truly flat, how do we identify what parts are interactive and what is decoration? Buttons and panels can look the same.

This by no means should be a deterrent  you can design around these potential limitations. The great thing about using flat elements is that it tends to give your final look a clean and minimalistic feel. Flat design look is also so simple that you are often able to combine various trends without your design appearing cluttered. It also generally cuts down on development time and makes for more readable, navigable content. The overall user experience is heightened with not only the ability to read the content but to also easily navigate from page to page and from content to content. So, now that you understand flat design, lets run through two short tutorials to get you creating your own flat elements.

An example of how a flat design layout looks

For a better view on how flat designs look click here 

Week 8: Typography

Typography

In this weeks blog I will be discussing the topic typography.
Typography is the art and technique of arranging type to make written language most appealing to learning and recognition. The arrangement of type involves selecting typefaces, point size, line length, line-spacing, letter-spacing, and adjusting the space within letters pairs.
Text is meant to be read. If it feels difficult to read, people won’t want to read it. One factor that affects readability, and a great place to start, is choosing a legible font.
When we read, we don’t see individual letters; we see (and read) the shapes of the words. These shapes are created primarily by two elements: the strokes of the letters and the spaces in and around the letters. If we lose either of these elements, legibility is compromised.
Did you ever try to read a poor photocopy of a photocopy of a photocopy? Experience tells you that type becomes harder to read with each generation of copying. Why does this happen? Sometimes, multiple-generation photocopies make the text lighter. Thinner strokes start to disappear, leaving only parts of letters and compromising the word shapes. At other times, multiple-generation photocopies make the strokes in the text thicker. The spaces in and around the letters start to disappear. Either way, when strokes or spaces get lost, the legibility of the font changes, and reading becomes more difficult.

Web typographers need to pay particular attention to the strokes and spaces in a font because of screen resolution. Thin strokes and small spaces in letter forms can start to disappear, and as in the photocopy example, the text gets harder to read.

For More Info Click Here

Week 7: Audio and Video

Audio and Video

In the final class until presentations we discussed the audio and video tags in HTML.
When it comes on to audio HTML5 provides a quick and easy way to add audio files to a website by way of the<audio> element. Unlike the <img> element, though, the <audio> element requires both opening and closing tags.

Audio

The HTML <audio> element is used to embed sound content in documents. It may contain several audio sources, represented using the src attribute or the <source> element; the browser will choose the most suitable one.

How do you play an audio file in HTML?

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

The controls attribute adds audio controls, like play, pause, and volume. Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element. Multiple <source> elements can link to different audio files. The browser will use the first recognized format.

Video

Before HTML5, there was no standard for showing videos on a web page.Before HTML5, videos could only be played with a plug-in (like flash).The HTML5 <video> element specifies a standard way to embed a video in a web page.

How do you play an video file in HTML?

<video width="320" height="240" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

The controls attribute adds video controls, like play, pause, and volume.It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. Text between the <video> and </video> tags will only display in browsers that do not support the <video> element. Multiple <source> elements can link to different video files. The browser will use the first recognized format.

For More Information on Video and Audio tags click here

This tag is very important one to learn it can add some flare to you website if implemented properly into the  webpage. We should see to try and learn how to implement these tags into our website efficiently. 

Week 6: HTML 5 Canvasing

In class this week we were introduced to a new tag in HTML 5 the canvas tag.

What is the HTML 5 Canvas all about?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

The <canvas> element is used to draw graphics, on the fly, on a web page.The example at the left shows a red rectangle, a gradient rectangle, a multicolored rectangle, and some multicolored text that is drawn onto the canvas.

How to create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
Note: By default, the <canvas> element has no border and no content.

The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

Browser Support 

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Note: For more information on HTML Canvasing click here

Week 5: Website Validation

 Website Validation

In class this week Mr Osborne introduced us to a web validator http://validator.w3.org/, validating your website is a very important in the process of building website. The website may look functional but behind the scenes their could be a lot of errors in your code which can affect the functionality of your website.

A validator is a software program that can check your web pages against the web standards. When using a validator to check HTML, XHTML or CSS documents, the validator returns a list of errors found, according to your chosen standard.Make sure you make it a habit to validate all your web pages before publishing

Not all validators check for the same things. Some only check CSS, others XHTML, and others for accessibility. If you are sincere in presenting standardized pages to the public, test them with several validators. The World Wide Web Consortium sets the standards and also hosts a variety of web page validators.

For more information click here

The Website Validator that we use to validate our webpage is The W3C Markup Validation Service, which validates the page and then shows us in which line of code of the html file is either incorrectly spelt, misused atrribute, etc.