Image Compression (add to Image Manipulation post)

This is a relatively short task and it focuses on looking at and comparing bitmap / rastser file sizes, because as we know, higher quality means bigger file sizes.

Step 1:
Find you folder with your resized images in

Step 2:
Arrange your folder to show you the file types and sizes in the same window

Step 3:

On the same post as yesterday, identify what size each file is AND link to what percentage you had resized your image to. You can also do this on Word with arrows if you like.

Step 4:

In Photoshop, open the original image and use the 'save as' function to resize your file without manipulating it beforehand. You can do this when you save as a JPEG. Print screen each step and add it to the same post. What is the outcome?

Photoshop Mock-ups

Now that you have created a mood board for how you want your website to look and sketches for layout, typography and hex codes, you can now design the pages on Photoshop. This will allow you to see how it will look and to use the exact colours, layout templates, etc.

It is important that you pay particular attention to detail when creating your mock-ups as you will be collecting feedback from peers and your tutor.

You do not need to take or add pictures (except a new logo if you have designed one) and you do not need to type out page text (use lorem ipsom). Eventually, you will be putting these designs into a PowerPoint so that we can hyperlink elements.

Step by step guide

Step 1.

First of all you need to ensure the size of your paper is the same as your PowerPoint slide. To do this, open both programs and in PowerPoint, go to Design> Slide Size> Custom Slide Size and in Photoshop, go to File> New> and type in the widescreen dimensions for the PowerPoint slide.

Step 2.

Open Chrome and go to Design Shack (10 web layouts) and then copy and paste the template you have chosen for your designs in Photoshop.

Step 3.

Use the Magic Wand tool to highlight the black boxes, you will need to hold shift to click on multiple objects. Once you have all of the black boxes highlighted, right click on the mouse and select Layer Via Cut, then delete the old background. Alternatively you can go to Select and then Inverse, which will allow you to get rid of the background.

Step 4.

Select the background layer and delete it, this will allow you to save the template as a PNG so you do not have a visible background.

Step 5.

File> Save As> PNG (and name it something sensible! e.g., home page layout)

Step 6.

Start creating your home page using the shape tools, etc., on Photoshop using the template. You must ensure that your assets and page elements line up and look professional.

It is easier to create all assets individually as it makes it easier to hyperlink later.

Extension Activity - Designing a new EN logo

Once you have shown your teacher your sketches for your re-designs, you can look at re-designing the EN logo to better appeal to your audience.

You do not need to create a new logo but if you choose to, be sure to consider the EN brand. What do you want the logo to say about the college?

Mood boards

A mood board is a document on which you arrange a selection of images, words, colours and general graphics that evoke / generate a certain feeling from the viewer. Mood boards are used across the creative industries to help a client visualise the direction / ideas a designer is going for. It is essentially a collage that captures the purpose of an idea and gives the viewer an idea of who the audience for the product would be.

Think about the contexts in which mood boards that are used, e.g., the games industry, films, fashion, etc.

Concept art for Super Paper Mario: Colour Splash

Fashion mood board emphasising mature but soft and floral notes 

Here is a link to a (slightly old) video from fashion expert Olaf Parker who will guide you through the basics.

Task
On Photoshop (A3 paper please), create a mood board for your redesigned homepage. This should include:

• font ideas
• colour (and shade) ideas
• image ideas (what will the images be of?)
• ideas for the style, e.g., formal, retro, 'cute', etc.

Follow Olaf's suggestions and don't use more than 5 graphics for each of the above.

Once finished, please save your mood board as a JPEG or PNG and upload it to your blog.

Proposal

Write a short summary on a new post on your blog stating the following:

• What have you been asked to do? (What is the brief?)
• Specify the target audience (and use media terminology)
• What product do you intend to create?
• What issues did you highlight with the existing website?
• How do you propose to improve the website:
• typography
• colours
• layout
• logo (if applicable)
• use of images and videos / other assets
• style / theme
• What is the aim of your new design - what do you hope to achieve?

Now go back through your post and check your spelling, punctuation and grammar - does it all make sense? Have you capitalised where necessary? Have you used appropriate media terminology?

Also, have you backed up every point that you have made with a reason?

Redesigning the EN Website

Now that you have completed research into the various assets on and considerations for websites, you can now start designing some yourselves.

