Author: yese

Parallax

Learning Parallax was fun! It makes me feel like an actual designer. Its cool that something like this doesn’t need JavaScript.

https://www.karliekloss.com/

The link I shared above is an excellent example of parallax scrolling. The design feels so interactive!

The link bellow also has some parallax but something extra is going on at the end, when you move the mouse so do the fruit and veggies.

https://koox.co.uk/home

And this last one is INSANE! There is a lot going on but smoothly.

https://locomotive.ca/en

DESIGN FOR EVEYTHING

Imagine having to design for like 30 screens, that’s a lot of work and a waste of time. Responsive design helps make designs for all screen sizes. I understand now why the professor said to start at the mobile level first and work yourself up. Make sure you have the important things like font, color, padding, images down. Tip: Don’t give elements specific heights and widths because then you will have problems and have to add a lot of code. Then start adding media queries for responsive design.

Absolute Figma Basics

I tried learning Figma in a couple hours I thought I was doing well until I needed to add another section. Most of the tutorials I found were based on a multiple page website or just one page with one section so after a few hours I figured out how to design the website in figma file. So here is some absolute basic starting things to know:

Continue reading “Absolute Figma Basics”

Positioning, Flex, & Grid.

Positioning property will set the rules on how an element will be placed on the page. It has 5 values:

  • static: it follows the order of html
  • relative: the element can go anywhere without messing up the flow of the html except for the one its attached to
  • absolute: its placement is based on the px of the document not an element
  • fixed: element will stay on the same spot at all times
  • sticky: its location is based on the scroll of the document

Flexbox makes it easier to create flexible design. It has 5 properties.

  • flex-direction: determines the direction
  • flex-wrap: determines if it will have stop location and go to the next line or if it just go in one line
  • justify-content: determines how it will begin
  • align-items: determines how to align the items
  • align-content: organizes the space around the items

Grid layouts with rows and columns. Has 4

  • grid-template-columns: determines the size of the layout
  • grid-template-rows: determines the size of each row
  • justify-content: aligns the grid
  • align-content: vertically align items