#WEEK3DAY4: REMIXING & PHOTOGRAPHY

Design composition I think is a lot like photography composition.

  • Rule of thirds
  • Diagonals
  • Different patterns like golden ratio
  • Leading lines — use the natural lines to draw the eyes to the subject
  • Negative space — have more negative space, busy photos are not great
  • Colour (make the subject stand out)
  • Focus
  • Content
  • Implied story
  • Style

Okay so let’s try to put everything into a remixed graphic.

I wanna mix a statue with a photo. And add these other things:

  • Background with lots of negative space
  • Frame with typography creating leading lines
  • 2D and 3D
  • Consistent lighting
  • Splash of colour…


#WEEK3DAY3: PROCREATE & ILLUSTRATOR

I was watching this video for 2021 design trends. And illustration or certain types of illustration were in trend. What was even more reassuring was that what was in trend seemed to be simpler things to draw.

https://dribbble.com/shots/14838131-Character-illustration

It seemed doable.

And basically it’s very clear how real designers and digital artists do things these days: Adobe Illustrator and ProCreate.

So I thought I could learn ProCreate, then learn how to draw, then learn some Illustrator.

So two apps and these illustration related topics:

  • Illustrate people or characters
  • Full page drawings

I looked up YouTube and SkillShare courses. Found these:

https://www.skillshare.com/classes/Digital-Illustration-Learn-to-Use-Procreate/971736290/projects


#WEEK3DAY1: RESEARCH + INSPIRATION

Why graphics design? Because basically everything I do could benefit from amazing design skills!

From video to websites and apps, making things look good is an essential skill for anyone doing any kind of creative and visual work.

INSPIRATION


#WEEK2DAY6: User Interactions, Component Life Cycles, Routing

Photo by Filiberto Santillán on Unsplash

This is still a pretty basic use of React and its ecosystem. But I think with this and everything we know so far. We should be able to at least build and deploy a simple website, not a web app, but a website that is beautiful and impressive.

Handling User Interaction

Simplest Scenario

import React from 'react';class Product extends React.Component {
showPrice() {
alert(this.props.item.price);
}
render() {
return <li onClick={() => this.showPrice()}>
<h3>{this.props.item.name}</h3>
<p>{this.props.item.description}</p>
</li>;
}
}
export default Product;

HTML vs JSX

HTML events:

<li onclick="...">...</li>

JSX:

<li onClick=...>...</li>

HTML invocation of functions is a string:

<li onclick="showPrice()">...</li>

JSX:

<li onClick={showPrice}>...</li>
<li onClick={() => this.showPrice()}>

HTML…


#WEEK2DAY5

So today I will be learning CSS and TailwindCSS and some other things.

Photo by Eftakher Alam on Unsplash

Okay soooooo… I’m like several days behind and behind on a lot of work.

Not good… Let’s fix it!

Eliminate

I installed this free app, to see how I was spending my time. What it does is, it automatically tracks your time on all the devices you install it on. Once you install it, you don’t have to do much. It just tracks what you spend your time on…


#WEEK2DAY4

Photo by Ferenc Almasi on Unsplash

So React uses JSX, which is basically HTML.

Just like any server application index.js is where it all starts. Let’s look at that.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
  • Here we import react and react-dom
  • Our css from index.css
  • And a component called App
  • The ReactDOM’s render method attaches the JSX from App to the HTML in the real DOM
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {…


#WEEK2DAY3

The advice that I liked was basically don’t try to learn it that much after the basics. You can always look em up, as you need them.

Photo by KOBU Agency on Unsplash

HTML

It’s basically these tags and the information is embedded in em.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>Our first responsive web page with HTML5 and CSS3</title>
<meta name="description" content="A basic responsive web page – an example from Chapter 1" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="Header">…


#WEEK2DAY2 + ORGANIZATION TIPS

Photo by Walling on Unsplash

LifeHack #5

Sometimes when you work on 2 computers different things end up on different computers. So I would constantly use Slack, Google Drive etc to move files between. Then I got annoyed by how slow it was. And it also felt like it was wasted and idle time.

So I got a Cat8 Ethernet Cable and a Macbook hub so I can hardwire my desktop pc to my laptop. Created a shared folder between them. Share anything between them in seconds.

I think this works without a cable too, just a bit slower.

I think sometimes in the heat of a…

Jake Batsuuri

I write about software && math

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store