INTERACTIVE DESIGN - EXERCISES
30/8/2018 - 11/10/2018 (Week 1 - Week 7 )
Ng Shu Zhi (0327158)
Interactive Design - Exercises
LECTURES
LECTURES
Week 1: For the first week we were given an introduction to the module, explaining the programs we will need and the types of work we will be doing.
Week 2: We had an exercise looking for 6 good and bad web pages designs then we were to explain the parts we thought were good and bad in the designs.
Week 3: We had a lecture on UI and UX, what's the difference, Common characteristics of a well designed web page will depend on the user of the web and Golden rules of Interactive Design, then we were given an exercise to do where we designed a low fidelity tester navigation kiosk for Taylor's University.
Week 4: We had a lecture on typography in web design, the history of it and web safe fonts. Usually people now use google fonts to design their web page since everyone can access it.
Week 5: For this week we had learned about HTML, the structure to a website and began learning about tags, elements, parent and child elements, and the difference between attribute name and attribute value.
p{
font-family: Helvetica;
}
Week 7: For this week we learned about CSS. Class, division and many other methods on designing a layout for a website.
INSTRUCTIONS
WORK
Week 3
Our navigation directory kiosk for Taylor's University where our scenario was for new students who wants to find the Student Life Center to relax because they haven't received their IDs yet.
.
Week 4
[We worked on our first project landing page] Project 1 blog post
Week 5
week 7
Week 8
Week 5
My first html webpage using notepad.
The coding of the web page. I also tested out header 3<h3> and breaks <br> to make it look more organised.
week 7
The coding for the practice we did in class for layouts in addition with the coding for the navigation and logo.
Adding the navigation and logo was a bit tough as it took a lot of research and understanding to get the logo to sit within the navigation without having it be at the top corner of the page.
The layout of the website at the end
The coding for the website's CSS.
Week 8
The layout of the design
The code for the website
The CSS for the website
FEEDBACK
Week 2: General feedback: When presenting our 6 good and bad website designs, we were taught that good design will depend on the target audience, whether the design caters to their need because some websites tnat seemed bad were actually good for their target audience. We learned specific tersm like Parallex scrolling, crawling text, call to action, minimal scrolling was also very important in making a good website, motion graphics, hamburger menu and white space
Week 3: General feedback : We were to think about our target audiences and what may be an appropriate design for them. It is important to label our icons and put a home page for easy access. Specific Feedback: Our group didn't have a home button for when the user goes deeper into the directory. So next time we should always include the home button on every page.
Week 4: General feedback: We were to design a landing page for our celebrity of choice. We had to have a footer, align everything on the page, and look at other website designs to find examples of thh landing page. Making a mood board and colour scheme to the website at the beginning is also a good start. Specific Feedback: I had to align everything on my page and made sure the spacing for everything was consistent. I had a part to my original design for the landing page but after hearing the advice that the design for it wasn't very mobile friendly, I took it out since it doesn't make sense for a site for fans to have another biography of celebrities they already knew and it would've taken up too much space before the important parts.
Week 5: Specific feedback: The landing page design is relatively acceptable and consider okay but can improve on the contrast between color and text.
Week 6: General feedback: For the resume we were to have more information about ourselves. Skills, interest and profile were just as important in the resume. A good example he told us to look at was Nadia's resume as it had a lot of information regarding past work experience and skills. Specific feedback: As for me I were to add more information to my past working experience, profile and skills
Week 7: [No feedback given this week]
Week 8: [No feedback given]
REFLECTION
Experience
Week 1: The introduction to the class showed how different this class in compared to our other design classes in Semester 1. There still will be sometimes when we have to use our brains to design the website but we will have to use our brains a lot for coding too.
Week 2: Finding good and bad web designs were a bit tough since everyone has their own thoughts on what is good or bad. It was actually harder to find good designs than bad designs in terms of usability.
Week 3: At first it was confusing, not knowing where to start and what is a good directory board to take reference from so one of our group members looked up the Taylor's website to get inspiration of content we can put into the kiosk. The later we were told to only do 1 specific scenario and it became much easier after given a direction to go for.
Week 4: It was exciting being able to design a landing page for the celebrity of our choosing. Colour palettes and mood boards are a good beginning to planning a page, then comes the layout plans in a low fidelity design.
Week 5: It was a fun experience going back to html coding as I did it in secondary school. At first the process of trying to type code again after so long went a bit slow but after awhile I got the hang of it again. Then I found w3school for coding online and just started playing around with more code.
Week 6: This time the experience was a bit different because I was sick that day but following the class was still tolerable, then I died for like 15 minutes after taking solvent panadol then came back to life and everything was easier to take it. In summary, I took in the information for CSS but the rest of the class was a bit hazy.
Week 7: We had a lecture then following with tutorials on CSS to learn how to design a layout using CSS. It was straightforward to follow as most of the implementation coding was similar, it was only figuring out certain things like margins, padding and float which was a bit tricky, especially while doing the logo but Mr Eurun's notes helped me a lot in figuring out adding the navigation and logo.
Week 8: We were to do an exercise to make a page following a brief given to us from our tutor before starting our work on our e-invites. I had to refer back to my last exercise a lot to make a layout which uses panels in a row instead of just going down to test out the code just incase if I plan on doing something more complicated for the e-invite.
Observations
Week 1: The introduction of the class showed that this is a very technical class and that Adobe Dreamweaver would be very important for our class, unless we want to try notepad. We were though told that looking on forums for coding can help s get through this class easier.
Week 2: It was much easier to find bad designs for a website than good designs and designs can also vary a lot depending on the type of screen used for display because our group had a problem with the websites looking completely different in another person's laptop.
Week 3: It was easier to design the navigation page after getting a specific scenario to design the interface for.
Week 4: I need to be more conscious about alignment of the page because in coding, we'll be using grids to align our websites.
Week 5: There are a lot of things to consider when doing html code like planning the layout. </> was also very easy to forget after typing a text.
Week 6: A resume requires more detailed information in it for people to really know who they're hiring.
Week 7: Using an external CSS coding sheet is easier than writing the code in the source code.
Week 8: I had referred back to the code from the 4th exercise to figure out many of the problems with my current coding.
Findings
Week 1: This will be quite a technical class and I feel that it would be best for me to take down a lot of notes for coding language and check the coding for website's whose designs I like to refer to what I need.
Week 2: It seemed that since we are design students, we tend to be a little more pickier on designs so it became much easier to pick out the bad designs. Everyone in the class had agreed that the Webby Awards webpage has a horrible design both interface and visuals.
Week 3: We learned about categorising and looking at the target audience for designing something while keeping that target audience in mind while designing. A home button is also very important to leave on every page to a design.
Week 4: Aligning the website to each other is important to make it look neat and clean. Some designs just don't work for mobile versions of a website and sometimes a there are some parts which might just take up too much space so they aren't needed. It is important to also have a good choice of font which still matches the context of the page but is still readable.
Week 5: I found out about w3school while looking for more coding elements to put into my code. It was very helpful in learning code faster as I can type out what I need and a string of code comes up and I can also test the code out on their site.
Week 6: A resume requires a lot more details in the information, CSS is a lot to take in but does make the process of designing a website become easier.
Week 7: CSS is actually simpler to use than HTML coding since it's only coding the design but it can get confusing a bit when it comes to designing to suit different devices as the sizing and font may be harder to make consistent.
FUTHER READING
Week 3
https://blog.hootsuite.com/9-tips-to-creating-a-mobile-friendly-website/
From this website I learned what made a mobile friendly website and what I understood was:
- Keep text short and simple
- Have designs that won't require much change/motion when the screen becomes a smaller size or else it will lag the page.
- Have designs that won't require much change/motion when the screen becomes a smaller size or else it will lag the page.
- Use YouTube videos for your web pages as using YouTube is easier for people on mobile to view the videos.
Week 9
https://www.w3schools.com/howto/howto_css_image_text.asp
I had referred to this website for many of our exercises for coding
Week 9
https://www.w3schools.com/howto/howto_css_image_text.asp
I had referred to this website for many of our exercises for coding
Almost complete. Please read something. Maybe the site that I shared
ReplyDeleteNo further reading?
ReplyDelete