W11- Website Structure Development

 WEEK 11

PRACTICAL

The week of checking progression for the flowchart, sketches, low-fidelity wireframes and high-fidelity wireframes. 

FLOWCHART


The flowchart for the client's. According to many brand's website that are selling products/ services they often will have product pages (or put their categories directly on the navigation menu). Moreover, our client has 4 categories for their flowers as shown as the flowchart and we will have more about page,  contact page to order the bouquets and also account page for the consumer/customer to check and track their order.

SKETCHES




The sketches for the client's website structure. According to the references that I found, mostly for the florist or the product brands are using just simple layout and very straightforward, they lessly put animation for their website and they more often put photos rather than videos. As for the client ask, we will do something very simple, elegant and tender as for the base of the website style. 

LECTURE

WEBSITE FRAMEWORKS

Web application frameworks, sometimes referred to as website frameworks or web frameworks, are collections of pre-written code libraries, tools, and utilities that offer an organised method for creating and managing web applications. Rather than having to reinvent common functionalities, developers can concentrate on application-specific logic by using these frameworks as a base upon which to build their web projects. They are now widely used in these days to cretae a website.




RESPONSIVE WEB DESIGN FRAMEWORK

FOUNDATION

There are 5 of the responsive web design framework. The first one will be Foundation. Since it is compatible with all platforms, devices, and levels of accessibility, this framework is a favourite among designers and developers. The Foundation framework is a collection of front-end frameworks that are responsive and facilitate the design of responsive emails, apps, and websites. These look stunning on all devices, no matter how big the screen.


BOOKSTRAP

A free and open-source CSS framework designed for front-end web development that prioritises mobile responsiveness. It includes design templates for typography, forms, buttons, navigation, and other interface elements built with HTML, CSS, and JavaScript.

It initially introduced as the "Twitter blueprint," Bootstrap serves as a framework for maintaining uniformity among internal tools. A front-end library called Bootstrap features a responsive grid layout system with 12 columns and is available for free. Building responsive and mobile-first web projects is possible with Bootstrap.

VUE.JS

An open-source model-view-model front end JavaScript library. It is used to create user interfaces and single-page apps. User interfaces are constructed using this JavaScript library, or progressive framework. It transforms into a framework when paired with specific instruments. Because Vue.js's core library only concentrates on the view layer, integrating it with other libraries or completed projects is simple.


SKELETON

Skeletons are easy to use and lightweight. With a few exceptions, it only styles unstyled HTML elements and offers a responsive grid. Not a thing more. Around 400 lines of CSS unminified and with comments. It’s not a UI framework, just a place to start.



THE UI KIT

Essential UI elements such as fonts, layered design files, icons, documentation, and HTML/CSS files are all included in a UI kit. With a few buttons and basic design elements, UI kits can be fairly basic or incredibly complex, featuring toggles that allow for instantaneous changes to fonts, colours, and shapes. This front-end framework facilitates the creation of strong and quick user interfaces. Everything you need to get started is included in the Kit, which consists of compiled CSS and JavaScript files. It is adaptable and ready for mobile. we can make our own custom UI Kit theme by installing and compiling the UI Kit.


The goal of responsive web design is to ensure that websites display properly across a range of window or screen sizes and devices. Ensuring that users have a consistent and easy-to-use experience on websites, irrespective of the device they use to access them, is the main objective.

MOBILE-FIRST APPROACH



Rather than starting with a desktop site and then adapting it to smaller screens, a "mobile-first" approach entails designing a desktop site from the ground up, starting with the mobile version and then adjusting it for larger screens. Google Search is a prime example of the mobile-first strategy. The search page emphasises usability and simplicity and was created with mobile users in mind. It functions well on bigger screens without sacrificing any of its features.



Web developers can guarantee that their websites provide a consistent and user-friendly experience on all devices by grasping the fundamentals and best practices of responsive design.
 
Developing websites that endure over time requires staying current with responsive design trends and tools, which are vital as technology develops.

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