From Baruch New Media
Jump to: navigation, search

Web Design

Exampl.jpg

Web Design is a process of various front end tasks to create a web page, which the end-user can access through the internet. The history of web design began just 32 years ago in 1981 and websites were mostly created for functional communication rather than entertainment. Due to the limitation of coding language designers were only able to create a simple layout with few colors. Such sites were called ‘first generation sites’ due to a lot of text, limited color, and linear graphics. [1]

The rapid rise of the website along with the rapid development of the Internet, as the main support of the Internet, due to the frequent use of the network has become very important. Because companies need to present products, services, ideas, culture, or provide some functional services to the public through the website. Therefore, web design must first clearly define the purpose of the site and the needs of users, so as to make a practical design.

Web design is generally divided into three major categories: functional web design, image web design, and information web design. The purpose of designing a web page is different, and different webpage planning and design schemes should be selected. The goal of web design is to make the page design beautify by using more reasonable colors, fonts, pictures, and styles. In the case of limited functions, the user should be given a perfect visual experience. Advanced web design even takes into account the sound and light, interaction, etc. to achieve a better audio-visual experience.[2]

Web design uses some key elements as below:

1) Layout: It is an initial stage where ideas are put together and graphics, ads, and text arranged in color balance and consistency. Layouts can be responsive to devices and can change the layouts according to the resolution of the device. The key goal of web surfing should be helping the viewer find the information they seek with ease.

2) Color: This is the element that can be manipulated to attract end-user and the choice of colors depends on the purpose and business. It could be multi-colored design or cool or warm-toned, conveying the outlook of the brand of an organization. The cascading style sheet is used to fill in colors and is defined using a hexadecimal (hex) notation for the combination of primary color values (RGB).

3) Graphics: Graphics includes logos, photos, clipart, which enhances the web design. Placing graphics and using the right colors is key to the user-friendly website. Other tools such as Photoshop, Illustrator, or Corel Draw can be used to further enhance graphics and create a seamless web page.

4) Fonts: This element too acts as an enhancer while designing a website. There are thousands of fonts available to choose from but not all are compatible with every web browser. Most web browsers can only read a select number of fonts called "web-safe fonts.

5) Content: Content and design can work hand in hand to enhance not only the appearance but projects clear message of the site through visuals and text. Content should always be relevant and factual, which will not confuse customers in anyways. Content should be accustomed to search engines and be of a suitable character length, comprising relevant keywords.[3]


Tools and technologies

HTML (Hypertext Markup Language)

HTML.jpg

HTML refers to hypertext markup language which is used for creating a web page since it first began. It is used to define the structure and layouts of the web document using tags and attributes. Hypertext links are also a form of tags which is used to direct users to other web pages with one click. When HTML was on the developing stage many large companies used to monopolize web design codes. The W3C[4] or World Wide Web Consortium was formed to prevent the monopoly of large companies. This body ensures that designers follow the right protocol so that site can work cohesively in all browsers.

The class selector uses the same class to set specific styles for many HTML elements. It uses class attributes and is defined with a period in CSS ".". The id selector sets the specific style for a single unique element on the page. It uses the id attribute of an HTML element and is defined by a pound in CSS "#".

The meta tag is the information about the page it will not be displayed on the page but will be machine-parsed. There are 3 common ways of meta tag which are Character Set, description, and keywords. For example, use a meta tag about keywords to specify important keywords related to a document that will later be used by search engines to index the web page for a search.

CSS (Cascading Style Sheets)

CSS.png

CSS is the abbreviation of Cascading Style Sheets, which is a cascading style sheet, which is a web page layout standard developed and published by the W3C Association, which complements the HTML language function. CSS is mostly used for styles. The main purpose is to control the fonts, colors, backgrounds, images, and other elements of the webpage so that the webpage can be displayed exactly according to the designer's requirements. CSS provides a style description for the HTML markup language that defines how elements are displayed. CSS is a breakthrough in the field of web design. It can be used to modify all the page elements associated with a small style update.[5]

JS (JavaScript)

Javascript.png

