I’ve spent the afternoon on the internet looking for things to make for Christmas. While looking I found this lovely homepage. I have a thing for dollies so that’s what attracted me to it.  It really has a  hand-made scrap-booking feel to it which I also like. I love seeing hand-drawn things on the internet.

To check the website out click here.

Another site that I found was Sass and Peril – a website that features screen printed designs:

They have some cute baby cards and show some of there concept sketches.

Click here to see them.

I forgot to mention that I finished my website:

here it is!

www.smdesignnz.com

 

I have written all my text for each image for my website. Each one has a little title explaining what the image is for, named, what year it was made and what was used to create it. I think that having each of these things is important because viewers want a quick explanation of the images. It is also a way of saying what computer programs and mediums I am capable of using:

For the about our work we were asked to right 500 words. I already have an about my work and have decided to use that. It isn’t 500 words but it explains what influences my work.

I have almost finished making my website. After loosing all my work re-doing it all didn’t actually turn out that bad, in fact it was quite easy since I already knew how to do things and most of it was just placing the correct images on the right page.

Before I lost everything I didn’t get the chance to work on my contact page. I did have a wire-frame of it though which looked like this:

Since designing the wire frames a lot about my website has changed. I tried a couple of different things with the contacts page and one was to have another box on top explaining how to contact me.

But I thought I’d keep it simple and remove that. All that people have to do is click on the image to were they have to go:

For the contact page and footer I wanted to have my email address. Since it doesn’t have a proper link I used the mailto link:

Now when you click on the email me link or my footer it will take you to Microsoft Outlook Express with my email address in the to section!

For our website we have to write one-hundred words about eight images that will be on there. One my website I have divided up the images so that four will be on the portfolio page and four will be on my current work page.

In class we learnt about how to write for the web:

  • Using an inverted pyramid .You start with the conclusion or main point and then get in more detail about it later.
  • Remembering people read in an F shape. They read the first paragraph and the first couple of lines of each paragraph after that. Then towards the end they hardly read anything. Keep content brief!

Using these techniques I have decided to write the first one-hundred words for my first image:

Digital Image 2010

Concert Poster

Made in Adobe Illustrator

We were asked to create a poster for a fictional concert. We were given a date and venue but got to pick what bands/artists were playing at the event. I chose Computers Want Me Dead as my featuring band.

My research on other rock posters such as the Warped Tour had skeleton images rocking out. I was able make use of skulls to represent the ‘me dead’ of the band name. To counter the skull I made a robot shooting – the computer in the band name.

I used bright exciting colours as the band is an upbeat electro-pop based band.

(109 words)

 

So I haven’t posted in a while! Since the last time I did I have broken two of my hard drives and lost all my work. I thought that since I have to start again I will take the opportunity to make my work better and actually write posts about what is happening.

So I have done my HTML for my homepage and it looks like this:

So far it is just the links to each of my pages: about me, portfolio, current work and contact me (note: contact me is my action button which tells the viewer to GO AND CONTACT ME and GIVE ME SOME WORK!)

Most of the information for this page is found in the CSS:

I have put the background image there. I have saved it as a JPEG and had to upload my background as it is a gradient:

body {
background-image:url(images/largebackground.jpg);
background-repeat:repeat;
background-position:center;
}

Centring it has made it stay in the correct position behind my buttons.

My buttons are uploaded at PNG-24 – when they are uploaded in this format the background is transparent. All you see is the actual image.

For the buttons I have used the ‘awesome menu’ in my script:

ul#menu {
width: 760px; margin: 250px auto;
list-style: none;
}

Read the rest of this entry »

On the third week of class we started learning about HTML (Hypertext Markup Language.) It’s sort of like telling a piece of text exactly how it should look and act.

For example  a bold piece of text like this: Hello World! has to be told to read as  bold. That’s were tags come in! In html a tag looks like this:

<strong> Hello World! </strong>

Each tag comes in a pair. At the start there is an <opening tag>  and then at the end of the text there is a </closing tag> The closing tag is the same as the opening tag but with a forward slash (/) 

Some of the tags that we used in class were:

  • <body> This is were you put the body text </body>
  • <title>web page title</title>
  • <p> paragraph </p>
  • <h1>Header level one</h1>
  • <h2> header  level two</h2>
  • <h3>header level three</h3>
  • <strong> bold text </strong>
  • <em> italic text </em>
  • <img src=”path to file”/>  to add an image
  • <a> link tag </a>
  • <a href=”path to file”</a> to link to other pages

While learning these we got to use Adobe Dreamweaver. This was my first time using it so it was all very new. We got told that we’ll only be using a small percentage of it and mainly be using it to hand code. The first thing to do when you open it is select your preferences and make sure code hints is selected. Quick link Ctrl + U :

When making a website it is important to save everything in the same place that means keeping it all in one folder. That one folder you are using for that website should contain following set of folders: Artwork (for all the images collected for your website)  REF (for research and experiments on your website), documents and website build (this is the folder for all things that will we uploaded) Inside the website build folder there will be another set of folders: html, css, images and sub section. Like this:


So since last time I have blogged we have learnt quite a bit on how to make our own website:

  1. Making a mood board. We collected different images to show what we want our website to encompass. My mood board shows that I am liking black backgrounds and a hint of bright colours. This year I have used a lot of the pink and green throughout my work so I’m following it through to my website. I have also spent a lot of time with hand-drawn text and want that skill to be seen on my site. 
  2. How to make wireframes to show what we would like our website to look. This is like a draft plan with none of the fancy things like colour, real words and images. Just boxes and sample text. I have created a wireframe for each page that will be part of my website. Using the sitemap made earlier I made a wireframe using each of the coloured paper.  This is currently what mine looks like:
  3. We are also designing our homepage. I want mine to be simple and to the point. I want it to be about my identity that I have created for myself this year. To do that I am going to have my logo as the main focus. My logo consist of four circles, each one a development of the last and my name at the end. For the website I want a link to a different part of my page under each circle and when my name is clicked on it refreshes the homepage.

So for the last couple of weeks I didn’t have admin rights to my blog as it was getting marked by my tutor. But I am back and ready to post all about what we are up to in class now.

For the rest of the year we will be working on making our own website using HTML & CSS code. It’s pretty cool because it is a skill I really think will be valuable. Before we start with all the hard stuff it is important that we plan out what we are going to be doing and how we are going to manage our time.

Read the rest of this entry »

In class last week we learnt all about SEO, Statistics and Blogging Ethics.

In doing this we learnt a whole bunch of words too like what SEO stands for:  Search Engine Optimization, what SERP stands for: Search Engine Result Pages.

SEO means optimising your site so that it can be easily searchable & findable on engines like Google  &  Bing. You want your website to show up when they search your name or something that relates to your website. To get your website coming up on the first page of Google the best way is to follow these steps:

  • Write more than 100 words in each post.
  • Put quality content in your posts. Remember Quality is King!
  • Using keywords throughout your post that relate to what your blog is about. You want keywords that have low competition and high searches. To find out if your keywords have those Google AdWords  is a good place to have a look at.
  • When using keywords remember not to over use them and only use ones that are relevant. If you are over using them in a bad way your website can be penalised so be careful!

If you want to check out how your SEO is going and view how many people are checking out your blog click on your Stats! They can be found by clicking this button up at the top of your WordPress Dash:

By clicking that it will take you to a page with all the  information you want to know!

This is the final post for my Web Media project on blogs. I will hopefully keep it up to date with what I am working on in my last few months of being a Graphic Design student. See you!

Follow

Get every new post delivered to your Inbox.