Articles

Web Design: A Startup Guide

Web design is one of the sine qua non of today. Using websites for any purpose in an internet addicted world is no different than breathing. When you decide to become a web designer, you come across a huge universe. There are a lot of resources on web design on internet and this can confuse minds. In this way there are concepts and ways to follow that beginners should know. Of course, we are not talking about a fixed path , anyone who wants to learn web design can create their own path, but after the concepts and basics related to web design are known, people can create their own paths.

Why Should I Learn to Design a Web site? Isn't It Enough If I Use Ready Site Scripts?

The answer to this question depends on the purpose. You do not need to learn web design if your goal is to create a site for informational purposes, for example, an institution, organization or other situation, or to create a blog site where you will only upload content, or if the issues such as the design of the website, code structure are not very important for your purpose. A lot of ready-made alternatives will easily handle for you. Dozens of ready-made designs in different categories such as Wordpress, Wix, Joomla do not need you to learn web design. 

But if you want to have a website that can be customized according to your project, you want to give the format you want and have full control over, you need to create your own website. Because it is not possible to have full control over ready systems. Of course, you can customize ready-made websites to a certain level both through themes and plugins. It is not easy to have absolute command over the codes of website in ready scripts. Because it is not possible for a basic web designer or coder to go deeper as professional programmers create complex techniques.

If you have decided to design a website from scratch yourself, this article will be a guide for you.

Where to Start Web Design?

Web design

The main factors to be considered when starting web design are the objectives, goals, and audience of the site. Before starting to design the website, a design sketch should be created according to the goals, objectives and target audience. According to these factors, visual hierarchy of your site, links, listing of technologies to be used will guide you during the design. At this stage, you can create your appropriate design template on paper drawings. At this stage, you can examine the sites in categories similar to the site you will make and determine the features and design structures you like and want to add. It is important to remember that authenticity is an important consideration in web design, so avoid full-copying other websites or web pages.

There are two concepts we need to know when starting web design: Front-End and Back-End. The concept of Front-End refers to the visible face, visual design, and hierarchy of a website or application. In other words, it refers to the visual design aspect that looks more towards the end user. The concept of Back-End refers to the background of the website or application. This part of the process refers to situations such as the site performing the desired functions, managing the data in the desired way. To give an example to explain the concepts of Front-End and Back-End, when we consider a shopping site, the elements such as visual design, menu layout, animations of this site are the front-end elements of this site. The database management of this site related to customer registration, customer and shopping relations, in short, is the back-end part of this website with its "intelligence" in background.

Web design generally has two basic components as font-end and back-end, which we mentioned above. And with these two structures designed in harmony, a good website emerges. These two components must be designed in harmony for web design.

Some concepts related to the front-end and back-end part of web design are listed below:

Front-end: HTML, CSS, Javascript, responsive and others

Back-End: Php, Asp,.NET, Node.js, Ruby and others

Others can be added to the front-end and back-end elements we mentioned above. The most common and basic concepts are listed here. Now let's open this subject a little more:

Front-End Design

The front-end design refers to cliend-side operations. While doing web design, html-css-javascript trio must be designed in harmony in the front-end part of the work. From these concepts;

HTML: It forms the basic skeleton of web pages. Html codes are the codes that organize the basic structure of the page. For example, the basic element sequence of the sections of the page is determined by html. You can create your web design framework with the new and effective features of the latest version of HTML5.

CSS: It is the part where the visual styles of the web pages are created. Appearance properties of regions determined by HTML are kept in css files which are sequential style files for visual properties such as fonts, background colors, background images, border types. It is possible to determine some visual features of the page with HTML, but this work should be left to css. Because css files provide easier, effective and faster management of visual styles and reduces size of page. The web designer needs to know how to use Css effectively and efficiently. There are many ready-made frameworks you can use for CSS such as Bootstrap, Skeleton, Pure.css. And you can do formatting in web design by using these frameworks without writing css code from scratch yourself.

