Web design
When it comes to creating and maintaining websites, web design incorporates a wide range of knowledge and expertise. Graphic design for the web, authoring (using both industry-standard code and custom software), UI design, UX design, and SEO all fall under the umbrella of web design. However, some designers will take on all of the tasks involved in the design process. The front-end (client-side) design of a website, including the creation of markup, is typically what people mean when they talk about “web design.” When considering the bigger picture of online development, web design and web engineering usually overlap. As part of their job responsibilities, web designers must keep up-to-date on the latest accessibility standards and maintain a keen understanding of user experience.
1988–2001
Despite its relative youth, web design can be related to fields like graphic design, user experience, and multimedia arts; yet, it is best understood in a technological context. It has permeated nearly every aspect of modern life. It’s difficult to picture the web without gifs and gif animations, varying types of background and video and audio, and other multimedia elements.
The start of the web and web design
While working at CERN in 1989, Tim Berners-Lee suggested the idea for what would become the World Wide Web, a global hypertext project. As a concept, the World Wide Web emerged between 1991 and 1993. A line-mode web browser would work for reading text-only HTML pages. Web browser Mosaic was developed by Marc Andreessen and Eric Bina in 1993. Numerous browsers existed at the time, the most majority of which were Unix-based and, hence, text-heavy. Visual and aural components of design had hitherto been treated separately. This was a pattern that the Mosaic browser destroyed. In order to “bring the World Wide Web to its full potential,” the World Wide Web Consortium (W3C) was established in October 1994. This prevented a single business from imposing its own proprietary browser and programming language, which may have had far-reaching consequences for the Internet. The W3C is still actively establishing norms, as is shown in the case of JavaScript and other languages today. Andreessen founded Mosaic Communications Corp. in 1994, which developed into Netscape Communications and released the Netscape 0.9 web browser. Without considering the standardisation process, Netscape built its own HTML tags. You could use tags in Netscape 1.1 to alter the colour scheme of a webpage’s backdrop and add tables to format text. The browser wars between Microsoft and Netscape began in 1996 and continued until 1999. Cascading Style Sheets, JavaScript, and Dynamic HTML were just a few of the recent advancements in the industry. Overall, there were some good outcomes from the browser wars, and they sped up the general development of online design.
Evolution of web design
Microsoft’s original browser, which featured its own capabilities and HTML elements, was released in 1996 as a direct competitor to Netscape. It was also the first browser to have support for style sheets, a once-obscure writing technique that is now fundamental to successful website design. As its name suggests, tabular data is the original purpose of the HTML markup for tables. HTML tables were initially intended for simpler purposes, but designers rapidly saw their potential for producing intricate, multi-column layouts. During this time period, semantics and web accessibility were mostly ignored in favour of a focus on design and visual appeal. Websites built with HTML have restricted design possibilities, especially in early versions of the language. Web designers sometimes resort to elaborate table structures or blank spacer.GIF images to prevent collapsed table cells when working with sophisticated designs. [6] For the purpose of facilitating display and layout, the W3C introduced CSS in December 1996. This resulted in more semantic HTML code, rather than a combination of semantic and presentational elements, and enhanced web accessibility (for more on this, see tableless web design).
Flash (at the time called FutureSplash) was created in 1996. Despite its rudimentary layout and drawing capabilities, limited predecessor to ActionScript, and timescale, Flash was a game-changer for online design because it allowed developers to move beyond the limitations of HTML, animated GIFs, and JavaScript. Flash, however, required a plug-in, so many web developers avoided utilising it for fear of alienating a portion of their audience. Instead of employing motion graphics, designers have gone back to using gif animations and JavaScript for widgets. Flash’s useful features, however, made it widely adopted by the majority of browsers and powerful enough to be employed in the creation of entire websites.
End of the first browser wars
Browser Wars The First Browser War Detailed Information (1995–2001)
Through an open source licence, thousands of developers have contributed to and improved Netscape Communicator since its 1998 release. However, these programmers opted to build a web standard from scratch, which led the development of the open source browser and eventually grew into a full application platform. It was with this goal in mind that the Web Standards Project was established; its goal is to have all modern browsers support the same set of HTML and CSS standards. Acid1, Acid2, and Acid3 are just a few examples of the many programmes developed to ensure browsers are up to par with modern web standards. The first browser to offer full support for HTML 4.01 and CSS 1 was Internet Explorer for Mac, which was released in 2000. It also pioneered full support for the Portable Network Graphics (PNG) picture format. After a massive marketing push by Microsoft, Internet Explorer had captured 96% of the market by 2001, thereby ending the first browsers wars.
2001–2012
The internet has been increasingly important in people’s daily lives since the turn of the century. The web’s underlying technology has also advanced during this time. The way people browse and utilise the internet has also evolved, which has influenced new trends in web design.
New browsers have been released since the browsers wars ended. Since many of them are open source, they are more likely to be updated often and to embrace new standards. Many people think the new choices are superior to Microsoft’s Internet Explorer [weasel words].
The W3C has issued several new standards, including HTML5 and CSS3, as well as new JavaScript APIs.
[when?]
HTML5 is commonly used to refer to the full suite of new standards, even though it really only refers to the new version of HTML and some of the JavaScript APIs (HTML5, CSS3 and JavaScript).
Afterwards the year 2012
Increases in 3G and LTE availability have led to a dramatic increase in mobile-generated website traffic. Web designers were influenced by this trend toward minimalism, which led to a more airy, straightforward aesthetic. Specifically, the “Mobile first” strategy became popular, which entails prioritising mobile-friendly layout when developing a website’s design before expanding its reach to larger screens.
Tools and technologies
Web designers’ toolkits are as varied as the tasks they undertake. While more standards and software may be introduced to these tools throughout time, the underlying concepts will always be the same. Vector and raster graphics editors are used by web designers to produce images and designs for the web. You can design a website the traditional way, by hand-coding each page, or you can use a content management system or WYSIWYG website builder. Web designers can also utilise mark up validators and other usability and accessibility testing tools to guarantee their sites are compliant with web accessibility rules.
Skills and techniques
Marketing and communication design
As a website’s marketing and communication strategy matures, it may gain insight into the preferences of its target audience. This can be a specific demographic or cultural subset, and it can help the designer identify and cater to consumer tastes. Designers may also be aware of the website’s intended audience; for instance, developing a website for business-to-business (B2B) purposes may require a different set of priorities than designing a website for retail or leisure. Particularly in the case of a business-to-business (B2B) website, care may be taken to ensure that the site’s aesthetics or general design do not conflict with the readability and accuracy of the material or the convenience of the site’s navigation. Designers may also take into account the owner’s or company’s standing in the community to provide a positive representation.
User experience design and interactive design
Having a firm grasp on the site’s functionality is crucial to fully appreciating the site’s content. This is all a part of making a good user experience. Website usability is connected to factors such as design and the clarity of its instructions and labels. It’s possible that the site’s interactive design will determine how effectively users grasp the various ways they might engage with its content. It’s more probable that a user will stick with a website if they find it helpful. A more unique but less intuitive or user-friendly website interface may nonetheless be valuable to those who are well-versed in website use. Users with less experience, however, are less likely to appreciate the benefits of a less intuitive website interface. This motivates the movement toward a more consistent and intuitive interface that can be used by people of varying technical abilities. When designing a user interface, a lot of thought goes into the user experience design and the interactive design.
Plug-ins or expert coding abilities may be needed for more complex interactive features. Whether or not to employ interactive features that necessitate plug-ins is a crucial consideration in UX design. If the plug-in isn’t already built into most browsers, users may be unable to view the material because they lack the technical knowledge or time to manually instal the plug-in. It may not be worth the effort (in terms of either time or money) to implement the feature if doing so necessitates expertise with a high-level programming language. There is also the possibility that more modern forms of interactivity will not work on computers running outdated web browsers. If a function isn’t consistently working, and it’s released, it could negatively impact the user experience more than if it hadn’t been released at all. If it’s likely to be needed or if the dangers are acceptable, it all relies on who you’re trying to reach.
Progressive enhancement
Progressive improvement – main article
Web designers that practise progressive enhancement ensure that all visitors to their sites have access to the site’s essential information and functionality regardless of their browser or connection speed.
In reality, this means presenting content through HTML and applying styling and animation through CSS to the technically achievable extent, then applying further refinements through JavaScript. Content can be read with little loading time and bandwidth, using text-based browsers, and with maximum backwards compatibility because text is loaded immediately through the HTML source code rather than needing to wait for JavaScript to commence and load the content afterwards.
The content of MediaWiki-based sites like Wikipedia uses progressive enhancement because it is included in the HTML source code, even when JavaScript and CSS are disabled, whereas the content of Everipedia relies on JavaScript to load pages’ content subsequently; a blank page appears with JavaScript deactivated.
Page layout
The quality of the page layout has an impact on the UX design. If the site’s page layout needs to be consistent across pages, for instance, the designer will need to take it into account. The width of the page in pixels may also be considered critical for properly aligning design elements. The most visited fixed-width websites all have the same fixed width, which is optimised for the most frequently used browser window, screen resolution, and screen size. Due to considerations about visual appeal on larger displays, the majority of pages are also centred.
Around the year 2000, fluid layouts began to gain popularity because they allowed the reader’s browser to adapt the layout to the reader’s specific screen (window size, font size relative to window etc.). Both in terms of design philosophy for page layout and coding method, they evolved as an alternative to HTML tables but were sluggish to gain traction. [note 1] Designers had to take this into account because they couldn’t dictate the size of the user’s window or whether or not screen reading devices would be used. As a result, a layout can be broken down into constituent parts (sidebars, content blocks, embedded advertising sections, navigation areas) that are then transmitted to the browser and, to the extent possible, rearranged within the confines of the viewing window. It’s possible that sidebars, which normally appear alongside main text, will move below the main text in such a layout. This pattern can be easily adjusted to accommodate any screen size, unlike a rigid grid-based design. In particular, content blocks’ relative positions can shift without affecting the blocks’ actual contents. This reduces the amount of horizontal scrolling the user must do, as well.
Using CSS3 and more precise device-specificity within the page’s style sheet via an expanded usage of the CSS @media rule, responsive web design is a more recent way to designing websites. In March 2018 Google said they would be rolling out mobile-first indexing. Websites that use responsive design will already be set up to work with this new methodology.
Typography
Main article: typography
Instead of employing a large selection of typefaces or type styles, web designers may opt to use only a select number that are stylistically comparable. It’s common practise for designers to stick to a small set of “safe fonts” that are supported by most browsers.
Safari 3.1, Opera 10, and Mozilla Firefox 3.5 all support font downloading now that it’s part of the CSS3 fonts module. As a result, more people are interested in and using font downloads for web typography.
Most website designs use negative space to separate paragraphs of text and prevent a wall of continuous center-aligned text.
Motion graphics
There is a chance that including moving images into a page will alter the design and functionality of the user interface. Whether or not a website uses moving images depends on its intended audience. An entertainment-focused website is more likely to benefit from, if not require, the inclusion of motion graphics. Website visitors who are looking for information rather than amusement or adornment may find animations annoying and unneeded if they are visiting a corporate, community, or government-related website. This doesn’t rule out the possibility of enhancing even more serious topics with appropriate cartoon or video presentations. Motion graphic design may be the deciding factor in whether or not visuals are successful or distracting.
When a user isn’t able to control the motion of a visual, it can cause accessibility problems. Website users must have the option to disable the animations in accordance with the guidelines set forth by the World Wide Web Consortium’s Accessibility Standards.
Quality of code
A lot of web developers and designers think it’s a good idea to stick to the rules. A description of the element’s behaviour is typically used for this purpose. Even if a website isn’t unworkable or prone to errors because it doesn’t follow standards, it’s still important to ensure sure everything is laid out correctly for readability and that all of the programmed elements are closed properly. There needs to be less sloppiness in the code, a cleaner layout, and better naming of IDs and classes. Tag soup is a common term for poorly coded web pages. In order to validate via W3C, a proper DOCTYPE declaration must be created, which is then utilised to flag any coding inaccuracies. Mistakes and locations that deviate from web design guidelines are highlighted by the system. Afterward, the user can revise this data as needed.
Generated content
You can either generate a website statically or dynamically.
Static websites
Main article: Static web page
Each page of a static website has its own separate file. It always gives the same result when that page is requested. This information is developed just once, during the website’s development. Although most websites use a human author, some use an automatic creation process that stores the finished pages permanently, much like a dynamic website. Around 2015, generators like Jekyll and Adobe Muse helped increase the popularity of automatically generated static websites.
A static website’s hosting costs were lower because the site’s server didn’t have to do any processing of dynamic material (like executing server-side scripts). There was less need for server administration and fewer potential security flaws were opened as a result. They could speed up page delivery by using less expensive server gear. Due to the rise of cheap web hosting that includes dynamic features and the availability of high-performance, low-cost virtual servers for brief periods, these benefits have diminished in significance.
Static content is present on the vast majority of websites since even extremely dynamic pages require static assets like photos and style sheets.
Dynamic websites
Main article: Dynamic web page
Web pages for dynamic websites are produced instantly by a server. Some are database searches over a relational database to query a catalogue or to summarise numeric information, while others may use a document database like MongoDB or NoSQL to hold larger units of material, such as blog posts or wiki pages.
Static pages are sometimes used as placeholders or mockups during the design process before moving on to the more complex dynamic pages. Unlike static pages, which just require knowledge of HTML and CSS, developing dynamic web pages requires knowledge of server-side and database code in addition to client-side interface design. That’s why it’s nearly always a group endeavour, even for medium-sized dynamic projects.
Initially, languages like Perl, PHP, and ASP were used for coding dynamic web pages. Some of them, particularly PHP and ASP, adopted a ‘template’ method where a server-side page matched the structure of the full client-side page and data was added into areas designated by ‘tags. This method of development was far more efficient than using a purely procedural language like Perl.
These methods are no longer utilised since content management systems and other application-focused tools have replaced them. These are extensions of generic web development tools that are based on the premise that a website already existing to provide content in accordance with a specific model, such as a chronological blog, a topical magazine or news site, a wiki, or a user forum. Using these resources, putting together such a site is as simple as organising and designing it; no coding is required.
Site-based and third-party editors are both available for modifying the actual content (as well as the template page). Only a subset of users have access to the tools necessary to modify every page (for example, administrators, or registered users). Even while it’s not common, some websites do allow anonymous users to alter material (for example, on forums – adding messages). Wikipedia is an example of a site where changes can be made incognito.
Homepage design
The homepage, according to usability experts such as Jakob Nielsen and Kyle Soucy, is the most crucial page of any website.
Homepage Usability: 50 Websites Deconstructed, by Jakob Nielsen and Marie Tahir, New Riders Publishing, October 2001, ISBN 978-0735711020.
But professionals in the 2000s began to notice that a sizable portion of website visitors were skipping the homepage and heading straight to internal content pages via search engines, e-newsletters, and RSS feeds. [21] This has led many professionals to conclude that homepages are not as crucial as the general public believes. In 2007, Jared Spool claimed that the homepage of a website was the least crucial page.
In 2012 and 2013, carousels (also known as “sliders” and “spinning banners”) were an incredibly popular design element on homepages, typically used to promote featured or recent material in a limited amount of real estate.
Carousels, according to some experts, are bad for a website’s usability and SEO and should be avoided.
Occupations
Websites require the efforts of both a web designer and a web developer, who frequently collaborate on a project.
Website aesthetics, such as design, colour scheme, and typeface, are the purview of web designers. While the depth of each web designer’s knowledge of markup languages like HTML and CSS will vary, everyone will have at least a working familiarity with these tools. While larger companies may have a separate web designer responsible for the visual part only, smaller businesses would likely rely on a single person with the requisite skills to design and programme the entire web page.
The development of a website may also necessitate the following additional tasks:
- Logos, page layouts, and button designs are all tasks for the site’s graphic designers to tackle.
- Experts in online promotion use a variety of tools to get new visitors to a website and keep the ones they already have coming back for more.
- SEO writers do research and give recommendations for the most effective use of language to increase a website’s visibility across a wide range of search engines.
- Internet copywriter whose job it is to write page copy that will pique the interest of the site’s intended audience.
- Information architecture, user-centered design, user testing, interface design, and even graphic design are all part of a user experience designer’s toolkit.
