Day 8 – Today’s Web Trends & Intro to Adobe XD
I was feeling good because I had spent a lot of time and effort into making the homework look good and to be correct. It was fun making the Hi-Fi Wireframe as it does look like the Happy Café web page.
Now that the new MRT stations near my condo had opened I decided to try coming to WCB by MRT. It took me around an hour compared to the other way which was 1 and a half hour and it only cost 33 Baht. I got to WCB too early so I wandered around and got some breakfast. I got in at 9:30am and got set up. I decided to continue with the Starbucks project that I hadn’t finished.
When everyone arrived, we chatted about the homework then we used a website called “The Wayback Machine” This website was able to show you the history of the web site. From when it started to present day. We were looking at how the styles had changed. From sizes, colours, being very cluttered to the type of content. This was very interesting.
We had to search some of our own web pages to see for ourselves. We were then told to search for the most popular styles in 2020 we came up with around 10 different styles. We then had to use Milanote to create a mood board for the different styles but coping pieces from web pages using Nimbus. This was a lot of fun as it got me thinking more and more about the styles.
Once we had all finished, we had to show the class what style it was and why we chose it. We all came up with very different and great examples on the styles.
After, we had presented it was lunch time. I went and grabbed some simple food then got back and chilled.
After lunch we were introduced Adobe XD this is a very nice tool it is very similar to Figma but it has a lot more things that you can use. We were introduced to how each little thing worked and then we did examples similar to Dimitri and practiced how to use all the different things. This is great hands on experience and finding out how to correct mistakes. We made different shapes then filled them and inserted letters and words. We also made a navigation bar from scratch which looked excellent because we used set colours and fonts. This was good but I became frustrated with one part that wouldn’t work then discovered that I couldn’t install Adobe XD on to my laptop and I knew that this would hinder my learning experience. So, I will find a way to get around that.
The homework was a lot of fun we had to watch a video and learn new shortcuts and ways to use Adobe XD very useful just hope I can remember some of them. Then we had to make a mood board for Bugsy’s Barber shop. We had to find inspiration for their website pictures, colours, fonts and designs. I may have gone a little over the top with this but had a lot of fun finding things that I liked.
Day 9 – UI Elements (XD)
Got there nice and early and finished off yesterday’s diary. Then everyone arrived and we started talking shop. Dimitri asked about the homework and told him that I really got into this one as it was a cool subject. We went through all of the pictures and explained why we likes it and all about the similarities form the different barber shop pictures.
From here we learned about UI what User Interface means and went through them briefly next, we had a sheet with spaces to write what we thought the different sections were there was about 10-12 seemed quite straight forward but ended up getting most wrong. So, next we went through a useful PowerPoint telling us the different parts. Things you see on the page and take for granted but don’t know the names of these things. And what they are used for. Once we had finished, we had 4 pages of names of page tools that we had to match with actual pictures from web sites.
Again, I thought this was going to be easy but still got a few wrong. The quality of the pictures did hinder me a little bit. But that’s all part of the fun. From here we each had to go on to actual web pages and find the items from the page we were given. I had Hero, slider, video and gallery so mine were quite easy.
We saved pictures on Milanote mood boards and then shared them with the class.
This brought us up to lunch time where again a couple of us went to the food court and had some delicious and cheap local food.
After lunch we all shared with the class and discussed what they were used for and why we chose these. Next we opened up Adobe XD we remembered some of the tip we had learned in the previous homework then watch Dimitri show us what we had to do next. He showed us the different ways to make something more visible on the page (hierarchy) and how to make people select which items and in which order. Which I found to be very useful there were about 10 different ways to show how this can be done such as bigger text. Text that is out of line larger images and so on. We then went on to practice this by making our own on XD by using the navigation bar that we made in the last lesson it was great to keep practicing what we have been learning.
Day 10 – Design Rules (XD)
Got there early as usual and worked on some of the stuff I hadn’t finished then we chatted about the rules we talked about yesterday and came up with something easy to remember N SCRAP = Negative space, Space, Colour, Repetition, Alignment, Proximity this was for the Hierarchy of UI.
Then we went through the good and bad web pages this was very useful as we could see: how to use the hierarchy to benefit us, and how not to use It. We seemed to spend a long time on this but it was very useful. I say this because we started typography and had to go through it before lunch. Learned a bit about the Sans script and how to use some scripts. Then It was lunch. Same as normal but it wasn’t up to its usual standard.
Back to the classroom and we started the colours lesson. I found this lesson a bit frustrating and a bit hard to understand what Dimitri was trying to explain. I tried to do it, but it seemed my choices of colours lesson and brightness were not correct even though we could use any colours we liked.
And to make matters worse using a Mac when I am used to Windows was really making it more difficult this day.
I felt a little disappointed that I couldn’t get this lesson. I went home spoke to a few people and chilled out. Then got together with my son and we did the homework together.
We started by watching an interesting video on typography then, we watched the next video which was about the colour wheel. This was the thing I had so many problems with earlier.
I wrote it all down and we worked together and I felt that I understood it a lot better from seeing the video. I think this was due to actually seeing the colour wheel moving and giving actual examples, this worked so much better for me. Then we looked for web pages that use certain colours and why they use them.
Day 11 – Web Typography (XD)
Went in feeling much better and ready to learn some cool new stuff, we started off by going through our colour choices and Dimitri gave us some examples of how to use them, which was very useful.
And how certain web pages use the same colours. Like hospital use a lot of green (Peaceful growth and health) and dentists use blue (trust, dependable and strength)
Then we opened up Adobe XD and Dimitri gave us some examples and we had to practice how to make buttons shapes and masks. This was a lot of fun because these will be used in the future. We made lots of different styles and shaped ones up to lunch. Sandwich day!!! Had the same one again and it was still amazing!!
After lunch we were introduced to Divi and we were shown how to make the template grid and make sure it was the right size by using a picture from Unsplash once we had the grid, we worked through a very basic wire frame. Then we made all the components for the Home page. We started with the Logo and Navigation bar on to the Hero and customer pictures with paragraphs and a footer to finish it off.
This was great as we had the choice of what we wanted to use for pictures, typography, buttons, colours and contrasts. This took us right up to the end of the lesson. We had it looking good the Dimitri told us to personalize it and change up the pictures that were the same and make it the finished article.
This is going to be very hard as I have not been able to install Adobe XD on my laptop as it only has windows 7 so I will try to get it changed over the weekend.
[text-blocks id=”59324″]
