DEV Community: John Miyao

More Design Work

John Miyao — Thu, 19 May 2022 19:32:25 +0000

This week we continued our design work, which meant more time in Affinity Designer. Remember, this is a web development AND web design course. If you don’t know what Affinity Designer is, it’s a design program very similar to photoshop. I don’t know what differences there are or if there’ some thing’s it lacks, but as far as I know, it has more than enough. It’s very robust and there’s a very real learning curve, and the best way to learn how to use these programs is by doing, so we do.

City Postcard

I think of design like non-verbal communication. The way you present yourself, how dress, your posture, your facial expressions, the way you use your hands and arms when speaking is all a form of communication without using words. Design is the same. It’s where you place your text, how big or small your font is, the colors or shapes you choose all communicate a message without using any words.

To practice our visual communication we were asked to illustrate a postcard of Santa Fe without using any words. This means we had to use colors, symbols and/or landmarks to convey, Santa Fe, New Mexico. Unfortunately, Santa Fe doesn’t have any dead giveaway landmarks alike the Statue of Liberty in New York City or The Eiffel Tower in Paris so we had to get a bit more creative.

To google we went, and google supplied images of pueblo style architecture, native American art, the desert and not much else. To keep us from spending too much time on small details and trying to illustrate the perfect postcard, we time-boxed (add link) ourselves of 40 minutes. Unfortunately for me, I did not manage my time well and did not think through my layout well enough so here’s what I came up with:

As you can see I struggled illustrating a pueblo style house and I spent too much time designing the native American rug. My image resembles the state flag with the yellow and red symbol in the center. The gray lines are the highways that cross through the city. However, my classmate thought they resembled the cracks of the dry desert, so I suppose it can be both!

Here’s what I thought was the best one from my class:

Secret Word

Next we worked on illustrating a word without writing the word and have our classmates guess. Maybe I lack creativity, but I couldn’t come up with anything better than using a pictograph. I would’ve liked to have some sort of abstract drawing that could convey it but felt clueless as to how to begin doing that.

Can you tell what my word is? Comment your guess and I’ll tell you if you’re right.

e-commerce Style Tile

Back to the style tile. This time we were given a prompt of an Audiophile store. Again, a style tile helps convey the look and feel of a product or site before you actually build it. It’s also a way for the designer to leave some room for changes rather than mocking up a site, having the team or client get attached to that mock up and then get upset when the final build looks anything different. It’s a mockup to organize the design elements and options.

Personal Page

To wrap up the week, we began thinking about our own personal project page. This will be our introduction to the world of our newfound Web Dev and Web Design skills, which is why I think it’s taking me so long to nail down a design and layout. Just as we’ve been practicing throughout the week, we first start with a style tile. Figuring out our visual language before we start building anything.

LOOK AND FEEL. I know I want my site to look, clean, modern and creative. I also know I’d love to work for a company like Nike (if not Nike themselves) as I love sports and fashion. This gives me a baseline of what my style and visual design should communicate.
FONTS. I researched some fonts. Derek provided us with this link https://heyreliable.com/ultimate-google-font-pairings/ which pairs fonts together. I primarily used that to find a combo of fonts and went with Permanent Marker for my header (may change down the road) and Overpass for the rest of the text. I know I wanted a sans-serif for that modern touch. I like Permanent Marker as my header to give it a ‘creative’ look. Something that’s a little different and makes your eye pop.
COLOR PALETTES. Next I looked for some color palettes. I went through at least 4 or 5 iterations. Originally I was going to go with a purple, gold, black combo. But Derek reminded us if we want to work at a place like Nike, then build your page that emulates it. So, I scrapped all those colors and looked up Nike’s color palette which is black and white, but their original logo was red. So, I went with red and found a complimentary color palette to match that red.
APPLY ALL. Now that I had all of my main design aspects in place, it was time to put it all together. It’s not the greatest style tile, but I’ve been running behind the class so here’s what I produced.

Next week I will have a link to my new personal page. Hopefully it captures your eyes and invites you to peruse my projects.

