01

BASIC WEB

In this theme I was introduced to the basic terminology within user interface design, digital communication, user testing, and responsive web design. I have refreshed my skills in html and css coding as well as basics in Photoshop and Illustrator.

slidebox
slidebox
slidebox
02

BASIC CONTENT

This module included development of video production, as a dramaturgy elements, film language, recording and editing techniques. I was expected to work in several different teams during this theme, so I have gained some experience working in the group as well.

pic
03

BASIC ANIMATION

This theme contained both individual and group productions. The main goal was to create a few interactive animations with an interactive story with focus on the story, a style, character design, animations and interactivity designed for a specific target group. I had to use my skills in sketching, hand drawing and then drawing visual universe and characters in illustrator. I have learned about animation principles which I used later and I had to expand my skills in HTML and CSS as well, because I had to add SVG files and audio elements to the site as well as use advanced selectors, transitions, keyframe animations, querySelector, events & eventListeners and so on. Despite the fact that it was a bit difficult I really enjoyed this theme.

04

BASIC UX

This fourth theme gave me a basic understanding of how interaction between users and user interfaces works, as well as which theories, tools and methods I can use for research, design, testing and production of digital solutions for smartphones so that my work is based on specific insights about actual users instead of my own feelings.

Basic Web

My role in this theme was to create responsive website designed for a specific target group. My style was Blue Note. Firstly I found all needed information about Blue note, then I created moodboard and color scheme for the website, choose typography, sketched a logo and then draw it in illustrator. I think that I did well in this theme and I achieved all given requirements and besides that I have broaden my skills in design. Not only in design from my point of view, in the meaning that I couldn't create a design what I want but create a design of given style which gave me a whole new perspective.
My role in this theme was to create responsive website designed for a specific target group. My style was Blue Note. Firstly I found all needed information about Blue note, then I created moodboard and color scheme for the website, choose typography, sketched a logo and then draw it in illustrator. I think that I did well in this theme and I achieved all given requirements and besides that I have broaden my skills in design. Not only in design from my point of view, in the meaning that I couldn't create a design what I want but create a design of given style which gave me a whole new perspective.

Responsive website


In our first assignment we learn what is something like moodboard and style tile which was new to me and had to choose typography and color scheme for our very first webpage. All of that had to be on our given art style which was in my case Blue Note. In this project I put together everything I have known and learned about responsivity and designing webpages. With the content ready from previous assignment, I made my first webpage of this studies. I made sure the page worked on every device and was loading nicely thanks to semantic html elements and optimized images.

wireframe wireframe

WIREFRAMES

Paper prototype Paper prototype Paper prototype
Paper prototype Paper prototype Paper prototype

PAPER
PROTOTYPE

Paper prototype

STYLE TILE

MOODBOARD

TYPOGRAPHY

MONTSERRAT

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

I used font Montserrat because I find it aesthetically pleasing, simple and good readable, whether it is used in big or small size. For me, the most useful varient is the Light version. I love the geometric simplicity of the letters, especially the capitals.



I have used font size 15px for articles and 40px for headings.

COLOR SCHEME

HEX #000d24
HEX #3e5f6e
HEX #ffffff
HEX #5b5b5b
HEX #2d2d2d
HEX #19191b

LOGO

My first thought of my logo was connection of letter T and D, However, as there are so many two letters logos, I decided to go completely different way. I wanted something with the hidden meaning and I chose an animal Eagle.

Something about eagles...

Eagles have always been considered as the kings of the sky. They fly higher than any other birds, which inspire us to reach higher and become more than you think you are capable of. Because of the Eagle’s ability to fly so high yet stay grounded, they’re great at global thinking. The Eagle is looking closely with a careful eye at the most minute of details in order to see life from a broader perspective. They see more than the average human and their perspective from the sky provides solutions that others cannot see. They see into the past, present, and future. The Eagle’s vision is 8 times greater than humans and contain many more color-sensitive cones. They take a look from where it sees and soar into unknown realms and new realities - continually expanding their view.

They have exceptionally strong talons which are symbolic of the ability to grab what you need and have feet with four toes as a symbol for having a solid foundation. They have powers of intuition, creativity and perception. Eagle symbolism can also mean that there are opportunities available to you and that you must snatch them up while they last.

logopositive
logonegative
logopositive

So why I chose the eagle?

As I consider all these characteristics and symbols really important in creating design, I have chosen this animal as the base of my logo. At the end, I have added the name of my brand and I have chosen Montserrat as a font as it seems to me elegant and pure like an Eagle and my whole website.

USABILITY RESULTS

My usability test was asking five people to answer following questions by looking at my webpage.

• What is the page about?
• How can you tell in which page are you?
• Where can you find my personal information?
• Is it hard to read some text for you?
• Do you have some problem with switching between pages?
• Where can you find information about my logo?

This test gave me mostly positive results. Everything from my question was easy to answer and everyone have any difficulties with looking for the information. When I asked them if they have some suggestions to improve functionality of my website a was given advice to make my navigaiton bar fixed and then adjust color of the navigation panel, so they don’t have to scroll back to top.

So my future plan about this website is to make fixed navigation panel and also add further information about my website and about me. Also my plan is to reduce numbers of colors on my website, so there will be more simplicity in colors.

DESIGN PRINCIPLES

CONTRAST

PROXIMITY

SYMMETRY

HIERARCHY

BALANCE

ALIGNMENT

SIZE

COLOR

CLOSURE

WHITE SPACE