Blog

The awwwards.com website was down when I started this assignment; after a lot of attempts, I searched for award-winning websites. Out of the few that came across, I really liked the design of this page: https://nakashimawoodworkers.com/. I like the logo in the title bar and centered on the page. I like that the drop-down menus appear as you hover on the furniture and philosophy on the navigation bar. I enjoy that the images seem to move as you scroll down. The colors are warm and sharp; the sage green in the subheadings comes out and connects to the green of the images of the trees. The font is legible and friendly; I can see myself applying some of the design, like that of the navigation bar hover and logo placement.

My favorite design of those awwward winning designs has been the Telepathic Instruments website. The video with the seemingly melting orchid graphic is groovy. I really enjoy the flow of the website; the colors and rounded corner squares of the images bring the retro 70’s look that pairs with the product. The rounded gray responsive navigation bar is a design I would replicate once I understand how to create it. I would also love to replicate the shop page. Its white background and slightly rounded square products list are easy to read and very attractive. The pixelated images that come across and transition while hovering are divine.

The awwward design I really enjoyed but think it can be a little overwhelming both visually and to code is https://alpbio.com/. The background bean pod image with cutouts to other pictures of the same bean pod is so beautiful and interesting. The way the heading of Alpine Bio comes together through dots is so visually appealing. I like how the animations pull through and come together as you scroll the website. I like the rounded text boxes, but the dotted words are a little hard to read. I really will work hard to be able to replicate the animations portion of this website. They are necessary as a teaching tool. The cutouts on the images as you scroll onto other images is what I will try to replicate on my upcoming website design.

As we progress, scaling the basics on HTLM and CSS retaining knowledge, and building upon muscle memory are the most challenging. I’m quickly learning coding is remembering to take breaths and triple-check my work. Trying to stay calm and not let the moments of frustration drown out my excitement for learning.

Rules and functions of CSS are what I am currently trying to wrap my mind around. I need to re-read and re-write notes in a way I can visually reference. I need to look up more examples and take time practicing and writing down my insights. As we learn more, I need to work on retention or at least familiarization with visually appealing detailed notes for reference.

I consider myself a creative person, a community organizer with a design eye. As such, I gravitate towards front-end and UX design. I take great interest in user experience design concepts. Having worked and lived in unresourced communities, I understand that having access to a computer or even a high-performing cell phone is a privilege. Let alone having access to high-speed internet. Understanding responsive images and layouts is important.

mozilla-Responsive Design

Mozilla Responsive images

https://www.w3schools.com/howto/howto_css_image_responsive.asp

from my first impression

Responsive design is designing web layouts so that they are flexible and work well across different device screen sizes, resolutions, etc.

Some mobile devices use low-powered in terms of CPU/GPU and available bandwidth. Some didn’t support CSS or even HTML,

The Pluarsight design I find a bit overwhelming. It has similarity groups together; it has continuity. On this browse page, my eyes draw to the videos. Proximity groups subtexts, but it’s just too much. Theres too much information, to much text. It makes me feel anxious.

On the website Zapotec travel, I like the white background and images, but I think it has too many words. The image on the home page does give a sense of closure that encourages scrolling. It is symmetrical and has Common fate with the name of the compant in a different color. It’s a great start.

Do you notice any other graphic design principles applied in these designs?

Learning to build a website is enjoyable. It makes me proud to say I can create a basic website from code. I like knowing that I can insert any picture and size it using code. Not needing to crop before. I’m sure we’ll get more into the scenarios where that is necessary, but for now, it’s cool to understand the basics. 

Something I found challenging about building a website from code was how detail-oriented code needs to be. The smallest line or letter can mess everything up. It’s my biggest challenge; my brain isn’t used to it. I have to rework my brain to go over the code multiple times because I’m the type of person who never reads my texts before I send them. 

Basic instructions on adding a picture to a website: you must find a free picture online to ensure there’s no legal dispute. Make sure that the image is large enough to not be stretched so much that it’s pixelated. Copy the URL. In the body of the code, wherever you wish to add an image. Start by adding the <img element and the src attribute then paste the URL you have copied. Make sure it’s wrapped in quotation marks (“”) and connected to the src attribute with an equal sign (=). Then add the alternative written description of the image using the attribute alt =. Add the size you want the image displayed using the attributes heights = and width =. Make sure the numbers are inside quotation marks. Closing the image code with the >.