Javascript: Javascript is a script language that can actually be interpreted and run in the browser. In web design, javascript is used to create the behavioral and animated part of the front -end part. To put it more clearly, for example, slidersystems that you see on a news site, effective animations are made with javascripts. The use of javascript must be known for effective and professional web design. You don't need to create javascript files yourself, you can find many ready-made javascript systems for many purposes. You just need to know how to integrate these javascripts into your web design. When using javascript, it is necessary to stay away from misuse because javascripts are unnecessarily added to the page, it loads the page and reduces your page speeds.

Back-End Design

It is almost impossible for websites to be interactive today. In the simplest form, the contact form on the website, even the presence of commenting sections, necessitates the website's back-end design, a code structure that operates in the background. At this stage, it is necessary to establish a back-end system that will enable the website to function properly. Back-end transactions include server-side transactions such as the database of the website and server management. For the back-end part of the web design, one of the technologies such as php, php frameworks, asp, asp.net, ruby should be applied, and for back-end design database management, you should also use sql languages ​​such as My-Sql, Ms-Sql according to the type of database. For example, you should use my-sql language for a php-based back-end design, and ms-sql for an asp or asp.net-based back-end design. Back-end technology you choose may make you learn more languages. For example, if the technology you choose is asp.net, you may need to use c # language. The general orientation in back-end design is php or asp.net based designs. Php based professional back-end designs are designed with frameworks such as Laravel, Codeigniter, Symfony. Asp.Net based designs are now preferred for Asp based systems. Back-end web design technologies have their own advantages or disadvantages, and it's up to you to choose. The important thing is to choose a suitable back-end technology and specialize in it.

The front-end and back-end designs, which are two sides of the web design, are divided into sections that require expertise in the advanced stage. But if you are going to start web design business on your own, you should first get training on these areas and produce projects by trial and error. You will surely make many mistakes in this way. What you are going to do is continue the road without giving up. 

Which programs are needed for web design?

Web design programs

There are dozens of paid or free programs that you can use for web design. Let's first look at what types of programs you may need, respectively.

1. Code editor: The program you need to create and edit website codes is a good code editor. Code editors are software that checks whether you have correctly written the code created for components such as html, css, javascript etc. and show code integrity and hierarchy, show errors in codes, and organize your site files in integrity. In fact, it is also possible to create and save your codes in a simple notepad program, but when you use a good code editor, it will be easier to coding wesite because of the benefits we have just mentioned. As an example of code editors, we can give examples such as Visual Studio Code, Atom, SublimeText, Brackets, Notepad ++. You can reach more detailed content from this link:

http://www.codeforyoungs.com/best-ides-for-coding/195

2. Local server programs: If you want to test codes that require server-based operations such as php, asp on website, you should use local server programs. Of course, you can send it directly to server and check if the codes are working from there, but you may need to use local server programs for fast results. Examples of local server programs are Xaamp, Wamp, EasyPhp, Baby Web Server.

3. Image editing programs: You usually use image editing programs for editing, cropping, and reducing the size of the images that you will use when designing the website or creating the content. For this, there are programs that you can install on your computer, as well as online programs that you can use over the internet. As an example of the programs you can install on the computer, there are free alternatives such as Gimp, Photoplus, Inkspace as well as paid programs such as Photoshop. We can give examples of online image editing tools such as Canva, Sketch.io, Remove.bg. For example, you can create designs such as logo, banner and banner with Canva. You can create and edit various images with Sketch.io. With Remove.bg, you can remove white background and make images transparent. There are dozens of online programs that you can use for various purposes like this.

While designing web site, you may need other programs besides the programs mentioned above. But in general, programs of the above type are absolutely needed.

Result

Web design is a fun journey, but sometimes some obstacles that set off can tire you. Some things may seem difficult to do. But in order to professionalize, it is necessary not to give up and make mistakes amateurishly.

580 views
COMMENTS