Aww, thank you very much for your kind words! You have made my day ![]()
I really appreciated this and I shall do my best to make you learn a good amount of topics in a fun way as possible. ![]()
Now, your first question is a very interesting one! Hopefully, my answer is clear and helpful. If there is anything you do not understand, let me know and I will be happy to explain differently ![]()
Here we go!
First, I will explain the two basic roles of the web developer and designer for everyone to understand.
Web Developer
So the role of the web developer is to build a functioning website by implementing both front-end and back-end languages.
That, by the way, is what we are learning here in FCC ![]()
Web Designer
As a web developer, it is their role to build a website but in a different way - they do not code. What they do is create a design layout to the user interface (what we see on the screen) and to ensure the design is both appealing and navigational to the user.
This is done starting from sketching layouts on paper to finishing the design off in graphical software such as Adobe Illustrator/Photoshop/Indesign (I heard web designers use Photoshop to create layouts but personally I do not).
Some companies where they built websites, there is one area for web designers and one for web developers.
So, when a client goes to a company to have a full website done. The process starts off with the web designer side creating design layouts and once that is finalised, they take it to the web developer area and show them their work and say “here is the layout, now make it functional using your toolkit of coding languages."
Actually, that is a very good question because the biggest misconception is web designer/developer and UX/UI designers are the same thing. This is not correct. In fact, UX and UI designers are not even the same. Here are the two roles
UX (User Experience) designer
First, to answer your question. It does not really have a relationship to web design and developer.
This is because they focus on the user such as what they do, how they think and function in certain things and time. Their role is to create solutions to make the experience pleasant for the user when using a product or service. Unlike web design and development, the product or service varies from a software or mobile app to even a physical product. They do this from doing user research, then they do wireframing and prototypes to create and test the product.
UI (User Interface) designer
It is similar to web design where they create a design interface for the product to give an appealing look. The difference are they focus on how to make it more navigational, apply the design patterns. So, for example, it is more common to the navigation menu at the top of the screen then right at the bottom.
Also, another difference between a web designer and UI designer is web design focus on branding identity of the client/company/project. User Interface does not.
Again, the structure of the working environment is similar. When a client wants to create a product using the UX/UI service, the first process is the UX area where they do testing and research. Once done, they do wireframes and prototype to create a rough version of a product. Then, it is taken to the UI side, where they are given both the prototype and all the information about the user so they can also have a better understanding when it comes to the design process.
EDIT: Actually, I just thought of a one good case scenario to explain this.
A Case Scenario: Building a Kid Codebot
Imagine there is a big company called X. It has departments including the UX design, UI design, web design and web developer.
The company aims to deliver a service in creating product where the customer or user will have the best experience possible by using it.
A client came in and says he wants to have a product for children to learn coding languages, yet he wants the product to be more physical rather be a typical mobile or web app.
First, the UX department will start brainstorming and came up with a possibility of creating a little robot that teach children coding.
So, they goes round to schools and ask questions to children about how they would learn coding. They also get to analyse their habits of routine. Then, with all the information they gathered, they start doing storyboard involving a fictional child using the robot to learn coding.
Then, they starts doing wireframing and prototyping a draft robot and start doing testing to make it functional. It all works, now onto the UI department.
The UI department are given the draft robot, now what they do is user interface so maybe the robot has a screen on its stomach, the UI designer would create layout in that screen or they would create a mobile app where it will be a remote control for that robot.
With the robot product finalised and now on the market, it’s now need to be advertised to the consumers. The web apartment need to build a website to sell the product. Yep, that’s right, the web designers would create a branding and design the layout of the website of how it should looks on a graphic software. Now that is done. let print the layout and send it to the web developer department.
The web developer received the document of the layout, how let create HTML document and get the layout to look the same and then we add CSS to get the same design as shown, then Javascript to make it functional and the rest of the back-end languages.
Well, there you have it ![]()