Week 1: Making a Website

The first activity we had in our course of digital fabrication involves creating this blog website and customizing it to our will. There was a lot of experimentation that went on in the first couple of weeks, learning to obtain the look that I in particular wanted.

The first step was to pick out the theme. Initially, I was thinking I wanted a pretty colorful site, using some bright stand out colors that won’t necessarily be a pain to look at for long periods of time. I also considered a black and white theme, but it did not seek very exciting in how I can alter the background to my will. After some searching, I settled on the theme called “Satu” which looked like a very basic layout, but the example in the thumbnail did spark some inspiration for an idea for my own page colors.

After I picked out my theme, I decided to turn my imagination into reality and get on Abobe Illustrator to create a simple background for my website. The plain white background to the example of the theme looked nice, but in my mind, I imagined a light teal to deep dark ocean blue for the background. So I used a gradient tool to make a large gradient .png to upload to my websites media.

The actual creation of the gradient page did not take too long, as after I found the colors I wanted to use, I simply needed to use the gradient function built into Adobe Illustrator. An issue arose when I needed to change the size of the background so that the website did not paste a bunch of gradients next to each other which was not my intent. I intended to have one clean gradient through the page. From the image below, you can see all the attempts at sizing the gradient I made before I finally settled on the background I found looked best.

Once I decided on a background, I was experimenting with my avatar which would show on my header and site identity on the tab. I took inspiration from the “Satu” example thumbnail and took a selfie of myself, then used Illustrator to trace my head so that I could black it out completely. I then placed it over the gradient I made for the background with a white circle in between the face and gradient. I was really happy with how it turned out as the header image. The site identity does not have the white circle to simplify how the tab icon looks, as I didn’t want it to look too blurry.

After I made the page look how I wanted it to, I advanced to create an about me page, which was simple as the media system edublogs has is simple, and making a page was easy enough. What was more difficult was the act of creating menus to make navigating my site simpler. The menus seem fairly intuitive to start, but when you want to add sub-menus into menus, it gets a little more confusing. I did not realize that I needed to set each sub-menu to a menu, which sounds simple, but is not made clear until a bit more testing and repeating with the menu creation page. Once I change the status of these menus to sub-menus, under my Projects menu, everything was easy and went more smoothly.

Another important technique I learned about this edublog system is how to embed a URL into some text. This is important as uploading a file or video directly into a page does not seem to work as the file size is too big. To embed a URL you highlight a piece of text and click the chain icon in the toolbar as shown below.

The next step is to paste the URL in the open space given, and then something I like to do is make sure that when the link is clicked, that it opens a new tab, rather than use the same tab. To make sure that the link opens in a new tab, click on the gear icon next to where you paste the link, and tick the “Open link in new tab” option.