Get started to front end dev.
Writing this week’s blog in Bankok airport. This week, I wrote codes from Japan. I am more focusing on the front-end side development.
Before I ended my internship, I approached one of our designers in the company about the workflow of design in a Saas company. She was helpful and showed me how she drafted the design and how she communicated with front end engineer about the design. I read quite a lot about how to turn an idea into an app and many readings introduced the process from wireframe to prototype to implementation. However, my designer colleague shared with me a bit more details that are great enough for me, a student who never worked on an actual software project for business purpose.
So basically the process will be, firstly, designer wireframe the designs(focusing on how it looks), followed by the prototype, which focus on the interaction between website and human, the UX part, and then it goes into the development. In the designer’s wireframe, designer will draw the design using tools like Illustrator or Photoshop, and then she will mark down the colour codes used in the design. She usually will write down about the details of each component (pixels).
This process is very different from what I usually did in a school project, where I will just draw a bit on the paper and code directly on html without a proper design wireframe for reference. I found this is a good way to spilt the work between designer(graph/interaction) and front end engineer. In our assignment 1, I worked with the designer and translate her pixels into the html, which makes me understand more about the responsibility of different roles in the front end side.
Another thing I learnt is from Udacity actually. Yep I am not a quick learner and never get proper training about front-end dev. Hence, my code in the past is very messy, without any structure. The positioning of different elements are messed up too. Before I worked on this assignment, I got to watch the course from Udacity, which teaches me to break a design draft into different boxes. From that point, I could continue work on the margin and padding of each boxes. In the course, it shared about the reason behind the grid systems, (like in Bootstrap) usually have column size from 1 to 12. Basically divide an area into 1 to 12 parts will actually cover most of the area division that we want.
Lastly, I found it has been so hard to travel in the day time and work at night. Hence, the last reflection is, well, never book a trip too in advance, never skip lessons again! :P