At the start of the term I asked you to look at the EN homepage and identify any issues with it; we looked at whether or not the website appealed to you and if not, why it didn't. Now you are going to use your knowledge of audiences, typography, colours and hex codes and web layouts to redesign the homepage so that you believe it better suits the target demographic.

Task 1

1. On plain A3 paper (and using pencil), sketch out your new layout for a new EN homepage. You will need to make sure it meets the requirements set out in the brief.
2. Annotate your sketch and state which fonts (specific, family, styles, size, etc.,) and colours you will use. Be prepared to justify these choices later.
3. indicate where you will use images and videos and briefly describe what those images and videos will be / will include.
4. Design a new logo for the EN website - think about our brand and what we stand for and want to say about our college - there should not be a meme in sight!

Task 2

1. Select one link page from the navigation bar, e.g., courses or news and redesign that page too using the guidance above.

Web Page Layouts

Typography

The Brief

Hex (hexadecimal) Codes and Colour

DISTINCT - Analysing a Media Text

Learner Diary for Assignment 1

Your learner diary will be used to document what you have done each week. In your learner diary you will be discussing key terminology that you have learned and also the tasks that you have completed. Each week you will be given a term or short list of terms that you will need to cover, as a minimum.

Week one entry:
What did you do in each lesson this week (briefly)?
Terms to be covered:
- DISTINCT (each letter please)

Week 2 entry:
What did you do in each lesson this week (briefly)?
Terms to be covered:
- Brief (what is a media brief?)
- Client (who or what is a client? who is the client for the brief you have been given?)
- Audience engagement (what is meant by this term and what are some examples?)

Week 3 entry:
What did you do in each lesson this week (briefly)?
Terms to be covered:
- Primary and secondary audience (what does each term mean?)
- Demographics (what is it / what does this include?)
- Brand identity (what is it / what does this include?)

Week 4 entry:
What did you do in each lesson this week (briefly)?
Terms to be covered:
- Typography (identify 5 terms covered and say what they mean?)
- Hex codes (what are they and why are they used?)
- Web page layouts (state the 3 that you identified in your research and add the images of the box layouts)

Week 5-7 entry:
What have you been working on (briefly)?
Terms / content to be covered:
- Mood Boards (what are they used for and why did you make one?)
- Photoshop templates (how and why did you make one?)
- Hyperlinked PowerPoint mock-up of webpages (how and why did you make them?)

Photography Exercise - Descriptors

Wealth

Weakness

Power

Strength

Happiness

Loneliness

Frightened

Intoxicated


Remember to consider framing and angles - don't just act the descriptors out!

Website Navigation Flowchart

A navigation flowchart shows all of the connections between web pages on a web site. A navigation flowchart should show that you have considered where each click of the mouse will take the user and give you an opportunity to think about how easy your product will be to navigate around.

Some useful tools to build your flowchart include:

• Hierachy flowcharts using SmartArt in Word
• the website draw.io
• the application MindGenius which is installed on most college computers

Once complete, please save your flowchart as an image an upload to your blog.

Analysing Existing Websites - colour and layout

3. Analyse three websites you have been looking at so far (EN plus your chosen two) in regards to the following:

• Have a look on Design Shack and identify what layout has been used
• What colours have been used and why? Use either of these websites to look at complementary colour schemes Paletton & Adobe Colour Wheel

Analysing Existing Online Materials

The brief is asking you to produce an interactive media product for EN which will be used by new and existing students who are looking to study at or continuing to study at EN.

In order to respond to the task effectively, you will need to look at existing materials that are aimed at the same target audience or that appeal to the same target audience.

The tasks:

1. List everything that you, as a young person choosing a new college would want to see on a college's website

2. List everything that you, as a student at EN, want to see on our college website

Analysing Existing Online Materials:

1. Go to the new EN website and discuss the target audience and brand identity for the site

2. Find two more websites (one college and one website aimed at your age group) and discuss the target audience and brand identity for each

Key terms to help:

Demographics          Primary audience          Secondary audience
Colour scheme          Logo          Images         Videos
Layout / placement of elements          Font (including serif / sans serif)
Font size          Overall quality          Shapes/text boxes / image boxes
Slogan          Text spacing

Brand Identity and Target Audience

Target Audience and Brand Identity Sheet

Sony Bravia Play Doh Bunnies Advert

Assignment Brief for Unit 01

Your deadline for submitting the first draft of all work is Monday 12th December 2016