INTERACTIVE DESIGN - EXERCISES

-

Week 1-Week 6
Phoebe Ansel (0340165)
Interactive Design
Exercises
INSTRUCTIONS


Exercise 1: Creating a Web

For this week, we were given the task to create a web about triathlons using the content that was given to us. 

This is my Process: 

fig 1.1 screenshot of dreamweaver

fig 1.2 screenshot of Dreamweaver 2


fig 1.3 screenshot of the website from browser

fig 1.4 screenshot of the website from browser 2

This is the link for the website:
http://127.0.0.1:64221/preview/app/index.html


Exercise 2: Designing a Page Layout

For our second exercise, we were given the task to create a landing page layout for photoshop using the content that was given to us.

This is my process:


fig 1.5 HTML codes 

fig 1.6 CSS codes




fig 1.7 screenshot of landing page sections 1

fig 1.8 screenshot of landing page sections 2

fig 1.9 screenshot of landing page sections 3

fig 1.10 screenshot of landing page sections 4

fig 1.10 screenshot of landing page sections 5

Comments

Post a Comment

Popular posts from this blog

Professional Developement Week

-
REFLECTIVE REPORT As this semester is my final semester, it was compulsory for me to attend  6 workshops or webinars during Professional Development Week. All the webinars I attended were very insightful and meaningful, and I learned a lot from them. Here are some of my key takeaways. I joined 3 different webinars on the first day, the first workshop I attended was the " Financial Literacy for Fresh Graduates " workshop by Maybank. This webinar taught me so much, including the budgeting rule, which states that individuals should split their money 50 percent on needs, 30 percent on wants, and 20 percent on financial goals. Furthermore, adhering to a budget plan is critical for tracking spending prior to generating the budget. Maybank also assisted me in gaining a better understanding of some of the elements. The first is Investment Preparation, which entails self-assessment and the creation of emergency reserves while understanding risk tolerance. The second section is Steps ...
Read more

APPLICATION DESIGN II - FINAL PROJECT

-
Image
Week 1 - Week 14 Phoebe Ansel 0340165 Application Design II Final Project  INSTRUCTIONS     Final Project For our project, we had a collaboration with the business school and IT school. We were tasked to create a mobile app for the business school. They wanted to create a virtual fitting room app that would allow users to see how the clothes would fit them virtually so that wouldn't have to try them on. We were first divided into 2 groups to work on the user flow, user journey, and wireframe.  We did our work on miro: We then had a meeting with the business school students and made changes after receiving feedback from them. After doing the user flow and user journey, we started working on our wireframe. The idea was for both teams to create wireframes and then choose and combine them together to create a better version of it. my group's wireframe We had a meeting again with the business students and also showed Mr Razif our work, he then chose which elements ...
Read more

TYPOGRAPHY - FINAL PROJECT

-
Image
30/10/19 - 20/11/19 (Week 10 - Week 13) Phoebe Ansel (0340165) Typography Final Project LECTURES INSTRUCTIONS PROJECT Week 10 For our final project, we were told to create protest placards  about our belief about design and society. We had to bring a 5-7 foot long stick, a A2 size cardboard, some markers or paint, newspaper, and chinese ink. I decided to use the phrase "Design is Empowering, Enlightening, Endless" fig 1.1: sketches for protest card fig 1.2: final design of my protest card  Week 11 This week we were told to create posters by digitalizing our previous protest placards. We were told that the design does not have to be exactly the same. We were also told to use the given typefaces. I created several designs for the poster. fig 1.3: screenshot of my illustrator artboards (initial ideas) Week 12 After showing Mr Vinod and Mr Shamsul the designs, I decided to choose and improve the first poster I created. This is the design I c...
Read more