Edita Chew En Thung / 0357357
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
PROJECT 2 : Working Webpage
Final Project / Design, Exploration and Application
Table of Content
1. LECTURES
2. INSTRUCTIONS
3. PROCESS
i. FINAL
4. FEEDBACK
5. REFLECTION
LECTURES
Lectures are in previous tasks.
INSTRUCTIONS
fig 1.0 | Module Information Booklet (MIB)
Week 8
We are tasked to design and develop a single page microsite centered around the theme of lifestyle. The end outcome is to craft an immersive and visually appealing microsite that effectively communicates the chosen lifestyle theme and engages users through thoughtful design and interactive elements.
PROCESS
Draft Work (sketches):
fig 1.1
I started working on the draft sketches I had on my chosen topic of my future Design firm, Ukiyo Creative.co and to prepare it, I need to have a Design portfolio to showcase in the microsite.
I wanted to have a minimalist yet simple website for easy navigation and surfing for the user and audience. The call to action button should be contacting us or by simply getting in touch with us.
MOCKUPS
fig 1.2, 1.3, 1.4, 1.5, 1.6
I created several mockups to further arrange my ideas and images, buttons, etc onto figma to get a proper prototype of my microsite.
Final Mockup:
fig 1.7
I added a whatsapp icon that will be present as the user scrolls, it will redirect them into our whatsapp contact for further inquiries.
Website Development:
Testing (book flipping):
I started coding the base of the html in dreamweaver and created a CSS file for the styles later on, but I carried on with the html code first as it was the most crucial part to have the base of the microsite.
Then, after that, I started experimenting the flipping animation on css and html
I played around with the html, css and js to create and try new things like this book flipping animation that can be done using the scripts.
This was how the site looked like afterwards.
Then, I added "Arimo" from google font and downloaded it to place into my css.
I made the layout of the webpage and made the about section 50% text and 50% image + -.
This was when I tried to inset the image into the book flipping element and it was not a good outcome.
The header bar was then added with the following, Home, About, Services, Our Works and Get in Touch and making them able to navigate to different sections of the webpage.
The logo was also added to navigate to the top of the page "Home" when it is clicked.
I added the images for the home, about, etc.
I tried a flipping book animation and it didn't work out as much, it did flip but not as nice and proper as it should be. I did use javascript so it was hard for the html and css to work as well. So after I changed into a pdf embedded code to showcase the portfolio, but ended up going for a carousel to better fit the mockup.
It was either a carousel or PDF embedded code to choose from, so I chose a Carousel for easy navigation and much more interactive.
Our Works section
This is the code for the carousel of "Our Works".
Carousels require the use of an id for carousel controls to function properly.
It specifies that this <div> contains a carousel.
The .slide class adds a CSS transition and animation effect, which makes the items slide when showing a new item. Omit this class if you do not want this effect.
The "Indicators":
The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user is currently viewing).
The indicators are specified in an ordered list with class .carousel-indicators
The data-target attribute points to the id of the carousel.
The data-slide-to attribute specifies which slide to go to, when clicking on the specific dot.
The "Wrapper for slides" part:
The slides are specified in a <div> with class .carousel-inner
The content of each slide is defined in a <div> with class .item . This can be either text or images.
The .active class needs to be added to one of the slides. The carousel will not be visible if not placed.
The "Left and right controls" part:
This code adds "left" and "right" buttons that allows the user to go back and forth between the slides manually.
The data-slide attribute accepts the keywords "prev" or "next", which alters the slide position relative to its current position.
Then it is connected to a bootstrap JS file online to handle the interactiveness of the carousel.
OUR SERVICES section HTML & CSS
it was made into a gallery displaying the pages of services ukiyo creative.co had to offer by adding a class gallery and separating them with <div> </div> individually so that they align.
Whatsapp button:
HTML:
First, we need to add the HTML for the WhatsApp button within the relevant section of the webpage. This button will be an anchor tag that links to the WhatsApp API URL.
CSS:
Next, I styled the whatsapp button to make it look attractive and ensure it integrates seamlessly with the design of the webpage, making it float and stick to the bottom of the screen when users scroll.
This process ensures that visitors/users can easily contact us via whatsapp with a click, enhancing user experience and accessibility.
Then all the images are placed and a better description was also inserted into the About Us section.
Welcome Button:
HTML
once clicked, it will direct the user to the about section. I added style that includes background colour and when hovered on top of the button using the mouse pointer, it will change to another colour, I chose a darker colour.
After placing the image one by one, for the gallery of "Our Services", it was done.
Contact form & linktree and Insta button:
First, create the HTML structure for the contact form. This form will include input fields for the user's name, email, and message, along with a submit button.
HTML
The action attribute of the form points to a backend URL that will handle the form submission.
CSS
Next, style the contact form to match the design of my webpage and ensure it looks attractive and user-friendly.
Social buttons (linktree & instagram)
I found a good looking button and added to my code and tweaked here and there to get the desired outcome of the links to socials.
After all that, I check the links and jumplinks and tested the webpage out for many times before I uploaded to netlify for submission.
FINAL WEBSITE SCREENGRAB:
FEEDBACK
- Has to be a real firm.
- Make 5 mockups on figma
- Looks okay for the look of the Design firm, it's minimalistic.
REFLECTION
In the Interactive Design module, there are various techniques that can be utilised for creating ideas, selecting and enhancing the Microsite project. first, I initiated session on idea generation to consider concepts and graphics in the design. Thus, I could explain my ideas to others in terms of wireframes and prototypes and ensure they fit the users’ requirements. I tried the microsite several times with different users, collected information to conclude about the website’s performance. This process, in fact, contributed to enhancing the design and allowed focusing on the principles of interactive design more.
I also paid attention to the assessment of my performance and self –development throughout the project. I asked my classmates and instructors which thing I could work on, and this helped me comprehend what I needed to do. Thus, I could realize what aspects of the work needed to be improved based on the users’ experience. Further a point was get acquainted to industry professionals and this made know how interactive design could be done best. These proved that learning never stops and with that, a good microsite was developed well on the way at the comapany. Indeed, my experiences validated the necessity of user centered design and consequently the results further highlighted the role of feedback and of continuous lifecycle in the development of successful projects.
.jpeg)
Comments
Post a Comment