Logo Design

For my website and my social media its important I have a logo, as the banner that is on my business cards and blog is too wide to use as a general logo. I want my logo to match in with this though, so I've taken elements from this banner and played around with them, such as the shapes, colours and the typeface. It needs to be quite simple so that it will work at different sizes and so that it will work in black and white. Here are my experiments:

I like the colours that are created from the overlapping shapes, and think I will go with something like this.

For the tumblr profile picture, the shape needs to be a square, so I have changed this in to a square to fit in with this. I still need to correct a few things and make sure everything is equal and laid out right before I print them.

However, after a bit of thought, while I did like this new logo, the overlapping colours caused the colours to not actually be the same as those in my colour scheme for this. These are the colour specifications I need to stick to to stop my designs from becoming overcomplicated, to make printing cheaper as I will just be using a limited number of colours, and to make sure all of my pieces match.

I tried experimenting with different shapes for the logo as I knew I wanted something different from everyone else, as most people seem to be using circles with their initials cut into them. I've made these shapes based on the pattern behind them. So I eventually decided on a hexagon and then needed to play about with the positioning of the shapes, such as whether or not there should be a gap. The logo I have decided on in the end is one of my very first ideas, but neatened up so the shapes are the right size. This was a long process but now I'm happy with the final logo!

I've changed the logo on my tumblr to the final one and think it looks much more professional...

Final Logo and Stickers

I've printed my final logo on to sticker paper to use to seal my CV's and for other branding work.

Experimenting further

- Could create a pattern with logo

- Business cards could include the logo rather than the banner

- Needs to work in greyscale for if it can't be printed on a colour printer

PPD ~ Tech Sessions

These are my notes from the tech sessions with Lorraine that we had after the workshops with Simon.

Lecture 1

Why make a website?

Purpose - promotion, point of contact, sales, persuade, inform

Audience - industry professionals (networking), other creatives (collaboration), interested individuals/companies, educational purposes

Essential content - style of work, capabilities (portfolio), contact information, about, whatever the audience wants/expects to see

Content on homepage - simple navigation on each page, personal branding, work, news, basic about (name!)

Consider:

Functionality - does it work?

Usability - does it work well?

Aesthetics - is it well designed?

How do you use a website? You look for anything that is interesting and resembles what you are looking for. People only wait a few seconds for the website to load before giving up, so need to make sure images are small file sizes so load quicker.

Look at book - Steve Krug - Don't make me think

Web Design

1. Make a storyboard

2. Write the body text

3. Gather images

4. Then start designing in dreamweaver

Photoshop

- Use the slice tool (behind the crop tool), to slice the image and save the images separately. Save for web and devices (the crops are highlighted in blue) at 72dpi, with the quality about 60 or 70, and rename the images after you save them as they will just be saved as image slice.

- You can do this for your rollover links to make sure they are the same size, but you will need to hide the other layers, and save again

As an example, I've sliced up an image for a website design that I made for the YCN brief. I wish I had known about this tool sooner as it could have saved me so much time on previous things! But I'm sure I'll make good use of it now.

Lecture 2

First we looked through an example of a brief which is an example of what not to accept to do. The brief was asking for a lot of work, that would have to be done by about three people, expecting one person to do all this for free. We are designers, not web developers.

Photoshop

We looked again at the slice tool that we looked at last week and some more functions with this.

This shows you how long a selected image will take to load. [1 sec for this example]

You can select just the slices you want rather than them all. Go save - slices - selected slices. Can select more than one.

Can save as a HTML file as well but uses table code rather than divs, so it is recommend not to do this, as div's are more modern and work better.

The files are then saved to their own images file.

Dreamweaver

This is an example of a comment. The coloured code is for the computers benefit, the greyed out bits are the comments, which the computer ignores, so you can write notes to remind you what each bit is for. They are made with this code

<!-- comment -->

 

 This is the button on dreamweaver to apply the comment. To remove the comment use the button underneath.

You can choose to ignore a bit of html, to show you what a certain part of the page would look like without a bit of coding. This can be useful if you are unsure about a bit of code but you don't want to delete it and lose it.

This is the collapse full tag button. It folds up a piece of code that you know you don't want to change, a bit like locking a layer on illustrator that you know you don't want to accidentally mess with. 

 

This is what the tag looks like when it has been collapsed. If you hover over it you can see what the code is. To expand it back to normal code, either double click it or click on the expand all button.