JavaScript is a web-based scripting language that has been widely used in web application development. It is often used to add a variety of dynamic functions to web pages to provide users with smoother and more beautiful browsing results. Usually, JavaScript scripts implement their own functionality by embedding them in HTML. The Javascript scripting language, like other languages, has its own basic data types, expressions and arithmetic operators, and the basic program framework of the program. Javascript provides four basic data types and two special data types for processing data and text. Variables provide a place to store information, and expressions can perform more complex information processing.[6]

PHP (Hypertext Processor)

PHP.jpg

PHP is a general-purpose programming language for website development. It works well with HTML and database, making it good for a beginner to learn about dynamic website applications. PHP's significant feature is to enable a website to have interaction with a server: edit files in it, collect data and store data in it, retrieve data from it, and more. PHP can control user access and send or receive cookies. It's a free open source. It can run on various platforms, such as Windows, Linux, MacOX, and so on. What's more, PHP supports different databases and servers. Before, it requires learners has a basic understanding of HTML, Javascript, and CSS. [7]

Adobe Flash

Flash

Adobe Flash is a multimedia software platform that was used primarily during the 2000s to create animated and rich Internet applications. The applications of the software also stretched to mobile applications and games but played a vital role in the web design of websites throughout the early to late 2000s. Because most computers shipped with the software, it was a universal way to create animated websites, ones that were not as static as those created on the backbones of HTML and CSS. Large corporations such as Disney, Nike, and Nintendo were among companies that employed this style of website design. The software fell out of practice amid privacy concerns and the rise of Javascript and jQuery, two internal scripting languages that can yield safer and similar results. Browsers also dropped support for software such as Google Chrome and Safari. The software can still be accessed behind developer settings for these browsers.

Types of Web Design

1) Design for Usability: This is the most popular web design principle developed by Steve Krug, it suggests that a website should be designed with the purpose for the average user, and the below-average user can find what they are looking for and complete what they are trying to achieve without wasting too much time or giving too much thought.

2) Conversion-Centered Design: Thi website design is developed by Oli Gardner, and its mostly applied to design landing pages rather than regular webpages.

3) Three Questions Design: A website design that addresses three questions, what are you offering? why should I pick you? what do you want me to do next? this website design suggests that the quality of the design is not determined by whether the previous questions were answered but how clearly those answers are to the user.

Homepage.png

4) Customer Segments Design: This design suggests that in order of a website to be successful, it should address the needs of many different customer groups and appeal to different segments .

Homepage Z.png

5) Mobile First Design: This design is less concerned with the optimal layout than the versatility of content presentation across different devices. This philosophy suggests that websites should be designed primarily for mobile devices and then adapted to larger screens .


Wix Web Design

In 2006 Avishai Abrahami, Nadav Abrahami, and Giora Kaplan founded Wix web site design. Wix helps to create its own website to individuals and businesses who want to revolutionize in business. They already had helped many people with no development skills to create a professional and functional web presence. It is very easy to use. it is a drag and drop website with HTML5 capabilities, templates, top-grade hosting, innovative Apps and tons of features for free.[8]

Wix.com website logo.svg.png


New Media in Web Design

Example2.jpg

There used to be the time when one needed a few months’ courses and money to learn web designing but now even high school kids can create websites with minimal coding knowledge. There are already developed sites with an application environment with templates that requires no coding at all. Businesses used to hire a web designers and pay a huge amount of money for the designing webpage which now can be created at no cost except for some advanced features. This is also relevant to blogs which now can be published on sites like a blogger without any coding. Also, all social networking and e-commerce sites use the same language to display their pages on the web browser. Source codes of such websites can be easily viewed.

WYSIWYG Web Editor

WYSIWYG[9] (what you see is what you get) editors are HTML editors that display your work as you want it to appear on the web or on your browser. The software will allow you to drag and drop items like tables, layers, frames, etc., and let you insert objects and properties without having to manipulate code directly. A great example of this is Dreamweaver.[10] For a good test run, a trial version is available for download. These tools are effective for simple edit or updates for websites. Benefits vary for each software and it would be helpful to know which editor would be best fit your needs. The best practice usually, is to get acquainted with one software and mastering all its features.

