Lt 1.3 The creative process: step four

Lt 1.3 The creative process: step four

Using any of the vector-building methods mentioned in today’s lesson, convert one of the existing sketches below into a vector graphic. Watch Von Glitschka’s vector-building tutorials again if you need guidance (see the videos in today’s lesson).

Feel free to change the raw sketch to make it your own: add to it or subtract. You can use the final vector graphics in your course assignment if you want to.

I chose to vectorise the record player. I used a combination of building with shapes and strokes.

Reklame
LT 1.2 The creative process: step two and three

LT 1.2 The creative process: step two and three

In 2008, Paula Scher gave a talk at the Art Centre Design Conference in Pasadena, California, named “Serious Play”. Today, it’s widely shared and referenced by graphic design educators because of its simple but also complex truth. In essence, it’s about the importance of play in graphic design (which is quite serious!) and not falling into a pit of design solemness. In this case, solemness means to design safe, predictable, and acceptable things.

In today’s lesson, we’ve talked about the quiet before the storm in a project – where you have all the information you need, and you now have to think of ideas to communicate them visually. This is a delicate and precious stage in the creative process and will determine the way forward.

Keep Paula Scher’s talk in mind when thinking of ideas:

  • Embrace play and the unexpected.
  • Don’t repeat the same recipe for success.
  • Don’t be afraid of taking on something a little beyond your abilities.
  • Don’t be scared of being a fool.
  • Experiment!

Today you don’t need to do anything for this lesson task. Just think and wonder about it all and try not to be too solemn; instead, embrace play (whatever that means to you specifically).

LT 1.1 The creative process: step 1

LT 1.1 The creative process: step 1

Write a short, informal paragraph to describe the type of graphic designer you want to be. It can have as many words as you feel fit and can be in any format you wish: draw a picture, add a photo, or make a mind map. Let your personality shape the delivery. 

The questions below may kickstart the process:

  • What kind of job do you want to wake up to every day? What do you want to do daily?
  • Which type of clients do you want to work with?
  • After pinning down your interests and vision of yourself as a professional, in which areas do you think you need more growth and experience?
  • What are your next steps to fulfil who you want to be as a graphic designer?

If you are unsure, think of the different courses you’ve done so far in your studies and the projects you enjoyed most – where did you naturally flourish, and which projects did you unexpectedly shine in?


My vision is to hopefully get a job as a graphic designer in a company or design studio where I can learn more and evolve further into the type of designer I want to be, and then when I am ready – go solo or create a small team of different designers and work with branding and web design, as those are my favourite projects. My next steps to fulfil this is to complete my studies, practice practice practise and build a portfolio!

LT 1.4 HTML links and images

LT 1.4 HTML links and images

The task

For this lesson task, you will continue to work on the web project to promote Norwegian salmon. You can use the same HTML document you’ve been working on in the previous two lesson tasks as a starting point. 

Part 1

Create the other HTML pages that you have planned for the webpage. (This should include all the pages that are on your <ul>). Take note of where you are saving these files in your file structure. 

Using the href=”” attribute and relative file paths, create links to each of the pages from the <ul> in the index.html document. 

Populate each of the new HTML files with the same <ul> for navigation and at least a <h1> header to state the title of the page.

Part 2

In your index.html document, add one image to one of the sections in the page using a relative file path. Note that you need to take special care of where you put the image in the folder structure and how you link the href. Add text for the alt attribute. This should describe the image in some way if it’s not displayed.

You can experiment by adding a width or height attribute to make the image fit inside the browser display.

Add another image. Observe how the images are placed on the HTML page. Add a <br> element between the images to see how the layout changes. Add an <hr> element to insert a line break between the images. Finally, add a <p> element between the images. 

Part 3

Select the root folder containing your HTML and the ‘Images’ folder and upload it to your host using an FTP client. Once uploaded, check if the remote files work in your browser. 

Check your page links in the live browser to see if it works properly. Check if the images display. If not, check your links and file locations. 


Part 1

Part 2

Part 3

LT 1.3 Semantic HTML

LT 1.3 Semantic HTML

The task

For this lesson task, you’ll be working on the same HTML document you created in the previous lesson task, «Creating an HTML structure».

