The Basic Principles of Web Design: Introduction

Hey everyone! Hope it is all well in the happy coding world. :slight_smile:

First of all, quick info about myself. Like all of you, I am here to learn web development, however, I do have an (educational-wise) background in design in graphic and web.

I am planning to write a good few topics that focus on the basic principles in web design such as

  • colour theory
  • the use of typography
  • the fundamental of grid layout
  • and so on…

Now, some of you are probably thinking well this is not the right place for this subject as it does not involve coding. While technically this is kind of true, on the other hand:

Post on advice and resources has been asked…

I have seen a handful of other fellow members’ posts in the forum asking for advice and resources on learning web design.

This also included the time that I have posted my tribute page of John Steinbeck and I had so many (amazing) responses and messages from everyone in this community.

The responses I had ranged from

  • Asking for feedback on their tribute page or other projects
  • Asking to explain on a particular fundamental of web design
  • Asking where to start and what to do to achieve their own design

When I said it is kind of true...

On the other hand, it would help a web developer (that’d be you) to learn and know at least the basics. By doing so, you would have a better understanding of

  • Applying design to element in an appropriate manner, especially when it involves the case of accessibility
  • How that fine small details are applied
  • Making your layout making navigational
  • Getting the design and code to work together in order to create an effective layout

I mean we are here to learn to code, but I am sure that some of use want to add the final touch where we feel happy and confident to display our portfolio of projects to the employers, friends & family or anyone for that matter. :grin:

Thus, this is why I will be writing topics in the next weeks to help you guys.

What it will involve is the topic itself with some imagery, examples, tips and maybe some practical exercises. I will also add extra resources and handy design tools.

I also want to stress that your involvement and contribution to the discussion will be vital.

I have made feedback to FCC that I think it would be beneficial to add a small section of the basic principles of web design to FCC. However, only the future can tell what will happens next, but if there were sufficient amount of responses showing interest and involvement then hopefully FCC would see it and be open to the idea, right? :woman_shrugging:

Please write a response (in all topics) if:

  • You have any questions to ask - this does not have to be related to the particular topic I will post
  • You do not understand or do not feel clear on what I have written - this is important
  • You have positive or negative feedback - this would definitely be appreciated
  • you know any relevant resources, tools, advice, and tips to add - that would be really cool!
  • You just simply like to have a conversation on a design topic - please do so!

If you have any questions you would like to ask now, post a reply. Other than that, I shall be polishing my next topic - The first process in web design and hopefully it shall be post in coming days! :smiley:

Anyway, happy coding everyone and have a great weekend!

List of Topics

Note: More topics to be added over the period of time

38 Likes

Wooo definately a +1 vote for me relating to web design. Cant wait for your article =D

1 Like

I am pleased to hear this! Thank you :blush:

A well-done job to you. I salute your courage for taking the bold step to opening this thread, so far I’m here to learn - I will contribute to the thread enormously in terms of question and suggestion. With you at my back I’ll become a better web designer.

1 Like

To get started, I will like to know the difference between a developer and a designer. Besides do those aforementioned has any relationship with ui/ux designers? This is a question I do wish to ask most often and often.

1 Like

Aww, thank you very much for your kind words! You have made my day :blush:

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. :slight_smile:

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 :slight_smile:

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 :smiley:

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 :smiley:

5 Likes

Thanks so much, your answer has help to clear my haziness about the topic.

1 Like

A solution leads to another question.
Does it require a web designer to have enough knowledge of graphics design software at all?

1 Like

If you’re gonna be writing stuff you should publish on medium, I have a few articles that I put on my resume/cover letters that have helped land interviews (for infosec stuff, specifically, not for developer jobs yet). I’m pretty sure there’s even a part specifically for FreeCodeCamp, and way more people will see it!

2 Likes

@Madalena.design Cool idea. I am curious how it is going to unfold. I agree that it would be great to have web design covered in the fcc context. This cross-section between design and code is very interesting and right now with all the new possibilities in CSS3 layout and animation etc. … E.g. Just saw this keynote by a web designer who kinda lost his spark, but found a new interest in web layout with grid/flexbox and getting inspiration from magazine print layouts …

3 Likes

Hello @michaelsndr, do you have the idea of the book name, the speaker was trying to mentioning?

The video is helpful.

1 Like

In terms of applying for a job position where it required to have a skill in specific graphic software, yes.

But here is the thing. I am glad you asked because this is another misconception that the designers must know every single thing in the software. Again, not true (and I admitted fell for that misconception when I first got into designing).

Basically learning to use the software is like learning to code, we problem-solve whatever the task is.

We need to learn the basic like the tools and navigation of using the software (like coding, we need to learn the syntax and the concepts). But when it comes to creating something, we do not need to know what we are doing by heart, so if I wanted to create a text where it has a gradient effect of colours at the top then gradually at the bottom it fades out, I would either see if I could try out myself or I use google to problem-solve it by finding resources such as a tutorial or an article to do it.

Hope this helps :slight_smile:

1 Like

Thanks a lot, now I am clear about my question.
:smiley::grinning:

1 Like

I will definitely be planning to :slight_smile: I have to admit I was a bit wary of having a blog or writing articles as I am not sure if my writing style is clear and effective.

Yeah, I have heard it actually helps with the process of getting a job and I only learned this information…last week or the week before? Because of that, it has pushed me to be more determined in writing articles on Medium.

Thank you for the suggestion though, I actually appreciate it (giving that I am hoping you think my writing skills is decent enough to be doing it lol) :slight_smile:

I can’t wait to see more of your helpful tutorial. I hope you won’t abandon us here and leave for medium alone? (lol)

1 Like

You have made two very good points.

Considering the learning process of design is different to the learning process of coding. Especially in FFC structure, where it is the section of explanation of a code, followed by a challenge usinf the editor.

However, you have just gave me an idea…even if we learn to design, we still have to translate the design to code in order to create a functional website right?

However, this will be up to FCC so let’s see what will happen! :smiley:

Considering, it is a long video, I will be watching this during lunch. I am looking forward to watching because of you have written, I can sort of relate to the web designer. I LOVE editorial design
and I have always wanted to implement the editorial layout to the web.

So, this is going to be a good fun to watch :smiley: Thank you very much for posting this! :blush:

Thank you very much for your response. I hope you will find the topics very valuable and helpful to your projects :blush:

You are very much welcome :slight_smile:

I will still be doing a good few topics. It also depends on how FCC will respond to the idea of including learning the principles of web design. However, regardless of what will happen in the future, I do plan to either set up a blog (be it Medium or other platforms) and write articles through there.

But I am more than happy to notify you (and other members that are interested) of new articles via here :slight_smile:

And more importantly, one step at the time :stuck_out_tongue:

1 Like

There is the applied visual design part of the curriculum which teaches a bit about design principles.

But it would be nice to have it updated and expanded on. The curriculum is open source and anyone can add to it. Have you considered contributing to the curriculum?

Here are the repo links to the current curriculum and the upcoming curriculum.

1 Like

Alright, Great!!!. Keep your dream alive and the sky is your beginning. Whichever way, be it medium or personal blog, I will like to be a follower and please feel free to mention it to me.

cheers,

1 Like