Remember HTML is for content, CSS is for design style.

---

These are useful tips, and I am also reading the Web Standardistas book.

I am learning how to create my own website following the Dreamweaver workshops, so I have been reading this book that has been recommended to us. I have also started doing a lot of research in to website design and found that this is something that I am interested in that I didn't really think about before. Hopefully in Summer I will build my own website and buy my domain to get it all live!

Things I have learnt from the book so far:

- History of the world wide web and what XHTML is

PPD ~ Making my website

Based on this scamp, I am going to try and create my own website from scratch using Dreamweaver based on what I have learnt from the workshops.

I'm trying to create a really basic page with my banner on, just to put in to practice what I have learnt so I don't forget! I'm making sure the banner fits to the web standards.

Here is a really basic example of a template, with a link under it. It took me a while to figure everything out, but I think with a bit of practice I can be designing websites! This is definitely something I want to consider for some of next years projects.

Next, I made and saved the other pages for the site (index, about, contact, portfolio), and applied the template to them. I'm just trying to sort out my hosting registration, and then I need to gather some content to put on the site. I need to get this done soon as I've put claudiagriffin.com on my business cards!

PPD ~ Dreamweaver Workshop III

To open

- Root folder means you can work on website on any computer if you download the folder

- Manage sites -> click site -> edit -> local site folder -> navigate to your user work folder and select your folder -> ok -> done

Rollover buttons - be creative!

- Scamp would have measurements on to help work out measurements

- The padding and margin take in to account when working out the size of the button, we are making them width 130px and height 40px

- Photoshop - New document (web) - transparent background

- Try to keep file sizes as small as possible so website will load instantly so viewers don't get bored

- If having a solid background colour in an image, set the image as transparent and add the colour in dreamweaver

- File - save for web and devices - choose PNG24 as transparent background - save in to root folder

- When saving, all lowercase, no spaces, commas dashes etc, make it as short as possible

- Same image, underline, save in to save folder but with a different name

- Insert rollover images (they use javascript)

- Click at end of > of first button

- Alternate text (searchable by google, this is there so the web page is useable by everyone - the screen reader reads the alternate text for blind people when they rollover image) so type what the button is

- Makes the website quite complicated in terms of code

- Put all the buttons in

- Remove the background colour of the buttons on the style sheet to remove the boxes, save and refresh to see the changes....e.g..

[on photoshop should align the text to the left not in the middle!]

Creating new documents

- Use a dreamweaver template so only have to design the page once

- We are going to convert what we have in to a template (.dwt)

- Create 4 html pages from this dreamweaver template, so if we change something on the original dreamweaver template it will change all four pages at the same time

- We are making the area on the right an editable region, click area and then

- Give the region a name

- We don't want it to be HTML, we want it to be DWT so go file - save as template - save as [type template]

- New sub folder where templates are saved

- Need to recreate the index page as it wasn't created from template

- Go file - new - page from template - create

- Save over old index page

- Create the html pages for the other pages

- Put some different text on each page to differ

- Go on to template page

- Delete the padding on the stylesheet page of the buttons and make the width and height the same size as the image

- HTML pages are locked so if you need to edit them you do it on the template

- The properties bar at the bottom displays the specifics for each button and a space for the link, click the folder icon next to the link tab, e.g.

- This updates all the file from the template at once when you save

- File - save all

Making it live

[copy from Sophies blog]

MAKING A NEW DESIGN (STARTING FROM SCRATCH)

New > Blank Template > HTML > (None)

HOW DO YOU MAKE A PAGE LIVE?

