Interactive Design - Exercises
Avery Ong Xuan Ting / 0344462
Interactive Design / Bachelor of Design ( Hons ) in Creative Multimedia
Exercises
LECTURES
Week 1 / Basic Site Evaluation :
Week 2 / UI vs UX :
UX button should physically press down when you click it.
- UX Designers focus on the structure and layout of content, navigation and how users interact with them.
- The types of deliverables they produce include site maps, user flows, prototypes and wireframes, which are more focused on the underlying structure and purpose of the software.
- The visual appearance does impact on these, but can be created as a separate layer that is applied
over the top.
UI would be a series of buttons and how they look.
- focuses on anticipating what users might need to do and ensuring that the interface has elements that are easy to access, understand, and use to facilitate those actions.
- brings together concepts from interaction design, visual design, and information architecture (IA).
Golden Rules of Interface Design:
- Ease of Learning
- Efficiency of Use
- Memorability
- Minimize Errors
- Satisfy the User
Structure of a web page:
- Understanding structure
- Learning about markup
- Tags and elements
HTML code :
-Headings <h1></h1>
-Body Paragraph <p></p>
-<b>Bold</b> & <i>Italic </i>
-ordered list <ol> <li></li> </ol>
-unordered list <ul> <li></li> </ul>
-Hyperlinks <a href=" "><a/>
class exercise
Week 3 / Adding image in HTML :
HTML:
- <img src=“url”>
src attributes specify the location of the image
- <img src=“img_flower.jpeg” alt=“Flowers in Denmark”>
alt attribute is added to described the image
- <img src=“img_flower.jpeg” alt=“Flowers in Denmark” width=“500” height=“350”>
specify the width and height by adding those attributes
Web :
Three common image formats for Web
- JPEG (Joint Photographic Expert Group)
- GIF (Graphics Interchange Format)
- PNG (Portable Network Graphics)
Extra Markup :
- ID attribute
- Class attribute
- ID and Class attribute
- Block elements
- Inline elements
Week 4 / Introduction to CSS :
Week 5 / Consultation for Project 1 :
Lecturers give us the feedback of our Project 1 idea. We need to create a Google Slide to present our idea and progress.
Week 6 / Flex & Float :
We learned how to create Html and CSS in Dreamweaver. Besides that, we also learned how to attach Style.css to Html.
Before the Flexbox Layout module, there were four layout modes:
Block for sections in a webpage
Inline for text
Table for two-dimensional table data
Positioned for explicit position of an element
Flexbox : Makes it easier to design flexible responsive layout structure without using float or positioning.
Float : The float property specifies how an element should float.
Week 7 / Responsive Website + Bootstrap :
INSTRUCTION
Week 1
Exercise 1 :
We separated into groups, discuss and choose 6 good websites and bad websites from the given websites:
fig. 1.0 ; bad websites
fig. 1.1 ; good websites
Week 2
Exercise 2 :
Create a html document in notepad with three sections:
- Introduction for yourself
- Experience with interactive design
- Expectations for interactive design
At least 2 paragraphs each section. Include hyperlinks and lists and either ordered/unordered lists.
Images can be included but it is not compulsory.
fig. 1.2 ; progress in notepad
Week 3
Project 1 :
- Find a topic / idea of for the website you are doing.
- Look for reference / inspiration. Layout should look tidy and clean.
- You can do the wireframe layout first without the final design (colours, images).
- Make sure you have a clear "Call To Action" for your website.
- Project requirements are minimum 3 sections for your website. Example, intro, about, contact, production etc.
- Remember to include navigation menu and footer as well.
- You can use Photoshop, Illustrator or any software that you prefer to do the design
- width: 1280 pixel. height: no maximum, adjust base on content.
The topic I chosen for this website was my favourite cartoon : Winnie The Pooh. I plan to design a fan page for it. After browsing some elements and reference, I started to design in Photoshop.
Week 4
Class Exercise :
We follow step by step to create the website during tutorial class. It wasn't as difficult as I thought before I learned these coding in Dreamweaver.
Exercise 3 / Layout Exercise :
Create a new HTML document using the content and images given in Google Drive. Do this exercise in Dreamweaver.
I faced many issues when doing this exercise. It wasn't as easy as I thought like the last exercise. Maybe this is because I wasn't very familiar with Dreamweaver yet so I took a lot of time to explore and do this exercise. As a result, below is my final outcome :
fig. 1.4 ; progress in Dreamweaver
Week 6
We follow the instruction during today's class to create flex.html, style_flex.css, float.html, style_float.css.
fig. 1.5 ; flex.html
fig. 1.6 ; style_flex.css
fig. 1.7 ; float.html
fig. 1.8 ; style_float.css
Week 7
Class Exercise :
After the briefing of how to create responsive website and bootstrap, Mr. Lun send us the example of bootstrap exercise to let us to try the class exercise.
fig. 1.9 ; example
I use a lot of time to understand how to use bootstrap. I think bootstrap is the most complicated code compare with other. Fortunately, I come out with the same outcome as the example given by Mr. Lun after trying many code in Dreamweaver.
fig. 1.10 ; coding in Dreamweaver
Comments
Post a Comment