For those of you who’ve been following along the past few weeks, tomorrow I play a round of golf. Yikes! Hopefully it all goes well and I don’t lose too many golf balls. Will update you next week.

Mood boards, Grayscale & Style Tiles

John Miyao — Fri, 13 May 2022 16:06:15 +0000

Last week was very design centric. We got to play in Affinity Designer again, which I always enjoy. Now that we have the tools and experience to build a responsive webpage, we switched gears to learn the more emotional side. How to create a feel for the page using colors, spacing, fonts, image placements and so on.

Mood Boards

Throughout the coarse, everyday we’ve been sharing examples of inspiring visuals. That could be a graphic, photo, layout, font or anything we deem visually appealing and inspiring. It’s been a fun way for us to see each other’s styles and also broaden our horizons as we all have our own tastes.

Now that we’ve had a couple month’s worth of visual inspo, it was time for us to slap them onto a canvas (digital of course) and create a Mood board. It was essentially our first step in organizing our content. I separated mine into real world content and colors as shown below. I didn’t put much thought into the placement of my images other than placing similar colors near each other. That’s just what appealed to me.

In our second iteration with the mood boards, we played around with size and spacing. This allowed us to see how different images can work together. Some images might harmonize and others may clash, but we have to move them around to find out. When one image is really small next to another that’s really big, what kind of feel does that create and vice versa? In the example above, I placed the cover of Watch the Throne (the gold metallic square in the center) above four other images to see how that might play with the different colors. I kind of like the dark blue, but that’s about it. This was good practice for us to get a feel for creating different moods with our visual inspos.

Grayscale

We spent a day creating graphics and layouts in grayscale. The idea was to learn how we can visually create feel in the absence of color. I did not realize how much you can do without color and now I’m convinced we don’t need color. We can all have the vision of canines and be happy. Again, spacing, using black versus white all impact the mood. I had a lot of fun creating the images below. As you can see, I didn’t use any white, which I’m only realizing now.

Fonts and Spacing

We learned all about fonts and spacing. Well, as much as you can learn in a day when there’s entire academic and professional disciplines in this field. You may not realize it, but fonts and spacing play a huge role in the design and feel of a website. For example, this blog uses sans-serif for the headers and a serif font for the body text. It would probably feel different if the headers used a serif font and the body sans-serif.

Through great design, you can intentionally guide the users’s eyes along your designed path. There’s a principle using “small, medium and large”. That could be for both text and spacing.

In one of our assignments, we researched a layout that utilizes intentional spacing and size and recreated the layout with HTML/CSS. Here’s the layout I found.

I thought it made great use of the “small, medium, large” principle where your eyes go straight to the “Barca Clock” (large), then below it you read the sub-header (medium) and to the left you read the details of the project (small).

I also liked the way the text lines up with each other. The top of the project details on the left lines up with the top of “Barca”. It kind of centers the content horizontally on the page. Then the middle block of content is packaged together on its own, aligning on the same left line. It appears that the middle block of content has about the same amount of padding all around it. This helps emphasize the content and makes it the “feature” of the page.

What stood out to me the most was the “R” in “Barca” and the “L” in “Clock” both being left aligned together. It appears that’s that middle of the page vertically. It adds to the focal point. I also think having “Clock” indented and breaking from the left alignment gives the body of text some character.

If you’d like to see my recreation, you’ll have to click here!

Vocabulary word of the week:
Rag: The shape that a body of text makes.

Style Tiles

Every time I type “style tiles” I want to type “style tyles” instead. Is that just me? In any case, we were introduced to style tiles, which is a way for a designer to give you an idea of the general look and feel of a product (in our case a website). It’s like a one-pager for the potential final product. It may include a color palette, different button options, examples of a header, sub-header and body text; basically any of the major components you expect to see or use on a site. It’s all packaged together in one, organized page. Check out this dribble collection for examples.

