Tips to Designing a Web page

Listed are some tips designing a web page that I have gathered from my past experiences during this course.

  • Have a plan of how you want your web page to look.

It is helpful to have a blueprint of your expected design. This blueprint can be drawn on a sheet of paper (graph paper is ideal because it can help with doing the math of pixel sizes and percentages), or make a written description of how you want your web page to look. Not having a plan is not the end of the world, but it makes the web design process much easier, especially for a beginner. Below is a very rough sketch of how I wanted my professional website to look on a computer screen. It was not perfect, but it gave me a good idea of the potential visual aspect that I wanted to achieve. FullSizeRender.jpg

Here is a rough draft of my website (before I add any major content), modeled after this blueprint:

Screen Shot 2017-04-27 at 7.01.17 PM

  • Look up some examples of web pages that you would like to model after.

This tip piggybacks off the first piece of advice of planning your web page. Choose some websites that you find visually pleasing or that are professional that cover a similar topic that you want to cover in your own site. This way you can model your own website after the pros.

  • Pay very close attention to detail in your CSS and HTML files.

One missed character or symbol in your CSS or HTML code could fail at conveying what you want it to, or completely ruin the look of your website. Being particular with adding the necessary symbols is vital. If something does not come out like how you designed it, proofread your code as much as possible until you find the error. Always double and triple check you work to make sure it is precise and consistent!

  • Constantly save your work and upload it to the server that you are using to make your web page with every few changes you make.

If anything crazy happens, like if your computer shuts down unexpectedly or if the program crashes, constantly saving your work will minimize the amount of content you will be subject to lose. Also, constantly saving your work and uploading it to the server helps to see incremental progress of the specific changes you are making. Pictured below is the server I use:

screen-shot-2017-04-27-at-7-25-47-pm.png

  • Utilize Google.

If you are struggling with web design concepts, or want to know how to accomplish a certain web design concept to add to your page, look it up. Chances are, there are other people are having similar problems that you are having, or people who have web design demonstration pages or videos that contain some of the concepts you would like to use. Don’t feel like you are in this web design process alone!

Screen Shot 2017-04-27 at 7.27.01 PM

  • Try to make your page as visually appealing as possible.

Use contrasting colors, as pages that are hard to read will not be read for long. Use sans-serif fonts for paragraphs of text; sans-serif fonts are easier to read onscreen for extended periods of time. In terms of the amount of content on the page, usually less is more. The more white space, the more your audience can pay attention to your intended topic/theme/focus of the page. A crammed page is set up for disaster, and it make it hard for your audience to distinguish what is truly important about the page. Lastly, it is a good idea to have clickable links throughout your page. Your audience then has a chance to interact with the page and explore, lengthening the time they spend on your site or site(s).

Have fun coding!

Advertisements

Tips to Designing a Web page

Listed are some tips designing a web page that I have gathered from my past experiences during this course.

  • Have a plan of how you want your web page to look.

It is helpful to have a blueprint of your expected design. This blueprint can be drawn on a sheet of paper (graph paper is ideal because it can help with doing the math of pixel sizes and percentages), or make a written description of how you want your web page to look. Not having a plan is not the end of the world, but it makes the web design process much easier, especially for a beginner. Below is a very rough sketch of how I wanted my professional website to look on a computer screen. It was not perfect, but it gave me a good idea of the potential visual aspect that I wanted to achieve. FullSizeRender.jpg

Here is a rough draft of my website (before I add any major content), modeled after this blueprint:

Screen Shot 2017-04-27 at 7.01.17 PM

  • Look up some examples of web pages that you would like to model after.

This tip piggybacks off the first piece of advice of planning your web page. Choose some websites that you find visually pleasing or that are professional that cover a similar topic that you want to cover in your own site. This way you can model your own website after the pros.

  • Pay very close attention to detail in your CSS and HTML files.

One missed character or symbol in your CSS or HTML code could fail at conveying what you want it to, or completely ruin the look of your website. Being particular with adding the necessary symbols is vital. If something does not come out like how you designed it, proofread your code as much as possible until you find the error. Always double and triple check you work to make sure it is precise and consistent!

  • Constantly save your work and upload it to the server that you are using to make your web page with every few changes you make.

If anything crazy happens, like if your computer shuts down unexpectedly or if the program crashes, constantly saving your work will minimize the amount of content you will be subject to lose. Also, constantly saving your work and uploading it to the server helps to see incremental progress of the specific changes you are making. Pictured below is the server I use:

screen-shot-2017-04-27-at-7-25-47-pm.png

  • Utilize Google.

If you are struggling with web design concepts, or want to know how to accomplish a certain web design concept to add to your page, look it up. Chances are, there are other people are having similar problems that you are having, or people who have web design demonstration pages or videos that contain some of the concepts you would like to use. Don’t feel like you are in this web design process alone!

Screen Shot 2017-04-27 at 7.27.01 PM

  • Try to make your page as visually appealing as possible.

Use contrasting colors, as pages that are hard to read will not be read for long. Use sans-serif fonts for paragraphs of text; sans-serif fonts are easier to read onscreen for extended periods of time. In terms of the amount of content on the page, usually less is more. The more white space, the more your audience can pay attention to your intended topic/theme/focus of the page. A crammed page is set up for disaster, and it make it hard for your audience to distinguish what is truly important about the page. Lastly, it is a good idea to have clickable links throughout your page. Your audience then has a chance to interact with the page and explore, lengthening the time they spend on your site or site(s).

Have fun coding!