Interactive Design : Project 02–03 : Working Landing page, Microsite Design and Website
Interactive Design GCD60904
NAME: Sea Hirayama
I.D: 0347596
COURSE: Bachelor of Design in Creative Media / Taylor's Design School
●Instructions
●Lectures
Week 11 :
For this week, we learned how to create the website landing page with using samples from bootstrap and so on. Especially, we put carousel and card etc.
Interesting Link for Carousel
Week 12 :
For this week, we discussed about how to create own web design. Also we got some feedback as well. Honestly I couldn't attend this class because I got fever, but I can see after this with recorded lecture.
Sample Bootstrap File :
Useful Link For Web Development :
Sample Website
You can download the file and refer the code :
You can download the file and refer the code :
●Exercises
Week 11 :
So from this week I tried to create web landing page with Dreamweaver in Adobe. Of course, I tried to create this with some tutorial and template for details as well. For this web design, I needed to divide section class to compose them clearly. For the main, top page, I just divide the brief introduction and image. Also I put the button to see my works quickly that is why I tried to link with them between the button and images slide.
The wireframe:
“SEA HIRAYAMA ART E-PORTFOLIO”
– My art e-portfolio
– For producing my art stuff as portfolio
– There is included the details such as exhibition information
4 tyoes buttons :
SEE WORKS
SEE MORE
SEND MESSAGE
SNS(Instagram, Facebook and Twitter)
– My art e-portfolio
– For producing my art stuff as portfolio
– There is included the details such as exhibition information
4 tyoes buttons :
SEE WORKS
SEE MORE
SEND MESSAGE
SNS(Instagram, Facebook and Twitter)
Color sheme :
– Background : White #ffffff
– Font, Tittle : Black #000000
– Hover : Blue #0900FF
Font Style :
Archivo Regular 400
1.1 The top page, title page (10/06/2022)
1.2 The top page, title page (10/06/2022)
1.3 The illustration slide with preview(10/06/2022)
1.4 The illustrations for this slide (08/06/2022)
1.5 The illustration slide(10/06/2022)
1.6-7 The menu section page with preview (10/06/2022)
1.8 The menu section page (10/06/2022)
1.9 The about me page with preview (10/06/2022)
1.10 The about me page (10/06/2022)
1.11 The contact form page with preview (10/06/2022)
1.12 The contact form page (10/06/2022)
1.13 The footer with e-mail resister with preview(10/06/2022)
1.14 The footer with e-mail resister (10/06/2022)
Week 12 :
For this week, I tried to create this website move smoothly with watching some tutorial. Also I focused on change the css each sizes such as phone and so on.
2.1 The css (14/06/2022)
2.2 The css (14/06/2022)
Smooth scroll with css by Cording Journey
How To Make An Infinite Autoplay Slider by The Mute Dev
Marquee-like Content Scrolling(HTML and CSS) by Cording Journey
How to create a Slide/Carousel with just 5lines of code. by Hacker Rahul
Pure CSS Smooth Scrolling Animation With just 1 Line of code by Tech2 etc
Website Design Using HTML,CSS & JS Landing Page Design Smooth Scroll Animation Slick Slider by LearnDesign
Learn CSS Media Query In 7 Minutes by Web Dev Simplified
CSS Media Queries Tutorial for Responsive Design by Adrian Twarog
A new way to write media queries is coming to css byKevin Powell
After I create this landing page design, I import into Netlify.
After week12, I tried to create the other pages for art e-portfolio as well. First of all, I made the news page which shows some recently news of me such as work with another artist as a model and opening the bland. To add, I tried to create the header and the button which bring you top page with learning in some website and lecture in YouTube.
After I created the news page, also I tried to created the exhibition page which is for informing and showing the exhibition details. I tried to show with chronology to see clear that is why it doesn't show some details in 2022.
For works page, there is three pages for showing my random works. And I created the about me and contact page to show my profile and the form of getting touch.
●Final design for working landing page
The link of this site:
The Final Design for Working Landing Page / MOV
●Final design for microsite design
The link of this site:
The Final Design for Working all page / MOV
●Feedback
Week 11 :
General feedback
For this week, we learned how to use Bootstrap and so on. Start form the template, we can adjust it to create own website.
Specific feedback
Go through this lecture and own design.
Week 12 :
General feedback
Same with last week lecture, we learned how to create web landing page with using some site. Also we discussed own page and solve how to show it.
Specific feedback
No feedback
Week 13 :
General feedback
For this week, someone who need feedback and improvement discussed how to make own web page design well.
Specific feedback
No feedback
Week 14 :
General feedback
In this week, we didn't have lecture.
Specific feedback
No feedback
●Reflections
>Experience
>Observations
>Findings
>Further readings/references
スラスラわかるHTML&CSSのきほん 第2版
The explanations are very easy to comprehend because they are printed in colour rather than black and white, and this is a classic introduction book that can be read as if it were a picture book.
This book is also suitable for individuals who wish to gain an intuitive image of HTML and CSS because there are numerous sample codes.
デザインの学校 これからはじめる HTML＆CSSの本
This book is intended for complete novices in programming as well as those who have "tried and failed to learn HTML and CSS in the past..." or "couldn't keep up with other books because they were too challenging..."
It's ideal for people who wish to lay a solid basis for progressing smoothly, since you may master the fundamentals in depth, from basic knowledge to often used tags.
You can also practise with simply a notepad because the book is constructed in such a way that you don't need to install any software
HTML5＆CSS3 デザインブック
This is a classic HTML and CSS book for individuals who want to learn not only HTML and CSS code, but also the production process as the story continues through the process of actually building a website.
HTML5/CSS3 モダンコーディング
This book, written by a frontline engineer, covers coding techniques through the creation of three websites.
It is simple to have a sense of accomplishment after making the sites, and you may finish the book without losing drive.
This book is intended for people interested in learning different web design methodologies and techniques from the site creation cycle.
Comments
Post a Comment