INTERACTIVE DESIGN - PROJECT 1, 2 AND 3
INTERACTIVE DESIGN - PROJECT 1, 2 AND 3
23RD OCTOBER - 26TH NOVEMBER (WEEK 9 - WEEK 14)
NG VEYHAN (0349223) / Bachelor of Design (Hons) in Creative Media
INTERACTIVE DESIGN
PROJECT 1, 2 AND 3
Instruction
Practical
When we were instructed to look for a subject for the website to be designed in Project 3, I wished to design a website that was related to my hobby, more specifically art. While thinking what could be used as a subject, I started to browse through various sites selling art related products.
As a hobbyist artist, I am quite familiar with the various drawing software that is available. I searched up the website for Easy Paint Tool SAI, hoping to get some inspiration for the design that I would make. However, once I entered the site, it was painfully obvious that the design of the site was really dated. While the software itself was continually updated, the site had been pretty much neglected for many years.
(Fig 01, Easy Paint Studio SAI Website)
After seeing this site, I decided to take on the task of redesigning my own take on the interface of this site. The graphical elements used in this site were very old, as even the white that was used on the site was very reminiscent of websites in the 2000s. The arrangement of text was also very simple, while it wasn't bad by any means, it was a little boring. I had also noticed that there was a lack of use of any buttons throughout this site, only hyperlinks.
To further get more ideas on tackling this project, I continued to browse the sites of similar art related product sites. For sites such as Clip Studio for drawing software and Huion for peripherals, they all shared similar layouts. One design that caught my eye was the design for Xencelabs products. The website was designed very elegantly with undistracting photos, keeping the interface clean and easy to navigate.
(Fig 02, Xencelabs Product Page)
The navigation bar at the top was something that I was heavily inspired by. While I am currently not skilled enough nor have enough time to implement a search function or a language change function in the navigation bar, the categorization of the pages according to the terms on the bar was very neat. I had also liked the use of a large graphic right when entering the page, to catch the viewers attention.
After I felt that I had gathered enough material to work with, I began to work on sketching the landing page of the site first. With very rudimentary rectangles and lines, I roughly planned out where an element could be placed in the composition of the webpage. Following the ideas that I had gathered from the various sites I had visited, I thought that a picture with content at the side would look appealing and the content that followed below would have an inverted arrangement, with the sides of the content flipped to create some variation.
(Fig 03, Basic Layout)
I searched around the internet for some pictures of works created in Easy Paint Tool SAI, due to the fact that I do not own the software myself. I scaled them down to preserve some quality of the image by displaying it in a smaller area. Drawing the navigation bar as well as the footer of the page was easy as it only consisted of solid color rectangles and some text. The only element that required a graphic in these two parts was the Paint Tool SAI logo on the top left corner.
(Fig 04, Creating Landing Page)
For some of the graphical elements such as the buttons, I used a rectangle to create its basic width and height, then added circles at each end to create a rounded button. It looked very flat against the white background of the site, therefore I added a shadow behind the button to give it some depth.
(Fig 05, Creating a Button)
For the font, I used Bahnschrift as it looked tidy yet didn't look overly formal, which would conflict with the more open nature of art and the theme of this site. I decided that I would switch the fonts over to Helvetica when turning it into a webpage as Helvetica is much more web-friendly than a more obscure font.
After some quick photo manipulation and drawing, I managed to create a mockup of the landing page that I would use for the site.
(Fig 06, Mockup Landing Page)
- A price page showing and comparing the differences between a free trial and paid version fo the software
- A page detailing the features and uses of the software.
- A page showcasing community created content and guides.
- A page for getting support for the software.
- A page containing all the previous updates for the software.
Deciding upon what pages I would create for the rest of the site, I continued to sketch the rest of the pages. Again starting with the extremely rough shapes, I laid out the plans for the "price" page first, as I liked to create a complete mockup of a page before moving on to the next.
(Fig 07, Price Page Sketch)
I really liked using shadows when creating boxes, as it helped separate the box from the rest of the page, even if they are the same color. I think it also fits well with the elegant aesthetic that I wanted to achieve with this webpage. At this stage, I did wonder if these elements would be easy to transfer over to HTML code.
(Fig 08, Creating Price Page Boxes)
Creating rest of the pages was a rather simple affair. In order to keep the website lightweight as well, I recycled some of the graphical assets such as the buttons, as it would keep the size of the file as low as possible. As large images would take up a large amount of space, I thought it would be more efficient if the pages were more uniform.
(Fig 09-11, Three More Sketches)
For the community page, I had to do a lot of video searching online. Tutorials that were released for SAI over more recent years were few and far between. Perhaps this was due to the old age of the software or the emergence of more streamlined and modern software such as Photoshop and Clip Studio being household names that are currently dominating the market.
(Fig 12, Community Page Mockup)
(Fig 13, About Page)
The three icons used for each section of the support page was drawn up by myself. As I felt that downloading a vector graphic online might yield a non-transparent background PNG file or just bad resolution and quality in general, I decided to take it into my own hands to craft some simple icons, which I also had control of color over.
(Fig 14, Support Page)
When working on the page for the update history of the software, it was mostly a very labour intensive process and copy and pasting the wall of text. I found it odd that the software hasn't been updated since 2016. I might have mistakenly copied an older log of updates for this mockup. I would have to dig around a bit more in the site and see if there's an update log with updates within this year.
(Fig 15, Update Page Mockup)
Once the mockups of each page was finished, I had to begin turning each of these pages into a proper HTML document. At first I was deciding whether to use a unique CSS file for each individual HTML file, but after searching online regarding this topic, many responders tend to state that the most efficient way is to create a shared CSS file, which requires less fetching in the context of a webpage.
Thus all of the webpages created for this Project would have the same code linking the same CSS file.
(Fig 16, CSS Link)
First I wanted to complete the common assets that would be shared throughout all the pages in the project, in this case it would be the navigation bar at the top of the page and the footer at the bottom of the page. Creating the first set of HTML codes for the bar was just to add the basic text and logo image to the page. Links were also added to the text to the future pages.
(Fig 17, HTML Code for nav bar)
Most of the code controlling how the navigation bar would look was done on the CSS sheet instead. At this point, I realized I hadn't set the font for the page yet. Instead of using a local TTF file for the Bahnschrift font, which I was unconfident in doing, I decided to link the Helvetica font to make the site more web friendly. I set for all the elements in the body of the page to display with using the font.
(Fig 18, Inserting Font)
Going back to the topic of the nav bar, I set overflow to hidden to prevent any content from leaking outside the nav bar just in case. The background color was obtained with a color picker online. For the position, I wanted it to stay at the top of the page at all times, thus I used a fixed position, with 0 margin from the top to make it stay at the top of the viewport, and the width was set to 100% to keep it a bar. A light shadow was also added to give it some depth and sort of indicate that it stays on "top" of the page, which was made by setting a high z-index value.
For the arrangement of text on the nav bar, I specified the text that were also links and set the float to the right. I centered the text to the box and added padding to align the text in the very middle of the box. I also set the color of the text and disabled any decorations.
(Fig 19, CSS Code for the Nav Bar)
(Fig 20, Top Navigation Bar)
To add some interactivity to the navigation bar, I wanted to make the box with the text highlight when it was hovered over. I just added to code specifying the action on the text links, and changed its background color and text color when it was either hovered above or clicked on.
(Fig 21, Interactivity for the Buttons)
(Fig 22, Interactivity Demo)
The navigation bar was pretty much done, and now I moved on to designing the footer of the page. This one was a lot more simple in practice, as I just created a div with 100% width and added a table with links inside. I added a class for each row of the table to isolate and add a color for text for each row.
I added background color for the entire footer to create its basic area, and some padding to keep the table away from the edges. For the top row, I kept the text bolder as they were supposed to add as headers for the rows below. I also set this row to have blue text to distinguish it from its content. The other two rows were set to have white text.
(Fig 23, Footer HTML) (Fig 24, Footer CSS)
(Fig 25, Completed Footer)
Now it was time to create the content that were individual for each page. Starting with the "Landing" page, the page was separated into two halves with largely identical compositions. Starting the the top half, I created a div that would contain the image to the side, and then the text that would be displayed alongside it, as well as a button being the child element of the text.
I set the image to float at the right, As I had already created a fade effect on one edge of the image in Photoshop, there was no need for any code to create the fade. The position of the text and images were also set to absolute to allow it to display side-by-side with the other content, and their position and size were adjusted accordingly.
For the bottom half of the page, the code was pretty much copy and pasted, with some adjustments to the code. The images and text content were changed, of course, and the image was set to float left and the position of the other elements were also switched around.
(Fig 26, Landing Top Half HTML)
(Fig 27, Landing Top Half CSS) (Fig 28, Landing Bottom Half CSS)
(Fig 29, Completed Landing Page)
Moving on to the next page on the list, I worked on the "About" page for the second one. It was largely similar in type of code when compared to the first page. Just with more content and vertical height. Copying the code for the navigation bar and footer, these two elements were easily inserted into this page as it had already been defined in the CSS.
As this page only served a largely informational purpose, there's no link leading to other pages in its contents. Therefore this page only consisted of inserting images and text and then arranging them according to the sketch that I had made earlier.
Standard fare of just aligning images to the center of the page, and text to the sides. Each "row" of the content shared roughly the same code to preserve its uniformity.
(Fig 30, About Page HTML)
(Fig 31, CSS for 1 Row of Content in About Page)
(Fig 32, Completed About Page)
For the third page, it was the "Products" page comparing the features of two different versions of the product, one paid and one free. According to the sketch that I have created, I added a large box with a div, and defined its height and width beforehand, and fit the elements into the box afterwards.
I had created a PNG file for the button before working on this page as I didn't know how to create a box with round edges in HTML. I just added the text first with no arrangement as that would be done later on in CSS. I added the image of the button as a child in a div class and the button text under the same parent element, then adjusted the width of the button to 80% of the div box. For the parent div, I set a link so that when either that the button image or text is clicked, the EXE file of the program would be downloaded, which I have gotten from the official site for SAI.
(Fig 33, HTML for One Content "Box" in Products Page)
I added a large drop shadow behind each of the two boxes containing content, otherwise its identical color to the background would make it blend in. The font sizes for each element in the box was adjusted accordingly. Since the main boxes had set widths and heights in terms of pixels, it made it easy to set margins from the top of said box to arrange the text.
For the title of the box, the background of the text was easily set with a width of 100% of the box then the defining the height of the box. Aligning the text to the center of the box, and the margin from the top to align it center vertically, it made a colored box surrounding the text evenly.
(Fig 34, CSS for one Content "Box" in Products Page)
Completing the code for one of the two boxes on the page, the code was duplicated to create the other half to save time. The content was again changed to its correct info and background for the title of the box changed to distinguish it from the other box.
was also added below the two boxes create a little space between the footer and boxes to prevent the drop shadow of the boxes overlapping the footer.
(Fig 35, Completed "Products" Page)
(Fig 36, Easy Paint Tool SAI v2 Update History)
I wanted to create a collapsible list for each of the update versions on the page. I looked it up and conveniently W3schools had a tutorial for creating one. It involved the use of JavaScript, which was something I had not expected to use in this project.
To test out the use of this script, I first prepared the content for the collapsible content. I classed the main text to be clicked as "collapsibles" and gave it a <strong> tag to give it a bolder font. I would then class everything that goes below a title as "content".
(Fig 37, Creating Collapsible Content)
(Fig 38, Collapsible List JavaScript)
(Fig 39, Completed Update Page)
The fifth page to work on is the "Community" page, where there would be multiple video links to content created by the community to guide newer users. I added the title of the page as well as a title for each category of the table.
The layout of this page consists of a table with each cell containing a video. I wanted to display the thumbnail of each video in these cells, however downloading each individual thumbnail for every video would be a very inefficient process. To circumvent this, I used the links generated by YouTube's API to fetch an image URL generated for every video according to video ID.
(Fig 40, HTML for Table Cell)
After checking that the thumbnails were displaying correctly, I used CSS to add a grey background to the table, and having set different classes for the thumbnails, the video title and name of the poster of the video, I arranged them so that they displayed neatly in the box. Since the class for each part of a cell was already set, all the other cells had an identical composition.
I also made sure that the hyperlinks in the page inherited the color of the parent elements text so that it didn't turn blue with the underline. I also collapsed the border on the table so that it didn't show two lines between two cells, which I felt was annoying to look at.
(Fig 41, Community Page CSS)
I repeated and finished up the other row of videos, and the page for community videos was completed.
(Fig 42, Completed Community Page)
For the final page of the project, I planned out a page to reach out for support. I had already exported the graphics for the icons in Photoshop beforehand, therefore the process of creating this page was more similar to the steps used in the page for "Products".
I created a div with a set width and height, and inserted the icon graphics as a child element. The title for each box was also added as a header rather than a paragraph text so there's automatically a higher font weight assigned. The three boxes used in this page were almost identical, and just needed some tweak in its contents.
For the CSS, I set the boxes to have a width and height measured in pixels, which should prevent them from scaling with the size of the viewport. A box shadow is also added for the same reason as the boxes in "Product" page, to create a distinguishable outline. The position of each of these boxes would be set to absolute in its own entry to display them side by side. The size of the icons in the boxes were also set in pixels, so it will stay proportional.
(Fig 43, HTML for Support Page Content)
For the CSS, I set the boxes to have a width and height measured in pixels, which should prevent them from scaling with the size of the viewport. A box shadow is also added for the same reason as the boxes in "Product" page, to create a distinguishable outline. The position of each of these boxes would be set to absolute in its own entry to display them side by side. The size of the icons in the boxes were also set in pixels, so it will stay proportional.
(Fig 44, Support Box and Icon CSS)
While sometimes it might be difficult to read text that is aligned to the center, which is something that I picked up from my typography module, I think that it would've been fine in a smaller line of text such as a title or name. I aligned the titles to the center of the page with a larger font size. As the content of the boxes is more lengthy, I set the width of these text boxes to 90% to prevent any clipping with the edge of the box.
(Fig 45, CSS for Content in Boxes)
(Fig 46, Completed Support Page)
Completed Work:
PROJECT 1:
PROJECT 2:
PROJECT 3:
HTML FILES:
PDF/PNG FILES:
Reflections
WEEK 5: I wasn't quite sure of what to do for the project yet at this stage. While a few ideas came to mind, I felt that they weren't interesting enough to warrant spending a semesters worth of work into. I should continue looking for more sources of inspiration and hopefully I'll come across a worthy topic.
WEEK 6: The basic idea of the site I wanted to work on was decided today. I really wanted to do something related to art and I just happened to come across an interesting site that I could make something from. Just in the nick of time too, as I managed to submit the landing page design mockup for Project 1 on time.
WEEK 7: After having created the landing page mockup of the previous week, more work has been put into designing the rest of the pages that are going to be used in the project. Looking for inspiration from different sites proved to be rather challenging as not many sites share the same aesthetic sense and therefore have designs that don't mesh well together.
WEEK 8: This week was a lot more relaxed as there was no lecture due to being the Independent Learning Week. It gave me a chance to chase up on any lost progress I may have had. I also begin to look around more in the sites related to coding so I would at least have a basic idea of what I would be doing before starting coding the site itself.
WEEK 9: In this week, the coding for the site itself had begun. Despite having done some study by myself in preparation for this portion of the task, I still felt like a fish out of the water when it came to coding in HTML. This week I had only managed to finish the navigation bar of the site and it was already quite draining.
WEEK 10: I coded the more simple pages first to get an idea of how to code a number of pages with only one CSS file. As the CSS file got longer I felt that it became more and more difficult to find what I was looking for in that wall of text. Sometimes the viewport in Dreamweaver wouldn't match up with what I would see in Chrome and I got quite irritated at the lack of consistency.
WEEK 11: I feel that I've gotten a little more experience in coding websites now. What I can do might be basic, but I think I've gotten down the use of classes and IDs for the elements to a decent level. Now I can edit certain class of elements so that repeated uses of the class would create a nice and consistent look.
WEEK 12: I focused less on the work in this module for this week, as the work from my other modules had taken priority. I only did some minor coding to the pages for the community videos. While it wasn't much progress in this project, I was quite happy with what I achieved in the other modules for this week.
WEEK 13: With two more pages left to code at the start of the week, I was feeling concerned about whether I would have made the deadline for the project. As I felt that I hadn't have had enough practical experience to accomplish this set of tasks quickly. I did manage to complete it however, with some time to spare as well.
WEEK 14: It was quite a rush as most of the assignment deadlines were approaching in this week. While I had largely completed my work for this module, I still needed to tweak the code a little more as there still some visual bugs caused by some error in my code. After that all that's left was the exporting of the project and submission.
Comments
Post a Comment