Oh no! You’ve taken over a project from a colleague. Their folder structure and naming conventions are non-existent. Have a look at their project folder below:
Before jumping into the project, it’s a good idea to sort out this mess.
Create folders and rename the files according to what you’ve learnt in this lesson.
Post a screenshot of your folder structure and naming conventions on your WordPress blog.
Find a motion design studio or freelancer and give some examples of their work.
I did some research on motion design studios and found Galera (https://galera.agency). They are based in Ukraine and specialise in animated videos for mostly tech companies, and produce videos, commercials and UI animation to name a few. One of the things that makes this studio so special is that they deliver 100% original work because they do all of the projects from start to finish themselves instead of outsourcing. Galera is a «boutique agency» which means the employees have all the resources they need for the whole production – so the team have maximum focus on each project.
You’ve just acquired a time machine! To which era of motion history would you travel to get involved in? Write a 250-word document outlining your favourite era and include the following:
Include pictures, videos and any other media to help motivate your answers.
If I could go back in time to another era of motion history I would go back to the 1870s. I would like to be an understudy to Eadweard Muybridge. This era of motion design is so interesting because it was a huge leap forward in motion design. This is where motion design started so it definitely had a huge influence on the modern day motion design.
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.
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:
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).
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:
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!
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.
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.
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.
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
For this lesson task, you’ll be working on the same HTML document you created in the previous lesson task, «Creating an HTML structure».
The following elements should now be added to the HTML document:
For this lesson task, you need to create a basic HTML structure.
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.
You have created an HTML document with the following content:
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.
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).
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.
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.
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
AHV design 