FINISH WEBPAGE > Site > Manage site > Servers > + > Site set up (server name can be blank, doesn't matter) > FTP: sophiewilson.com (All other information from One.com) > Save> Save> DONE> 

* Sometimes need to put in ftp. before name, e.g. ftp.sophiewilsondesign (usually at college) *

> Click ^ arrow in files > Click expand button to connect for local files (to update) > Drag the local files over, now live.

HOW DO YOU REFER OVER DOMAIN NAMES? (.CO.UK - .COM)

Check emails from 1-2-3 reg, IPS tag to transfer over to one.com, paste over IPS tag, 24 hour confirmation.

Web forwarding, click forward

HOW DO YOU CHANGE YOUR TEXT PREFERENCES? ARIAL/HELVETICA/SANS SERIF TO HELVETICA/ARIAL/SANS SERIF

Manually in CSS (type in, change order of type preference).

Now that I know the basics, I'm going to have a go at creating a basic web page from scratch. [see blog post]

PPD Tutorial (April) & Progress Report

PPD Tutorial with John 1st May

Discuss aims/needs for summer and start of year 3

Where you see yourself at this point on the course and where you see yourself potentially on a professional level

- [Business cards] Next year, create a series of backs with my images on, with a simple front so that theres space for details to be written, but different examples of my work can be seen on the backs

- Get an agent in different english speaking countries, they take 25%

- Join LinkedIn and look on graphic design forum

- In your emails, need to tell professionals why you are contacting them, the reasons why you chose them, and ask them for their advice as it makes them feel like an expert

- Ask for a visit before you ask for a placement, then if they reply say you would love to do a placement

- Create a PDF with a few images on to send out

- Need to weigh CVs and make sure they're not too heavy to post

- Keep in contact with people who reply

- Contact designers across the world

- People like to see live briefs in your portfolio to stand out

- Can create different CV's for different companies.

- Don't put CV in a brown envelope as it looks like a bill

This lead me to thinking about finishing my CV design that I started a while ago. I want to send them through the post as I think they will get more attention than an email, but I should also create a PDF which can be emailed if necessary. Soon we will have to email companies to ask if we can come and visit, so I need to be prepared for this. Theres lots that I need to do to get on top of the PPD tasks, but I have made a good start with my branding and identity work.

Feedback from Jane 8th May

This is the second part of the PPD tutorials with John and Jane, about our progress so far with contacting professionals.

I showed Jane my ideas for my CV and told her where I was up to to see what to do next. I was struggling 

Content for CV:

1. contact details and name

2. education and qualifications

3. work experience (relevant to graphic design)

4. employment

5. skills & interests

6. personal profile

7. referees x 2

- The CV won't work if all one page, needs to be two sided to allow for an organised layout of the information

- Be friendly on emails with a hello and goodbye

- Weigh the letters to check they aren't too heavy with all the content

- Consider the hierarchy of type in the CV

- The colours and style of branding needs to link throughout all branding products

- Send a sample of work

- Consider printing on to coloured stock

- Send a follow up email after the mailshot

- Need to show you're an illustrator in the CV

- Can email first before sending mailshot

- Make the headings coloured to stand out

- Print logo stickers to seal

- Consider how it folds, and how it will be taken out of the envelope

- Would look better folded as a letter in to 3 rather than quarters

After this chat I've made a list of what I need to produce:

- More scamps for website design and get feedback

- Print logo on to sticker paper

- Update twitter, Facebook, behance and link all together

- Finish and print CV

- Design stationery, letterheads, invoice examples

Progress Report 

Present and review your mail out and any material you have produced to send out to possible contacts?

Final CV with examples of work - to be posted / also available as a pdf to be included in an email

[see printed CV]

[pdf of CV]

Business cards

[see business cards]

Individual letters sent out with each CV about why I have chosen each company

In process of making a mini package with postcard size print and stickers etc to be sent out with business card (based on the type of things I found you can print in Moo's sample pack)

List 5 activities that you have undertaken to secure opportunities for studio visits etc. Where is the evidence?

- Attended talks from visiting professionals [design context blog posts on visiting professionals]

- Emailed companies about visiting [see progress report]

- Mailed out my CV to companies I want to visit [see progress report]

- Social media networking, promoting myself via tumblr, twitter, linked in... 

- Talked to professionals:

List 10 designers / studios / companies that you have contacted as part of this process? What have the results been?

[see progress report]

What have you done to follow up on any contacts made?

No one has yet replied and will leave it another week before I will then send out a follow up email with a PDF of my CV incase they didn't receive my mailshot. Then I will email other companies.

What problems have you experienced?

NO REPLIES! Spent so much time designing my CV, writing individual letters and money on stamps and printing costs that I feel really disheartened that the companies can't even send an email saying no thanks.

What have you done to address them?

Send out more CV's to other design agencies, then in a week I will send out an email with a PDF of my CV incase they didn't receive my mailshot. I need to apply to many more places than I thought I would to even receive a reply. 

List 5 things you are going to do next and what you aim to achieve from them

- Send out more CV's to other companies - hopefully someone will reply

- Send out follow up e-mails - to remind them about my letter

- Keep updating social media - to draw in new viewers

- Attend gallery nights and try and get contacts through networking

- Try to get some freelance work as that will be professional experience if I don't manage to get a studio visit