It took me a while to figure out what exactly goes on a style tile and it’s something I’m still learning. Here’s examples of my attempt at some style tiles for my personal project site. You’d likely have more than one style tile to allow for different styles or feels. Below, I was going for clean and modern.

That's it for now! Have a great weekend!

HTML/CSS Practice Replicating Starbucks

John Miyao — Thu, 05 May 2022 19:09:34 +0000

This week we got to take a reprieve to relax, catch up or do whatever we pleased. I knew I couldn’t take a full week off without any sort of practice. I’m still so new that if I don’t practice, I’m liable to forget some things. So you can probably guess what I used this week for, PRACTICE.

If you don’t get that meme, watch this.

For practice, I decided I would try and replicate a website. Our mentor threw out some sites he thought we could recreate so I chose a Starbucks. It looked relatively simple. Just a header, large footer and the main body section looked like it was split in half vertically with a few different rows all inside an inner-column. Something I know I could accomplish using our trusty flexbox we’ve been learning. Here’s how I broke down the page:

Each color represents a section or div. The blue section is the inner-column that everything is wrapped in. The red sections are flexbox rows. Each row contains two equally sized divs (in yellow). As you can see, the red div change from a column (in mobile) to a row (in web). As far as layout, I think this was a fairly easy one to recreate. Also, it only has two views, mobile and web. We’ve already created more complicated sites that included a tablet-sized view.

Of course I built this mobile first! (See how quickly I learn?) I built it out section by section starting with the header, which was the most complicated. In mobile it only displays the logo and a hamburger menu icon. That’s fairly simple, but as the width expands the links appear. I initially had some trouble spacing them out, but fortunately we have our resident mentor on call to help us through these issues. A simple flex-grow solved my problem.

Because I wanted my replica site to look exactly the same, I spent ~~some~~ too much time making a lot of tweaks to the padding and margins. I suppose I could’ve looked at the inspect tool to save time, but that would’ve taken the fun out of it and it wouldn’t be nearly as rewarding.

Some CSS Tools

Building this replica Starbucks allowed me to use some CSS tools that we’ve learned over the course.

1. Creating custom fonts
Instead of styling the h1, h2 or p properties directly. I created classes for each type of “voice”. For example, h1 would get a class of “loud-voice” and I would style that class. This proved beneficial when I decided to change the h2’s to h3’s, but didn’t want their style attributes to change. I simply changed the elements in the HTML doc and it was like nothing ever changed :)

2. Creating Custom CSS Properties
This was a very new one we learned. In CSS you’re able to set colors in a parent element. I used two different shades of green a lot throughout the page so I set the colors in the body like so.

Now anytime I wanted to recall those colors, instead of having to remember the confusing alphanumeric hex number, I just had to recall the name I gave it, “starbucks-light” which was much simpler.

3. Row Reverse
When I did all of my practice flexbox challenges, I could not think of when row-reverse or column-reverse would be useful. Well guys, it was very useful! When you scroll through the Starbucks site, you see that the photos and its pairing of text switches every row, like this:

Instead of having to switch the html foreach row, I simply had to display the flexbox as “row-reverse!” It was quite satisfying to have a practical use for it and see it actually work.

4. SVG image
I decided to use an SVG image for the location pin icon. I don’t know if I needed to use an SVG as the icon doesn’t really need to scale, but I thought it would be good practice to incorporate. What lead me to go with an SVG for icon is the hover state. I need it to turn green when hovered and since I knew I could do that with an SVG, i did it.

Overall, getting the structure of the site down was fairly easy. I mostly found trouble in the some of the spacing and figuring out which parent element I thought would be best to style. I also got hung up on the transitions from mobile to web and how the images and text aligned. I know this bit is unimportant as people don’t normally resize their screen views, but for reasons unexplained I needed my replica to interact in exactly the same way.

Now it’s time for the final test. Which is the real site and which is the replica? Top or bottom?

Or you can view it for yourself here and here. But maybe you already visited my replica site as I linked it earlier ;)