Part 1

The following elements should now be added to the HTML document:

  • <meta> element with some metadata – charset, description, keywords, author, viewport – note: must sit within the <head> element.
  • Create a <ul> (unordered list) with <li> elements that will later form the navigation menu. (You are not required to style or link anything at this point, just list the menu items that will represent the links to the different pages of the website later). Think carefully about where you should place this list.
  • Create at least two sections in the content using either <section><article> or <aside> elements that will hold the main content.
  • Create at least one <h1> element, and one <h2> element. Note how the <h1> and <h2> elements render as different sizes, and as bold text.
  • Create at least four <p> elements.
LT 1.2 HTML basics

LT 1.2 HTML basics

The task

For this lesson task, you need to create a basic HTML structure.

Part 1

  • In Adobe Dreamweaver, open up the index.html file you created in the previous lesson task. If you do not have one, then create a new document now.
  • Make sure the HTML file is saved as index.html in the folder structure you created for the lesson task on planning the structure. Note that the tile of the page can be different from the file’s name. You always need to name at least one file index.html, as a browser will look for such a file to load first. It does not have to be your home page, but this is standard practice.
  • Now, start adding some tags. It is perfectly fine if you don’t add any information between the opening and closing tags for now, just focus on the different tags that will make up the structure of the webpage. Your HTML file should have the following content:
    • <!DOCTYPE html> – this should be the first line in the document.
    • <html>, <head> and <body> elements.
    • Page title – note: the <title> element must sit within the <head> element.
    • <header>, <main> and <footer> elements, these must sit within the <body> element.

Almost all of the elements you will use have opening and closing tags. Typical «newbie» mistakes include forgetting to close your tags. Check your work!

Take a screenshot of the HTML coded document to post to your blog.

Part 2

You have created an HTML document with the following content:

  • <!DOCTYPE html>
  • <html>
  • <head>
  • <body>
  • <title>
  • <header>
  • <main>
  • <footer>

In one or two sentences, describe the function and meaning of each element and, where applicable, state in which parent folder you are expected to find the element.


Part 1

Part 2

<!DOCTYPE html> – States what kind of document is is, for example this is a html document.

<html> – Defines the root of a HTML document. Often the main parent in the document.

<head> – This tag contains metadata (information) for the document. Used as a instruction for browsers on how to display the content. This will not be visible on the webpage.

<body> – Everything that is visible on the webpage is going into the body section. The body is the child of the html parent.

<title> – Defines the title of the document.

<header> – This section usually contains the logo, navigation etc.

<main> – Specifies the main content of a document inside the «body». This is the child of the body parent.

<footer> – This is where all the footer information inside the document/ section is placed, such as copyright, policies etc. This will be the child of the body parent.

LT 1.1 HTML basics – Hosting and file management

LT 1.1 HTML basics – Hosting and file management

The task

The Norwegian Seafood Council wants to promote the health benefits of Norwegian salmon to the local and international market. You need to create an informative website for this purpose. (This is a fictitious client and project).

Part 1

You need to come up with a list of at least five domain names the client could purchase. Use a domain registration directory like GoDaddy to see what domain names are available. Design a one-page document you would present to your client with the domain name suggestions. 

With the list of possible domain names, you also need to provide the client with costs and a motivation for each option. The motivation can include how descriptive, short or unique it is. Post this document as a pdf or jpeg on your blog.

Part 2

Create very basic wireframes for the website, showing at least three pages. These can be low tech wireframes that show planning for the page structure and navigation.

Part 3

Create the structure for the HTML files and folders of the web page. Think about the root folder and name the folders correctly. Firstly, sketch out what the structure will look like. Then, set these up, so you are ready to code your website.

Open Adobe Dreamweaver. Click on the ‘Create New’ button, and under ‘Document type’, choose HTML. Keep the ‘Framework’ as none since we will not use a Bootstrap framework. You can give the file a name, call it ‘home’ and the ‘Doc Type’ should be HTML5.

This will open a blank document in Dreamweaver. You will see a tab called ‘Untitled-1’ in the top left bar. This is because the file is not yet saved. Hit ‘save’ and save the file as Index.html in the correct folder of the folder structure you created. One HTML document called ‘index.html’ is enough for this LT.

