EXERCISES
28/8/2023-4/9/2023 / week 1 - week 2
DAVIES
ANNIKA ANGELA /0362108
BACHELORS OF DESIGN(HONOURS) IN CREATIVE
MEDIA
INTERACTIVE DESIGN
WEB ANALYSIS
LECTURES
WEEK 1 - Introduction to first assignment (web anaylsis)
CSS
CSS stands for Cascading Style Sheets
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
CSS saves a lot of work. It can control the layout of multiple web pages all
at once
External stylesheets are stored in CSS files
HTML
The HyperText Markup Language or HTML is the standard markup language for
documents designed to be displayed in a web browser. It defines the meaning
and structure of web content. It is often assisted by technologies such as
Cascading Style Sheets and scripting languages such as JavaScript.
WEEK 2 - Usability : Designing Products for user satisfaction
Usability is when a user has to face a new product (good websites have
discoverability)
No need for additional instruction
web design - only 2 colours , it does not take too long to condition yourself
to the website
do not use greater than or more than for the button use the square tool shape
rotate and delete
grid alignment . center alignment is not good as you can lose reading flow for
long bodies of text. use left align
Hover effect - feedback. simple terms.
WEEK 3 - to much motion may disrupt the flow of going through the website for
a user
ads are what allow a website to continue running as it generates income to maintain it.
ads are what allow a website to continue running as it generates income to maintain it.
navigation button must stay visible at all times to allow for user to toggle
through the website easily
Body should show clear visual hierachy.
word press - a place to create a website or blog. easy to use to manage your
website
hero image -
navigation menu as groups in class
WEEK 4 -
Your domain name has an IP number
Everything is connected using cables
To edit titles
Paragraph style character style - InDesign
styles - Microsoft word
We use HTML language for website
opening tab and closing tab < >
attribute value should be in quotations
a tag - lin
b tag - bold
p tag - paragragh
i tag - italics
ol - ordered list
li - list
ul - bullet point
nested list for drop down menu
for link to work you have to include an href attribute
single sided for adding image
single sided for adding image
separate each attribute with a space
have to use lowercase when saving
blank - opens in new tab
title or alt for title
WEEK 5
ID attribute is when an HTML element has a unique attribute
Class attribute is when several elements have the same attribute that makes
then different to other elements
all ID class atrribute - NAME CANNOT INCLUDE NUMBERS and we have to use lower
case letters
By default, using these attributes does not affect
the presentation of an element.
It will only change their appearance if there is a CSS rule that
indicates it should be displayed
differently
two types of html elements
block level element - box fits entire space of browser each block is created
in a new line
dif ul h1 p li
Css contains two parts: a selector and a declaration
property and value separated by colon and ends with semi colon
inline css - one element
manage a site everytime you create a new project
style element only in head section!!!
backgroung size cannot be included in shorthand
repeat x and repeat y
first idea is a very common idea thats why wee make several sketches
keep it simple
WEEK 7
semantic elements - div section, aside, header,
non semantic - hl,p,a,li,ol,ul
INSTRUCTIONS
TASK 1 : Web analysis
For this task we are to analyse two websites in terms of
- purpose and goals of the website
- visual design and layout
- functionality and usability of the website
- website's performance
TASK 2: Web replication
- to replicate TWO (2) existing main pages of the websites in order gain a better understanding of their structure
- The images used do not have to be the exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style.
WEBSITE 1:OCEAN HEALTH INDEX WEB REPLICATION
Original
Replication 
I found that replicating the first page was fairly simple. I used Adobe
illustrator to do the replication. I used Pexels.com to find similar
images to the original website. I used an image of a turtle under water
where the backgorund had a similar colour theme to the original website. I
looked for an ocean logo for the replication. I dedided to use Futura std
book and Futura std bold as it is a sans serif font that had similar
thickness of stroke as the font in the original website. I also used
rectangles to create the gradient effect that shows at the top of the
navigation menu so that the navigation menu is visible like the original.
I noticed that the boxed used were rounded rectangles so I incorporated
that as well as making sure the rectangle that says Independent assessment
is slightly transparent like the original website.
Original
Replication
For this part I tried by to incorporate the blue shapes which are in
the white rectangle. I also made sure to use rounded rectangles again to
show consistency. I also created a gradient by using the eye dropper tool
and editing the gradient to match the original website.
Original
Replication
For this part of this website I found images that are some what similar to
the original website and also relevant the the different headings of each
section. I noticed there were a variety of different opacities that I had
to show for the boxes that show the words for example the boxes on the
left which have text on them have a lower opacity than the images on the
right except for the bottom right one. For the background I found an
images of bubbles underwater and used that. I also made sure the text of
the replication had the same leading and central alignment.
Original
Replication
In this part of the website replication. I looked for images of the
facebook logo and twitter logo then image traced them and used the
eyedropper tool to make them match the dark blue theme of the original
website.
REPLICATION
ORIGINAL
Original
Replication
In this part I found a B logo and made it similar to the size of the B logo
of the original. I used a picture with has very earthy tones similar to the
original website as well as finding a picture which shows people of colour
as the original website shows diversity like that. I used Myriad pro for the
replication as it was much the same as font in the original website. I used
the pen tool to draw the arrow as well as using a different font for the
letter "R" as the original website showed the R having more character than
the other letters.I made sure to use rounded rectangles for some of the
buttons. I also paid close attention to the logo and made sure the "I" and
"T" were conjoined. I used shapes and a lines to create the search symbol. I
also found an image which had a dark toned gradient as well as a grain for
the text showed at the bottom.
Original
Replication
I made sure to find images with a grey background as well as the images
being representative of the text below such as the "scoop neck bras"
Original
Replication
I found a grain gradient and edited the colours so the colours are similar
to the original. I also used a font called "bumerang regular" from
dafont.com for the "PR" part of program as well as finding a retro logo of
"a".
Original
Replication
For the logos I used image trace and looked for the logos online..
REPLICATION
ORIGINAL
FINAL PDFs and JPEGs
- for this exercise we are to design a recipe card by following these steps
- Create an HTML file named "index.html."
- Create a section that displays the following information:
- Recipe title
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
- Create an external CSS file named "style.css."
- Apply CSS rules to style your recipe card.
- Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card
fig my HTML code for the recipe card 9/10/2023
for the recipe card I wanted to have a black background with an eye-catching
title so I used a font named bumerang. I also wanted to use mainly cool
colours for the fonts. I used a sans serif font (futura book and light) for
the body for easy readability and fore a more appealing design.
fig css code for recipe card 9/10/2023
I used CSS selectors such as element selectors (e.g., body, h1, ul), class
selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g.,
#instructions) to style different parts of the card
element selectors- h1, h2, ul
class selectors - class list, spice list, list
ID Selectors - #para
LINK TO RECIPE CARD - RECIPE CARD ANNIKA
EXERCISES IN CLASS
my firstwebpage: myfirstwebpage-annika.netlify.app
web exercise: web-exercise.netlify.app
layout exercise: layout-exercise-annika.netlify.app
REFLECTIONS
WEB ANALYSIS
doing a web analysis as a beginner UI/UX designer can felt overwhelming at first, but it's a valuable journey. I learnt to make design decisions based on data, creating designs that put users first. Keep in mind that the digital world evolves quickly, so continuous learning is essential. Through web analysis, I hope to use my observations to create appealing and user friendly websites. . Overall, I know this exercise will help me become a better designer, more empathetic to users, and adaptable in a rapidly changing digital landscape.
WEB REPLICATION
Overall this task helped me to understand the importance of layout of the website and how to have a good placement of text as well as images. I also got a sense of making sure there is a consistent theme of a website to allow for a user to have a good flow when scrolling through the website
RECIPE CARD
I enjoyed this exercise though I would sometimes forget some of the ways to apply css rules and I would have to refresh my memory by watching some videos online. I liked the outcome of my recipe card but I know as I put in more practice and I will produce better work.
Comments
Post a Comment