Interactive Design Final Project / Design, Exploration and Application
4.11.2022 - 2.12.2022 (Week 10- Week 14)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Interactive Design
Final Project / Design, Exploration and Application
INSTRUCTION
Design, Exploration and Application
To Create an Entire Website Design
Develop the LP design created in the previous project and design a full website including a minimum of 5 pages.
Refer to the following article for the process so far.
Coding Process
From here, I create a design for the lower pages to match the LP.
Fig.1-1: Top Page
First, I duplicated the top page and created a template for the lower level pages.
Fig.1-2: Create the Template
Reduce the height of the section that was the first view and create a section for the page title. Then, while keeping the contact form and footer, we created an area in the center where the content can be placed.
Fig.1-3: Contents Area
The template is now complete. The area framed in red in the figure above is where different content will be inserted depending on the page.
The template has also been uploaded to netlify and can be found at the following link.
Fig.1-4: Products Page
To set up sections for product introduction, we used columns to create areas of various sizes.
Fig.1-5: New Image
I then design each image in Illustrator for use on a new page.The final completed website is below.
Fig.1-1: Top Page
First, I duplicated the top page and created a template for the lower level pages.
Fig.1-2: Create the Template
Reduce the height of the section that was the first view and create a section for the page title. Then, while keeping the contact form and footer, we created an area in the center where the content can be placed.
Fig.1-3: Contents Area
The template is now complete. The area framed in red in the figure above is where different content will be inserted depending on the page.
The template has also been uploaded to netlify and can be found at the following link.
Fig.1-4: Products Page
To set up sections for product introduction, we used columns to create areas of various sizes.
Fig.1-5: New Image
Final Outcome
Final Project Website Design (Page-top)
Fig.1-6: Screen Shot of my Website Design(28/11/2022)
List of pages producedTotal 6 pages
REFLECTIONS
ExperiencesSince I had already learned coding in Project 2, I was able to complete the project without much difficulty. But maybe there are improvements I am just not aware of. As I added various features, the CSS gradually became more and more complex, and the amount of code became too much. I would like to improve my skills to write more organized code.
Observation
Through independent research, we have found that the professional world has certain rules for naming classes. This makes it easier for front-end engineers to modify code written by other engineers. I was not that concerned about class names and ID names in this assignment. Also, the CSS files seem a bit scattered. I would like to make more effort in the future, such as placing similar items closer together.
Findings
Although the content of this project is the same as the previous Project 2 reflection, there were still many cases where the code did not work as expected. For example, when linking from a Button tag, the target blank did not work and the link could not be opened in a new tab. I have looked into several solutions, but nothing has happened after applying them. Bootstrapping is very useful, but I think it is likely to cause some problems. As I understand the habit of dealing with bootstrapping, I would like to further explore other ways of creating it.
Comments
Post a Comment