A couple notes about my replica. I did not apply any links as I didn’t feel it was necessary to copy/paste every link. There’s probably about 50 or so. I was also unable to create any click-actions such as the drop-downs or hamburger menu as we haven’t learned those functions yet.

In any case, I was quite pleased with the results and it was really good practice for me. It required me to think through the layout for both mobile and web and create class names that were intuitive to the site. What should I build next? Comment below!

I almost forgot! Twitter count remains at 33. I’ll take responsibility as I haven’t been tweeting lately. I don't know what to tweet!

More Flexbox Practice

John Miyao — Sat, 30 Apr 2022 17:46:04 +0000

More Flexbox Practice

It was a bit of a slower week, but fruitful. I’m even more flexible as I got a ton more practice with Flexbox. We had a couple of fun challenges where we just copied some images with a bunch of shapes inside of shapes inside of shapes and so on.

After the first challenge, I learned to start from the inside out! At first, I wanted to size the parent shapes by creating a min or max height/width. However, it’s much easier to just let the content inside of the element help form the shape of its parent.

I also came to the realization that width is generally fixed by the hardware. Our monitors, phones etc can only be so wide and sites generally stick to that width. However, length can be infinite. I know you’ve doom scrolled late at night trying to get to the bottom, but there is no bottom!

To give you a visualization, here’s the first challenge we were tasked with.

The Challenge

The Result

The most difficult part might’ve been naming my elements. Do I go with numbers, letters, colors? I ended up naming them by color followed by “a/b/c” like this:

`<div class='turquoise a'>`

That way I could differentiate the elements with same color, but also style them together when needed. You can view the code here for the first challenge here.

The second challenge, I think I did a much better job as I started from the inside out, which removed the need to define most of the element’s sizes. I also named them by their color, but used “nth-of-type(1)” if I needed to style a specific element(s). This was something we learned over the week.

See the difference in code here.

Challenge 2

Result 2

Mac Apache MySql PHP (MAMP)

We got a quick intro to MAMP. What is MAMP? Let me try to explain.

MAMP allows us to store our webpages locally on our computer. It uses its own scripting language, PHP to file, store and push the pages onto the local web environment. It allows us to publish websites to just ourselves, like a private screening of a movie. It also allows us to break up our pages so we can better organize our code. For example, our HTML doc can have a separate docs for the header, main content section and footer. PHP will stitch the docs together and display it as if it were one fluid doc. Something like this:

What’s the benefit of splitting up your code into separate docs beyond organization? I think the main benefit is about changes. Say you use the same header or footer for multiple pages on your site, which is a pretty common practice. What if you wanted to add a temporary message on the header for all pages? Perhaps you’re running a holiday sale. Well, instead of editing the code for each individual page, you can edit the code on just the header doc instead and your code on each individual page of your website remains the same!

If there’s a shortcut with no negative side effects, I’m all for it! In the coming weeks, we’ll be learning more about PHP and it’s scripting language. I’m looking forward to it!

MY UPDATED NBA TAKE:

Warriors over Celtics in 7 games.

Flexbox Practice Challenge 1

John Miyao — Fri, 29 Apr 2022 22:41:19 +0000

Some fun practice with Flexbox. Boxes, in boxes in boxes.

John Gets Flexible

John Miyao — Fri, 22 Apr 2022 02:31:41 +0000

This is my first time posting here. You can follow my weekly blog here, but I'll also start posting in DEV.

Last week was a lot of catching up as I was sick the first couple days, but I was able to get back on track by Sunday. It was a heavy week of material, but I feel much more capable of building out a responsive website. In fact, you could say I’m starting to feel like a real Web Dev!

Twitter Follower count: 33 (no change 😐 , you know what to do)

The Flexible Box Module

We learned the flexbox model. This truly is a game changer for me. I could not imagine being a developer before this was created. It makes it 1000% times easier to structure elements on the page and gives you better display control at varying screen widths. The elements’ positions are flexible.

Let me try to show you how it works. You set the parent element to “display: flex”. This allows its child elements to display in a row or column. It would look something like this:

By default, the elements are always aligned to the top right, at the “start” of the parent element (I assume this is carried over from how we read text in the Western world).

Now that the child elements are behaved and orderly, you can decide if you want them to display at the top of the parent element, center, bottom, top right, bottom left, reverse order, etc. You can also automatically adjust even space between the child elements in case they’re prone to fighting.

To set where you want the children to sit, you can do either or both of the following:

justify-content: This aligns the child elements across the main axis. If they’re sitting in a row then it’s the x-axis because they’re sitting on the x-axis. If they’re sitting in a column, then the main axis is the y-axis because they’re aligned up and down. Here’s an example:

In the above example, we move the children to the bottom right by justifying them to “flex-end”. Remember the default is always top right, so we don’t have to align the items to the right, which the parent element reads as the “start”.

align-items: This aligns the elements on the cross axis. If they’re sitting in a row, then it’s the y-axis and if they’re in a column then it’s the x-axis as shown below.

As you can see, the child elements are now aligned at the “end” of the cross axis.

If we were to apply the following code, where do you think the child elements would display?

If you said, top middle, you’re correct! The default “justify-content” is going to be “flex-start” (the top) so we’re just moving the column to the middle of the parent now. And just to show off, here’s an example using “reverse”, which is does exactly what it says and “space-between”.

Super Responsive Layout Challenge**
**
After we learned about everything flexbox, we applied our learnings to a super responsive layout challenge. It was probably our hardest challenge to date, but it included everything we’ve learned up to this point and I think we all did a pretty good job. We were tasked with recreating this image at the various screen sizes:

As you can see there’s three different screen sizes, some images, a header, footer, main content area and some background images at the larger screen sizes.

Approaching this challenge seemed gargantuan at first glance for me, but once you start breaking down the elements it becomes easier. I can solve for the smaller elements and piece them together. I first wrote out the HTML structure of the page using inner-columns in each section (header, main, footer). This is something we learned and it looks like it applied in this case. In fact, most website use some form of an inner-column.

Learning from my past mistakes, I also started MOBILE FIRST. I made sure the CSS applied to the small screen first. Once I was able to get everything to look good on mobile, I expanded the screen width to 680px, where I felt like my content should switch to the medium screen size. I added the new background elements and shifted some of the content around from “column” to “row”. Then I moved onto the large screen size.

I definitely ran into some issues along the way, but was able to figure most of them out. It usually required me adding a parent element or applying CSS rules to the parent instead of the individual element. It was a fun challenge because it hit on everything we’ve learned and it was satisfying to use that knowledge and create a working, SUPER RESPONSIVE layout.

Since I started working on mine the day the 2022 NBA playoffs started, I decided to fill my content with just that. You can check it out here. I actually somewhat pleased with how it turned out. I will probably fix it up a bit and maybe even switch out Trae Young for Kyrie Irving (this’ll make sense if you visit my site).

More Typography

This class wouldn’t be called Design for the Web if it didn’t include DESIGN. We explored more typography and how it presents on a page, in our work a business card. We watched Ellen’s short class on Typography. It’s quite interesting in how type faces and it’s presentation can create different moods and feelings. After watching Ellen work through a business card, I tried applying her principles and created my own.

My name is vertical mostly because I thought it was fun. But I did align the top and bottom with the two other blocks of text. It’s also the biggest font size as that’s the main piece of information. I also thought making it vertical brings the eyes there first.

I changed the ampersand color to red to highlight that I do both development AND design. I thought it gives the card a little more character too instead of all black.

I spent probably a good hour rearranging the text to see what looked best in my opinion. While the content is minimal, there are a million different ways it can be displayed. I enjoy learning this part of the course. We’re not just putting content on the web and calling it a day. We’re learning the underlying motives and goals and how to use text, spacing, typography, colors etc to achieve those goals.

This was a long one, but thanks for hanging in there!

By the way, I predict the Celtics and Warriors going to the Finals with the Warriors winning in….6 games.