Benefits of WYSIWYG Editors

Wix display

There are quite a few advantages of using WYSIWYG Editors. Among them are as follows:

  • Final site layout - during development, you can assess how your site will look while you're creating the website. Some software has templates where you can select and use the best design suited for its need.
  • Fast turnaround - editing and updates are quick and since some templates are available, color matching and design layout need not be time-consuming.
  • Customization - users with little knowledge of HTML programming can use the editor to customize, edit, and update the site like a pro.
  • Cheaper - since the software offers drag and drop of items, a web developer professional may be unnecessary for the task.


Drawbacks of WYSIWYG Editors

  • Common designs - since templates are widely available, the site designs are not as unique as a web developer may create. Some other companies may have used the same template, same design, with different colors.
  • Static design - templates and sites made with WYSIWYG editors often deliver static pages. Database connectivity is unavailable most of the times.
  • Not suited for SEO - search engine optimization or SEO[11], is a factor to consider if you want traffic coming in and out of your website. Sites built on templates do not generate good traffic.

Coding with WYSIWYG

Web Editor Reference

Dreamweaver 01.jpg

Dreamweaver offers different modes of developing the site. One of which is code[12] mode. In this screen, all hard HTML authoring is done. A code navigator is available to assist by giving you an alphabetical list of code sources and tips that are useful during development. Another mode is called the Design[13]. In this view, Dreamweaver lets you format the layout as desired. As you drag and drop items on the canvas, the code is automatically generated by the system which you can view in Code mode. They also have a Split[14] option where you can see the code as well as the design views simultaneously. As you develop your code, the layout changes in real-time and as you work.

Source-code editor:

A source code editor is a text editor which one of the computer software. Mainly used to write and view text files. There are some special text editors that support adding their own formats to enrich the presentation of documents. An operating system or integrated development environment usually has an editor that can view and edit plain text. A text editor that adds formatting is usually used by individual users or companies to create files that require formatting. Because the configuration files for programs and programs are usually stored in plain text, programmers also need to use a plain text editor to edit programs and configuration files.[15]

Examples:

Brackets.png

Brackets is an open-source front-end development tool developed by Adobe Systems and released on GitHub. It can be used for free. And it supports three common languages: HTML, CSS, and JavaScript. In addition to these three languages, it is available in more than 30 languages. As long as you use a general language, you can use it without any problems. Plus, with the extensions installed on GitHub, you can also customize it as a more convenient front-end tool.

Brackets is the best utility for beginners. It is different from other front-end development tools. You can set the language from the beginning and you can use it as long as it is installed. Because there is no need to learn the markup of other languages, it is very convenient to get started. In addition, you can see the "live preview" function of the modified effect immediately after the modification; when the cursor moves to the text field of the image file name, the related image will pop up the "hover view" function, which is convenient for beginners. Smooth and practical functions. In addition, it has the function of folding code, which is easier to use. And the brackets are developed in an open-source form, and all source code is exposed. The software can be edited in HTML, CSS, JavaScript, and replaced with an editor that is easier to use. In addition, there are a wealth of extensions (plugins) that can be used for free.[16]

Notepad plus plus.png

Notepad++ is a set of text editors under the Windows operating system (software copyright license: GPL), support for multi-language programming (UTF8 technology). The Notepad++ feature is more powerful than the Notepad in Windows. It can be used to create general text-only documentation and is also very suitable for writing the computer program code. Notepad++ not only has syntax highlighting, but also syntax folding, and supports macros and plug-ins that extend basic functionality.

Notepad++ is free software, free to use, and supports many computer programming languages: C, C++, Java, Pascal, C#, XML, SQL, Ada, HTML, PHP, ASP, AutoIt, assembly, DOS batch, Caml, COBOL, Cmake, CSS, D, Diff, ActionScript, Fortran, Gui4Cli, Haskell, INNO, JSP, KIXtart, LISP, Lua, Make (Makefile), Matlab, INI File, MS-DOS Style, NSIS, Normal text, Objective-C, Pascal, Python, Javascript, Verilog, Haskell, InnoSetup, CMake, VHDL, Matlab[17]