Remember, this structure should be set up so that it can be uploaded to a hosting server without disrupting the file paths. When you are done, take a screenshot of the folder and, together with the sketch of your structure, upload it to your WordPress blog.


Part 1

Part 2

Part 3

LT 2.1 Illustration, infographic and brochure

LT 2.1 Illustration, infographic and brochure

Practical assignment (observation and analysis)

Use the logo you created in Week 1 and design a brochure for your product. You may use any format you like, just make sure that the format is in line with and adds to your logo design. Your brochure must contain an illustration. This could be the infographic alone, or it could be the infographic and the rest of the brochure (in other words, the entire brochure may be illustrated if you’d like).

When designing the brochure and creating your illustration, make definite use of the fundamentals of visual language as discussed in this lesson. 

You must illustrate an infographic and design a brochure:

1. Illustration of infographic

The brochure design and infographic illustration should work together. Consider the format and style of your brochure and illustrate an infographic using fictitious data (or you could do research to get a better idea of actual statistics). The infographic must display the nutritious benefit of your product to dogs. It should contain the nutritional value, as compared to the necessary nutrition intake of dogs. It must also give an indication of consumption per size of dog. You may also add information of your choice that you think is relevant.

2. Design of brochure

Design a brochure that introduces your product and includes the infographic illustrated in Question 1. You can decide on the information and format of your brochure. As a guideline, consider a brochure of A4 (lying), folding to A5 (standing). You don’t have to have more than four pages in your brochure (but it depends on your design and style). You must base your brochure design on the design of your logo. Thus, look at your logo and design a brochure that complements and blends in with it.


Infographic:

Brochure:

LT 1.1 Create a logo

LT 1.1 Create a logo

Develop a name for a dog food product. Design a logo for this product, using full colour. The logo must contain a main visual and typography. (Use the “People Saving Pets” logo as a guide – this does not mean your design should be the same, it is simply an example.) Follow each of the fundamental steps outlined above, in that sequence and take note of what needs to be handed in as you progress through these steps:

  • Exploration – Use sketching techniques to draw thumbnails and hand in your thumbnails as scanned PDFs.
  • Focus – Highlight three of the thumbnail ideas that you consider the best options and state why. Hand in an A4 with visuals of the three chosen thumbnails; include reasons for choosing each of these three options.
  • Construction – Use sketching techniques and redraw ONE of your chosen concepts until you’ve reached a conclusion on a successful logo. Hand in your drawings as scanned PDFs.
  • Testing – Experiment more with your favourite options from Step 3 and ask the opinion of a few people. Hand in examples of the logos shown to people and write their feedback or opinion on each.
  • Refinement – Choose your final design and execute it in Adobe Illustrator, along with the name of the product. Hand in your final logo as an A4 PDF.

I started to sketch thinking I wanted to call my dog food brand «Good Dog», than I changed it to «Fido» before I ended up with «Fido & Max». I made a lot of very different sketches before choosing the three I liked the best.

The three sketches I liked the most and wanted to further develop was the two «Fido and Max» logos with the french bulldog illustration, and the «Good dog» logo with the dogs face to the left on the upper right picture. I asked my boyfriend and a colleague which of the three ideas they enjoyed the most and with their help I chose to digitalise the «Fido and Max» version with the bulldog illustration above the name. I also made some digital sketches before moving to the actual logo.

After playing around in illustrator I chose a font called «chinchilla» as I loved the playfulness of it, and felt like it really matched the illustration. This is how the finished logo turned out:

LT 9.2 Create a campaign

LT 9.2 Create a campaign

Billabong has decided to create a campaign especially for a new item of clothing, a snow jacket like this one.

Potential customers who see the product on Instagram, can click through to the landing page to learn more about it. Your task is to design a high-fidelity long-form landing page for this product (using Figma or Adobe XD). Check out the Mac Pro landing page for inspiration. Upload a link to your prototype, as well as screenshots of the final page.


I made the campaign landing page in Adobe XD, but unfortunately I managed to make it in the same file as my CA07 prototype so I can’t post a link, but will post screenshots. The last photo is the buttons in hover state.