W12- Wireframes Development

 WEEK 12

PRACTICAL

The week of the practical was doing the wireframes development which included low fidelity & high-fidelity. 

LOW-FIDELITY WIREFRAMES





Above shows the low-fidelity that me and my partner done in week 12, and the overall were the same like the sketches last week to ensure the structure for the client and ask for the opinion and feedback for the structure (wireframes).

We did some changes on the high fidelity/mock-up due to need to adjust the photos size and the layout also need to be change for certain pages such as about pages. After that we are also redesign their logo and the banner for them to make the website looks more interesting. 

HIGH-FIDELITY WIREFRAMES




Above are the high fidelity wireframes that me and my partner done. At this part we have also discussed and confirmed with the clients about the designs and did some improvement in the final website. As we mentioned and also client mentioned that they want a simple and elegant style which suitable to used the colour of pink, light pink and also beige colour in the website. The chosen font is the Baldessare. As to follow the requirements, we are using a very simple and normal layout to design the website as it's important to showcase their products, not the website itself. Therefore, we decided to make the website visual hierachy looks very direct that the users can easily understand the brand delivers and also the products.

LECTURE


CLIENT SIDE & SERVER SIDE

The lecture of the week was explained about the website client-side and server side. The client side of a website is where the user may access the material and conduct any actions, whereas the server side, or backend, is the area hidden from users that stores and browses data.




front end- UI/UX
back end- Programmer

CLIENT SIDE


Everything in a web application that is displayed or occurs on the client (end user device) is referred to as "client side" in web development and it's also known as "front-end". It is to design the user interface, layout and all of the things that the student were doing in this subject is doing the client side. The indispensable thing is definitely HTML, CSS and Javascript which the lecturer said that now the market are already have apps like WIX that are having preset for the HTML in the website. People can easily create a website with it. 


SERVER SIDE

On the other hand, server-side website development primarily entails selecting the material that is sent back to the browser in response to queries. It can also be called as "back-end". The server-side code takes care of things like verifying requests and data that are submitted, storing and retrieving data from databases, and providing the client with the right data as needed. The server side are more to coding, development for the programming and connecting the database.



The lecturer emphasized that people don't like to contact with computer, they like to contact and talk to the real person, they doens't ike to share their information to computer, due to there might have the abusing for the personal information such as selling the users information to other people. So, instead putting the contact form in the website, the student have to remove it or replace it with the 3rd party platforms such as whatsapp, instagram, telegram and etc that can let the users to trust and connect with them. 



As the lecturer mentioned in the class, the client side is for designer to design the website but instead the server side is for Information Technology (IT) department to do the programming for the website and stuff. They are meant for each department. If the student is good at UI/UX and also know some of the programming, they can really apply job easily for the web designer position in the industry. It's gpod to learn the knowledge for both design and programming.

Comments

Post a Comment

Popular posts from this blog

A1- Summary

Image
 A1 SUMMARY:   This task has taught me about the design process as a whole. The techniques for designing the logo, website banner, and CV. Furthermore, I discovered how useful logo design standards are; when I utilise architecture and professional rules, the results are more exact and excellent.  During the process of creating the website banner. I learned about the importance of images; they define the overall atmosphere of the website and must be properly chosen. Furthermore, I experimented with several layouts and images to achieve the desired style (as demonstrated in the weekly notebook below). The more I investigated, the more possibilities I had for the final and learned from them. The knowledge I learned for my CV is simple and formal. It doesn't have to be elaborate; it's just simple information to let the company know about me; it should be catchy but not overly fancy. As a result, I discovered that using an icon is an effective method to highlight the mos...
Read more

W1-Website design fundamentals

Image
WEEK 1 PRACTICAL During the first week practical, the lecturer was assigning us for the assignments that the students need to complete in the 14 weeks of the semester. Firstly, the students need to create a Pinterest board to shows the inspiration of the students from there for the assignments and create a blog page for the weekly journal for explaining the ideas that we get inspired by.  The images below are the styles that I get inspired by. Which they are all using a very interesting ways to create a creative designs by playing with contrast of the size of font, the font they are using are modern which is mostly Sans Serif and the simple but large subject matters (images) that can deliver the message directly and strong with the visuals.   I like the design of the UI and UX of them. Which they will move or the subject matter will slowly transforming  according to our movement of the cursor  and yet the designs are clean and simple by using a plain background ...
Read more

W2- Logo Development

Image
WEEK 2 PRACTICAL During the second week of the practical session, the lecturer brief about the part 1 of the assignment 1 which is related to create a logo. The first thing that the students need to do is to find references for the logo. To know that what they want to do and what visual message that they want to deliver to the viewers.  LOGO & LOGOTYPES The differences between logo and logotypes is that logo representing the simplified icons, visuals and symbol. While the logotypes is about text. It's about the full name of the logo, a kind of description that describe the logo. Everything that relates to "types" that means typography in design. Lecturer used McDonald's as the example, the alphabets "M" is the simplified of the McDonald's. The first 10 years of McDonald's, they are not using just only alphabet "M" in their logo. They constantly renewing and evolving their logo. Therefore, I have found a few references as shown below:  R...
Read more