Other editors are also available:

Creativesuite.jpg

Adobe offers products such as Adobe Photoshop, Illustrator, InDesign, Premiere Pro, After Effects, Lightroom, and more. Designers may edit their images through Photoshop and edit digitally through Lightroom. With Illustrator, people can work with graphic images and with InDesign, people can work with page layout and design. [18]


Microsoft.jpg

Microsoft Expression Web, code-named Quartz, is an HTML editor and general web design software product by Microsoft. It is available free of charge from Microsoft and is a component of the discontinued Expression Studio. Expression Web can design and develop web pages using HTML5, CSS 3, ASP.NET, PHP, JavaScript, XML+XSLT and XHTML. Expression Web 4 requires .NET Framework 4.0 and Silverlight 4.0 to install and run. Expression Web uses its own standards-based rendering engine which is different from Internet Explorer's Trident engine.

Nof2013.png


NetObjects Fusion is a web design software that allows users to create and manage their websites. People can choose to add rich media and use custom page templates and designs. Users can build their websites using the CSS Framework and Grid System. There are also visual aids to help users keep their webpages consistent. Additionally, they can have links and captions with the images they upload on the website. The company offers free software for web design, called NetObjects Fusion Essentials. Users can simply drag-and-drop to build their website.[19]

Coffeecup.png


CoffeeCup software is an HTML editor that allows users to auto-sync any changes to their website online. CoffeeCup Software is an American computer software development company based in Atlanta, Georgia, and the United States founded in 1996. The name comes from the company's origins in an internet cafe owned by its founder. The company currently creates over 25 software applications for creating, designing, and editing websites and a number of online services for webmasters. The company's third product, CoffeeCup Direct FTP, was the first FTP program to incorporate text editing functionality directly into the interface in a "split screen" fashion.

Bootstrap

getbootstrap.com

Bootstrap is a front-end interface for easy website development. It uses HTML5, CSS, and JavasScript to create templates that have amazing features such as typography, forms, buttons, tables, navigation, modals, image carousels and other animations along with JS (JavaScript) Plugins. Bootstrap was developed by Mark Otto and Jacob Thronton from Twitter and was released on GitHub in August 2011.

It is extremely easy to use and is able to be implemented very easily on phones, tablets, and desktops all at once. Many of the starting templates for bootstrap already have mobile styles built in so theres no extra work when creating a website, it will automatically adjust dimensions and features to fit on a mobile or tablet screen. It also is compatible with the major, modern browsers with immense responsiveness. It makes life easy for web developers and the possibilities for design, endless.[20]

Websites Builders

Over the past couple of years, there has been an emergence of web services that allow anyone to develop their own website.


WIX.COM Founded in 2006 by Avishai Abrahami, Nadav Abrahami, and Giora Kaplan, Wix is a cloud-based web development platform that can be used for various purposes, such as business, photography, design, portfolio, music, events, and others. It has a wide range of templates to choose from and is broken out by the purpose of the website created. It also has a section for designers to explore and be inspired by designs from other Wix users. In 2014, Wix had reached fifty million users. [21]

WEB.COM Founded in 1997, Web.com allows its users to build their own website for free and can be also used for mobile websites. Users can choose their own free domain name. It has online tracking tools to give users insight into the performance of their websites. Its services extend to website design, logo design, search engine optimization, and search engine marketing. [22]

GODADDY.COMGoDaddy Inc is the largest internet domain registrar and web hosting company. As of May 2017, Godaddy had almost 17 million customers and more than 6000 employees globally. It was founded by a Baltimore resident and entrepreneur Bob Parsons in 1997. After his retirement in 1997, Parsons had launched Jomax Technologies, which was later named GoDaddy Inc. To add on, in 1999, a group of male employees at Jomax technologies was thinking to change the name of the company until one employee came up with the idea “How about Big Daddy?”. Since the domain name was already taken, Parsons came up with the idea of “Go Daddy”. Lastly, this domain was available and he bought it.

