Makeover 3

            As of last week I worked on moving the contents around to different position and put in a new background color (Refer to last week’s blog for more information paste link here). Unfortunately last week’s design was a little mush up so this week I took one page (news.html) and tried to take things apart to create a partial design (view picture below).

            The picture above shows that my idea is to take away the icons in the nav bar and move it to the side to be replaced by a vertical menu and the other contents would be almost as it is in the original design with only color changes.

            Through the week I had a confusion of what was to be done, which brought me to borrow another member’s theme and edit what the project supervisor asked to edit to make it look better. Basically, I checked out the project and copy over Sean Chung’s theme and edited it so that content box on home.html with the large icons would be curved and took away that horizontal black line. Later on I found out that we can still work on our own design by using original files and to put in new colors.

            Overall, it was a week of a little more progress of understanding more about HTML and CSS and glad the confusion of what needs to be done is over. For this upcoming week will experiment on finding color schemes/backgrounds that would make the site to have the potential to make it look appealing before moving on to moving things around to make a complete new site.

Makeover 2

            For this week on my Kukui Cup website project I took apart one of the webpages and try to reconstruct it into the possible design I want. Also, pick a background that involves less mixture of colors. Basically, I went from colorful to a simple background approach.

            Last week I was thinking more of a nature background color and trying to move some contents to some places. Refer to last week’s blog for more information: Makeover. This week while reconstructing I took away that nature background color and went with simple white background with a greenish background for content boxes. As for the text color I went with a darkish green color to bring out the background of the content boxes.

            I was successful in getting the bar with links (we call it nav-links) to be on the side and act as a side menu. This time I was able to keep it within the container but out of the header (the part in the website that contains the Home button, user and floor info etc). As for the other contents I wasn’t too successful with moving it to the positions I want.

            Overall, my problem is still with how to get the contents to move to a certain position on a page. Whenever I move it I have trouble figuring out which kind of tag or code to type into CSS to actually place it nicely at a certain spot. That is why this time I was able to have a simple background and move some content, but the others wasn’t successful so things does seem mush up together. I hope that soon I will figure out a way to get everything place nicely and apply it to every page. 

Makeover

            After a few weeks of just going in circles without much progress on the redesign of Kukui Cup or even applying responsiveness to the website, I finally took a step to understand the code of where or what piece of code makes up the image etc on the Kukui Cup website.

            Initially I took apart the Home button and the nav-links section (a bunch of links that needs to some other pages) and played around without the images. I was successful in getting it to display just text and still retain its original position.

            Then later on it transition into experimenting with understanding where the other content boxes are located in the html file by their div tags. Also, going through the css file to see how the shape that contains the content (e.g. news feed) are created.

            For the redesign of the site I was successful in removing the images from the nav-links and recreated it into a left side kind of menu. I also picked lighter green background and kind of beige color for the content boxes. Here’s the piece of code that I’ve modified to display the nav-links in a left side vertical menu.

Then I experimented with trying to move the other contents into places to make it evenly spaced out to look like organized columns. However, I was unsuccessful in getting the other contents to switch spots to other places within the container. Although, trying to rearrange the content boxes wasn’t successful, but I will continue to experiment and research ways to place the content boxes in certain spots and learn more CSS and HTML coding.

Color Scheme

            For this week I have been told that for website design we shouldn’t make use of dark backgrounds. Also, the problem of selecting a good background color or even just what picture to use as a background is harder than what I initially think. With this discussed I realized that in web designing besides having features that meets the memorability, learnability etc requirements from HCI (Human Computer Interaction), background is also another important aspect in web design. If the website has a complementing background along with other content then it can appeal to the user and attract more users.

            With that in mind I got introduced to this website call method.ac which has couple other pages that helps people play around with things that affects how appealing a website is; such as font spacing. One of the pages was related to color, color.method.ac, which is like a game that allows user to find the perfect color for hue, complimentary and so forth. Therefore, I played around with the colors and I find it really hard to find a good combination of colors. However, I found out that sometimes some combination that we think wouldn’t work turns out to actually be a good choice, as indicated by the site. Here’s one of the times that I got a good selection of color when I was playing around with the colors.

            In the picture above the outer circle is a darker shade of green and the inner circle is a lighter shade of green. Initially I never thought these two similar colors, only difference is in the shade, would actually be a good selection. I always thought that a good color selection involving two different colors would be a good selection because one color would bring out the color of the other.

             Overall, this week was a good chance for me to play around with colors and set my mind to decide carefully of what I can use for the background of the Kukui Cup website. For upcoming weeks I would like to test out how to implement code to create a new design and test how it should look like in mobile or tablet design.