Tag Archives: design

using google web based fonts

As I want my site to pop (even though this is not a design unit), I have explored the possibilities that Google Web Fonts has to offer. Zinemac’s target audience is primarily youth and therefore I have been looking for a graffiti and/or blackboard style font. Google Web Fonts has one called Cabin Sketch, by Pablo Impallari. I quite like this font and have applied it as the Headings of my site.

To apply Google Web Fonts to your site:

  1. Go to Google Web Fonts
  2. Select the font you are interested in (for example Cabin Sketch) You are able to view the font character set, some history and current stats of usage as well as download it.
  3. Select the tab Use this font and you will be directed to a page with two sets of code. The first needs to be added in the <head> section of your html file and the second piece of code is an example of how to apply the code in your CSS file. I have applied the code to my <h1> – <h6> tags.

I have also been toying with the letter-spacing property and you will see in the above image the h1 and h2 tags have a value of 0.1em, while the h3 tag has no letter-spacing.

Other uses for Google fonts

In addition to being able to use Google fonts on your site, you can also download the font and insert it into your word processor library. This is a great feature if you are needing to create documents that match the branding elements of your site…or…for a number of alternative reasons, including making your assessments stand out a little more!

Definitely check it out and let me know how you go 🙂

Advertisements

sketches for final project

I have created various sketch ideas over the last couple of weeks for my final project and have decided on the following sketches to be the ones I work with:

Home Page sketch for final project
Home Page sketch for final project - click to view large version
News Page sketch for final project
News Page sketch for final project - click to view large version
Events page sketch for final project
Events Page sketch for final project - click to view large version
Contact Page sketch for final project
Contact Page sketch for final project - click to view large version

Feel free to provide feedback as I will be creating wireframes on the weekend (“,)

designing a website

While DMT is not a design unit, there is still some element of design required for building my project…and therefore I have been focusing a little this week on example designs. An interesting blog post was presented to me in Digital Graphics and the Still Image: http://creativenerds.co.uk/tutorials/80-fresh-photoshop-tutorials-for-creating-awesome-websites/

The great thing about the blog post is that it provides instructions on how to create the design using Photoshop.

I have summarised the list of 80 below into a couple of categories based on what I know people in the class are working on…

If you are creating a portfolio site:

If you are interested in developing an app or site to promote your app:

If you are interested in creating a contemporary/fresh site:

If you are developing a store:

Designs I am interested in to work/play with:

apply body id for CSS

The most interesting aspects of this weeks class (for me) were the instructions on how to apply different Cascading Style Sheets (CSS) to different pages, how precedence works with CSS and media type CSS files.

My interest is in relation to my workplace where divisions would like identifiers to make their section of the site a little different from others, yet the brand requirement is to have some design elements across all pages. It was great to see in practice how precedence works when you have multiple CSS files for a site with a similar requirement of the organisation (where Faculties would like their own design elements, but there is an over-arching brand requirement).

Below is what I found interesting and the how to…

…apply CSS elements to specific pages:

In Alaistair Weakley’s video tutorial, he explained the way to apply different CSS to different pages, is to apply a body id and then add the creative element details:

Apply Body ID to the page/s:

<body id=”home_page”>

Edit the CSS file:

#home_page h1 {
color:red;
}

This means that all text with a Heading 1 (h1) tag, on pages that have the body id of “home_page” will be red.

…add media type link for CSS files into the HTML

A CSS file may be created for the specific purpose of a particular media type, for example printing. To link the specific media type file into HTML, add the following text (replacing the href= link with your file location):

<link rel=”stylesheet” type=”text/css” media=”print” href=”http://www.locationofcssfile.print.css” />

I am looking forward to applying these ideas to my final project.