[23]

WEEBLY.COM Weebly was founded in 2007 in San Francisco. Its users can create a free website or blog with their accounts. It supports eCommerce, blogging, hosting, and domain names. Users can build websites through WYSIWYG and can work on offline mode. Also, they have many themes to choose from. Users can publish blog posts, quickly respond to their comments, and monitor the website or blog activity on their dashboard. Weebly has approximately thirty million users. [24]

SQUARESPACE This is also another website service that allows individuals to design their own webpage, even if they have no coding knowledge. Squarespace was launched in 2004 in Maryland and since then thousands of websites have been created using this web service. Like Weebly, Squarespace allows users to select from pre-designed templates and drag-and-drop design elements to their webpage. In addition, to building the website, persons can use the site analytics to measure daily visits, etc. [25],

Screen Shot 2020-12-09 at 3.24.57 PM.png


How to design a website:

1. Choose from one of Squarespace’s best-in-class website templates.

2. Use our website builder to customize pages, menus, and navigation.

3. Change fonts, imagery, and margins with the built-in style kit.

4. Preview your responsive web design on mobile devices.

5. Create a logo for your brand with our free logo maker.

6. Add a custom domain to your website.[26]

Wix website

Web Content Management System

Web content management systems[27] (WCMS) is a system used to create and manipulate the content of a website. Basically, using the browser, the CMS will let user create or edit content with an editor and publish it in a live environment. The whole process is in a controlled secured application stored and tracked audit trails in a database. A good example of this is Joomla[28]. Joomla is an award-winning CMS which can help build web sites and powerful online applications. It's one of the most popular open source CMS currently available. If you're adept in using PHP and MYSQL, Joomla is highly recommended.


Joomla 01.jpg


BENEFITS OF USING CMS

  • No coding experience - web authoring as simple as creating a document in Microsoft Word. Easy software to use, no technical requirements necessary.
  • Modern web functionality - as web standards change, so does your site. Regular updates will be provided for users to utilize new functions for editing.
  • Freedom for revisions - anytime, anywhere access to make frequent updates, or to just simply add or change an image or event to your website.
  • Cost - some free software are available without hiring a professional web developer.


DRAWBACKS OF USING CMS

  • Search rank - search engine optimization doesn't work well on sites developed with CMS. Since the templates are vastly available, codes generated for these templates are quite similar and hinder them to go up the list in ranking.
  • File size - although the site may be a simple one, the file size is as large as a complex web site. This affects the performance. The slow speed results from high volume of traffic.
  • Complicated updates - plugins compatibility can be a huge project. If you're not technical savvy, troubleshooting compatibility plugins would be time consuming and some important functions would not be available during development. Extra training might be necessary to be adept in maintaining web pages.


Other related examples of CMS:

HTML Color Codes

Htmlcolors.png

HTML code format: Each HTML code contains a "#" symbol and 6 subtitles and numbers. These numbers are all hexadecimal. For example, "FF" represents the decimal number 255 in hexadecimal.

Symbolic meaning: The first two symbols in the HTML color code indicate the concentration of red. 00 means the lightest color and FF means the darkest color. The third and fourth symbols indicate the concentration of green, and the fifth and sixth symbols indicate the concentration of blue. Thus, by combining various concentrations of red, green and blue, we can match any desired color.

Examples:

1. #FF0000 - With this HTML code we tell browser to show maximum of red and no green and no blue. The result is pure red color.

2. #00FF00 - This HTML code shows just green and no red and blue. The result is green.

3. #0000FF - This HTML code shows just blue and no red and green. The result is blue.

4. #FFFF00 - Combination of red and green color gives us yellow.

5. #CCEEFF - Take some red a bit more of green and maximum of blue to get color of sky.[32]

Search Engine Optimization

SEO Strategy

