Modern Day Web Design

Firstly, let me say that I am not a professional web designer. But I do love the area of web design and technology. In the last two years, I have worked mostly on SharePoint 2010, configuring sites, as opposed to full-blown web design. However, every now and then I throw in some fancy jQuery or CSS to make the company pages that much more interesting.

Now on the side, I have read a lot about the topics mentioned and I just want to quickly cover them here for those getting started in web design or just wanting to know, “How the hell do they do that?” :-)  . I won’t go into the nitty gritty of each thing, but if paint the right picture for you and mention the tools and workflows, you can easily Google and research each topic separately, on your own.

So without further ado, here goes:

Main web technologies :

1. HTML (Hyper text mark up language)

This is the absolute main ingredient. The bare bones that is needed to create a web page. the latest version is HTML 5.

2. CSS (Cascading Style Sheets): 

This is the XML code that “describes” the web page.  The HTML is the content. The words that make up this blog for example. With CSS, you tell the browser that certain words should be bold, or underlined, or there should a list of items and they should be aligned to the left, etc, etc, etc. You also specify colors and shapes. CSS is absolutely essential in modern-day websites.

Previously, designers would use pictures (PNGs, JPGs, etc) and place them on the page. However, with all the different screen sizes in existence today (PC, tablets, phones), it’s becoming more necessary for images and icons to be scalable, and hence, “drawing them directly in the browser” with CSS is the way to go.

3. Javascript and jQuery: 

Javascript is a scripting language and jQuery is a library of “pre-written” javascript code that you can download and use for free!  JavaScript runs once the page has been downloaded and presented on your screen. It actually runs on your PC and most of the time it reacts to things you do, like moving your mouse, clicking your mouse, and entering information on forms. Ever noticed how the form information changes sometimes when you enter your country of residence or zip code? that JavaScript doing that.  (Look up AJAX programming on Google. It’s a type way of using JavaScript). You can use a laptop like er blade 15 2018 h2 for Javascript and jQuery.

4. Server Side Code:

Just as JavaScript runs on your PC after the page is loaded, server-side code generates HTML code on the fly before sending it to you.  For example, take Facebook.  Everyone’s page looks different. Do you think that they write separate HTML codes for each person? No. The HTML is generated on the fly and sent to you when you request it. It's “customized” based on who is logged in. Hence to do that, you need code embedded in your web page that does that on the web server, before coming to you. This is server-side code. The top languages currently are PHP and ASP. NET, Java (that’s your cue to start googling :-).

Tools:

Okay, it can be daunting. And what tools you use, really depends on your preference as well as paid vs. free.

However, I can say that you will need a text editor to write the code. The free one is Notepad ++ very good indeed.

You will also need picture/image/vector editing software. This is for the graphics on your site. You will need to be able to create images from scratch, scale images, edit them, etc.

Most professionals use the Adobe suite of products. Photoshop, Illustrator, Fireworks, Dreamweaver.  (you will need to check out these products).

Web Design workflow:

The modern-day workflow is to sketch /wireframe your designs in a wire-framing programmer of choice or Photoshop. Then you prototype directly in the browser, constantly checking for various screen sizes. The client signs off, and you do the final build. Digital cameras such as nt slinger for the camera can be used for Photoshop web design.

Previously, pros would design the entire layout of a site in Photoshop, down to a tee. Then they would use a Photoshop tool called the slicer and “slice” up the design into specific images.  Then using CSS, place those images on the web page and style them. Finally, animate or give effects to those images using JavaScript and CSS together.

Nowadays, “Responsive” or “Fluid” web design is needed.  (The Photoshop method is still widely used, but I think on its way out).

With this approach, to make pages scale easily, the design is done almost entirely with HTML 5 and CSS. Basically fully code with no images. Also, icons can be made into web fonts.