Day 5 – Hi-Fi with Figma
Well I arrived nice and early again and got my cup of tea well needed today as the long weekend took up a lot of energy. (running)
So, we got started at 10am as normal and reviewed one of the student’s projects which looked ideal as it was out of date and needed an overhaul.
Then we reviewed the homework which was a Lo-Fi Wireframe of the Happy Café web page. We checked through mine and was pleasantly surprised that everything looked right. The quick changes I made yesterday afternoon did the trick. Dimitri wrote W W W on the board and we had to decide which of the question words we needed for our wireframes. They were What, Where What?What do we need? Where will we put it? And what do we do next?
We were then introduced to the programme Figma we signed up and Dimitri explained what it was for and how it was used. It looked very complicated in the beginning. This programme is used for making the Hi-Fi Wireframe which could be shown to the clients if it was done correctly.
So, we were taken through the basics step by step by Dimitri and made tons of mistakes and the confusion of using a Mac computer to a Windows was half of the problem. It was so much easier using the big wide computer screens than the small one on my laptop.
We started making the Happy Café web page in a Hi-Fi Wireframe. We had to be walked through this very slowly as it was so easy to make silly mistakes and it was important to make it look right. We got the beginning done and we went to lunch.
Back to the food court for half of us and the others brought in their own food. I had some very tasty chicken and some fruit for desert 70 Baht so it’s cheap but didn’t taste cheap.
After the break, we spent all afternoon learning about the correct spacing and how to group and paste the different symbols to the worksheet. Again, with a lot of trial and error, I got something that looked decent! Dimitri said what is the text size/ how much space here/ this is too close etc.
I went back and corrected the mistakes and it looked great! I felt that today’s lesson was really useful we were in there doing it I understand we have to learn the other stuff before and it’s the process but I really felt that I had achieved something when I left the class today.
And left the class looking forward to finishing the unfinished page for homework and to find another simple web page to make a Hi-Fi Wireframe – an important part of UX.
Day 6 – Hi-Fi & Grid Wireframes
Well, I was excited about last night’s homework but after I had finished the Happy Café Hi-Fi Wireframe, I started on the find an easy webpage to replicate. Found one but struggled to get it started properly It was getting late and didn’t want to disturb Dimitri so I soldiered on tried everything I could remember and think of but it just didn’t work. The size was too big couldn’t change the original page it was a mess.
So, I went in without doing the homework feeling let down, I told Dimitri how I had tried for 1-2 hours trying to do it but he was very happy that I had made the effort and that I had been playing around with it. I asked another student a question about the original page and he fixed that in seconds and another problem that had been stressing me out last night and both were sorted in seconds. From here I was away. It was still before the class so I cracked on and started doing the homework that I couldn’t do before. Once I had the beginning sorted the rest seemed to fall in to place.
What we did next was to check another student’s Happy Café Hi wireframe to find mistakes that they had made either with the placement or the spacing or sizing. This was a lot of fun as you could write any comment you wanted.
I had the best student’s work and was surprised how many mistakes I found. As it looked great at first glance till you get in closer and use the measuring tool. This tool shows you the exact gaps when you have spaced something and whether it is in the center or not. When we had finished, we got our own back and looked at the comments and used them to change any mistakes. I found only pleasant comments about my work so found that funny. I did notice a few and corrected them.
After this Dimitri looked at each person’s individual Hi-Fi Wireframe and pointed out ALL the mistakes and helped with correcting them. Somehow, I was the last to have mine checked which was great as it gave me time to finish my homework as well as look at the other student’s mistakes. I nearly had my homework finished and Dimitri Said “Simon your turn!”
So, we started on mine and corrected some simple mistakes on the Logo and Hero. It was at this point we discovered it was lunch time. We went to different places but was ok to break up a bit.
Had a great lunch and got back and Dimitri was showing me how the web site I had chosen wasn’t using the 12 columns as we were. Which I had already realized when I was placing the symbols on the page.
Day 7 – Responsive design (Hi-Fi) and Getting content from the Client
I was excited again to do the homework as I thought I knew exactly what I was doing, however, that was about 60% right. It soon became apparent that changing it to fit from a computer screen to a mobile telephone screen was a bit harder than first thought.
I went at it and with a lot of mistakes and lots of Ctrl + Z I got it to the closest I could. I am 90% happy with it and I know Dimitri will find problems/mistakes especially as I couldn’t find out how to change some of the measurements from 15.6. It should have been 15 tried 4-3 different things but had no luck. Very interested to see how this is fixed later.
We were all there at 10am and got started we had a quick chat about the homework then we did the same as yesterday someone different looked at our Hi-Fi Wireframe for any mistakes in sizing, spacing, and incorrect placement. This time I found it a lot easier to find mistakes. This was from correcting my own mistakes yesterday and doing the homework yesterday. It was a little different because it was on the mobile phone set up which made it a lot smaller.
Things to look out for were inconsistent spacing numbers and placement that was either not at the end or not centered correctly. Once the person who was finding mistakes had finished, we had to correct the mistakes. I had lots of comments that boxes sizes were not rounded off to simple numbers, but when I clicked to change the size, they were right. I was confused! Whoever, there were some mistakes that I had to correct.
After that was finished Dimitri dug much deeper into each on the wireframes and found a lot more mistakes than we could. Mine were mainly sizing issues where I hadn’t given enough space in between different sections. I wasn’t sure how much space was too much or too little on the mobile wireframe. We worked on this up until lunch.
I forgot to mention we had a choice of what to have and luckily everyone wanted the sandwiches again which made me very happy. I ordered the same sandwich and it was as good as last week!
After lunch, we were finding out about collecting, the contents from the client. We had a small presentation about what was important and not important. Then we had to make a Content Audit and learn all about what we needed this was just a spreadsheet that listed everything we needed in each page. We had to get the information from our wireframes. We only did the home and started on the About page.
Then things went a bit wrong. Dimitri started talking about dropbox and I was finishing something else. The others had already got themselves a Dropbox account, my problem was I used an email connected to a company which told me I needed audiation so this was confusing and put me well behind everyone else. I had to make another account with a different email then it was asking me to download Dropbox which was confusing. As I was trying to fix this Dimitri was telling everyone about the homework and was showing how to create an element so it would make the top and bottom of the page easier.
I was still trying to create the folders and send an e-mail while this was happening and then it was time to go home. So, I didn’t get the email and folders finished or to understand how to do the homework fully. I guess I will play around and do it the best way I can. This was a little frustrating as I was trying to get my head around one thing then two other things were all happening at once.
I am sure That I will do it ok when I get into it!