Search engine optimization (SEO) is any techniques applied to the content or code of a web page that assists with the indexing of a site by search engines and the improvement of the site's ranking order within them. Because search engines often rely on computerized bots to crawl the web and to develop and maintain their indexes, many of the SEO concepts can be easily implemented by thinking strategically about the site's content, title tags, meta tags, and page structures. When the site has been optimized for search engines, the site's URL can be submitted to search engines, which itself can help visitors find the site and improve the site's ranking within the search engine results.

Maximizing keywords

One of the things that search engine robots do is search for meaningful content within the text on pages that they crawl. This means that the website's content need to help those bots by including site-specific keywords that identify site's products and services, especially on the home page.

Embedding object and image descriptions

Another great SEO technique is to use the HTML title and alt attributes to describe certain page elements and images. You can add the HTML title attribute to several different tags, such as hyperlinks, tables, table cells, and table rows. This attribute also improves accessibility by describing the contents found within the page.

Adding keyword and description meta tags

Another commonly used technique is to add keyboards to the meta tags in the header of all website pages or to have updated them with accurate and relevant information. You can add several meta tags to your code to assist with making the pages search engine friendly. Keep in mind that any meta tags in the header should be relevant to the site's content, and should not be used to mislead the search engine crawler to artificially improve the site's ranking.

File Transfer Protocol

File transfer protocol (FTP) is a standard protocol for transferring files over a network. It allows us to move files between computers. FTP users can authenticate using the plaintext login protocol, usually in the form of a username and password, but can connect anonymously if the server configuration allows. FTP typically USES SSL/TLS (FTPS) for secure transfers that protect user names and passwords and encrypt content or SSH file transfer protocol (SFTP) for replacement. The first FTP client application was a command-line program developed before the operating system had a graphical user interface and is still available with most Windows, Unix, and Linux operating systems. Since then, many FTP clients and automation utilities have been developed for desktops, servers, mobile devices, and hardware, and FTP has been incorporated into productivity applications such as HTML editors. [33] For example, we created a web page on the one computer and used FileZilla to upload the files used on the website to the server. So we can download what we've done from the server. These files can be obtained according to our host and account number.

References

  1. http://www.wisegeek.org/what-is-web-design.htm
  2. https://www.expertmarket.co.uk/web-design/different-types-of-websites
  3. http://www.1stwebdesigner.com/design/web-design-history-from-the-beginning/
  4. http://www.w3.org/
  5. https://www.w3schools.com/css/default.asp
  6. https://en.wikipedia.org/wiki/JavaScript
  7. https://www.w3schools.com/php/php_intro.asp
  8. https://en.wikipedia.org/wiki/Wix.com
  9. http://www.oxforddictionaries.com/definition/english/WYSIWYG/
  10. http://www.adobe.com/products/dreamweaver.html/
  11. http://en.wikipedia.org/wiki/SEO_%28disambiguation%29
  12. http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7beaa.html#WSc78c5058ca073340dcda9110b1f693f21-7be2a
  13. http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7b86a.html#WSc78c5058ca073340dcda9110b1f693f21-7b7ca
  14. http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7fb7a.html
  15. https://en.wikipedia.org/wiki/Source-code_editor
  16. https://en.wikipedia.org/wiki/Brackets_(text_editor)
  17. https://en.wikipedia.org/wiki/Notepad%2B%2B
  18. https://www.adobe.com/creativecloud/catalog/desktop.html?promoid=KOVFF
  19. http://netobjects.com/html/website-design-software.html#css3-deisgn-grid
  20. http://getbootstrap.com/
  21. http://www.wix.com/about/us
  22. https://www.crunchbase.com/organization/web-com#/entity
  23. https://en.wikipedia.org/wiki/GoDaddy
  24. http://www.weebly.com/about
  25. http://www.squarespace.com/about/company
  26. https://www.squarespace.com/website-design/?channelE
  27. http://en.wikipedia.org/wiki/Content_management_system#cite_note-5
  28. http://www.joomla.com
  29. http://en.wikipedia.org/wiki/WordPress
  30. http://en.wikipedia.org/wiki/Drupal
  31. http://en.wikipedia.org/wiki/ExpressionEngine
  32. https://html-color-codes.info/
  33. https://en.wikipedia.org/wiki/File_Transfer_Protocol