Web design and Development
G SAI KUMAR (23382014)
SHIVA KUMAR M (23382027)
WEB DESIGN
What is Web Design?
Web design is the process of planning, conceptualizing, and
arranging content online. Today, designing a website goes
beyond aesthetics to include the website’s overall
functionality. Web design encompasses everything from the
overall look and feel of the website, the user interface (UI),
the user experience (UX), and the site's performance
including loading time and SEO.
Designing a Website
(i) Understanding Your Audience
When getting inspired and beginning to conceptualize your website,
it's important to consider your users' needs and expectations.
Understanding your audience will help you develop a website with
clear messaging and a clear user journey
Create audience personas in order to get to know your audience
demographics, wants, needs, and struggles. This will help guide your
website messaging and design.
(ii) Choosing a Web Design Tool
There are two main ways to design a website: using a desktop app or
using a website builder. The tool you decide to use will vary greatly
based on your team size, your budget, and the type of site you wish to
build and its technical requirements.
1. Desktop Apps
Desktop apps require designers to create their design and send it to a development team who can
then convert the design to code. The most popular desktop apps for designing websites are
Photoshop, Sketch, and Figma
2. Website Builders
There are many website builders on the market today that offer a wide range of features and
services. Wix, Squarespace, Webflow, and Pagecloud, are just a few examples of popular website
builders that vary in design capabilities, template options, price, and overall editing experience.
Be sure to do your research, experiment with free trials, and determine which platform best fits
your website needs.
“Important Elements of Web Design”
When designing a website it’s important to consider both the site’s appearance and functionality.
Integrating these elements will maximize the site’s overall usability and performance. Your site’s
usability includes elements such as an easy-to-navigate interface, appropriate use of graphics and
images, well-written and well-placed text, and a color scheme. Your site’s performance refers to its
speed, ranking, searchability, and ability to capture your audience.
Visual elements
1. Written copy
Fundamentally, your website’s appearance and text go hand-in-hand. It’s important to have your content
writers and designers work together in order to create a cohesive design with balanced elements. Focus on
creating chunks of text (using text blocks) in order to compliment your graphics and images.
2. Fonts
Choose a font that compliments your brand tone, messaging, and overall design. Font should pair with your
color scheme, graphics, images, and strengthen the overall tone of your website. Tools like
Canva’s Font Combinator or Design Sidekick can help you identify fonts and find font pairings.
3. Colors
Colors are one of the most important elements to consider when designing a website. If you've
created a brand kit for your business, you likely already have a colour palette you will be using
for your website. If not, try a free color palette generator to find complimentary colors for your
design.
Keep in mind there are many misconceptions about the psychology of color, and it’s more
important to focus on colors that compliment your overall design and tone of your website.
Align your color scheme with your brand and the messages you want to convey to your
audience
4. Layout
How you decide to arrange your content will have a dramatic impact on both the usability and
functionality of your site. There are no specific rules to follow when choosing a layout, however,
there are a few main principles to keep in mind. Make sure to consider the needs of your target
audience and avoid using an overstimulating layout that might detract from the messages you
want to convey.
5. Shapes
The use of graphic elements in web design can help seamlessly integrate text and images, and
help with the site’s overall appearance. Combining beautiful colors and shapes can help direct the
attention of your sites visitors and contribute to your site’s overall flow
6. Spacing
Spacing is a key element to creating visually pleasing and easy to navigate websites. Every element in your
design will incorporate spacing in one way or another. Make sure your spacing is consistent between
different elements, for example, each image, text element, and button in the image below use the same
spacing
7. Images & Icons
Amazing designs can communicate a lot of information in just a few seconds. This is made possible with the use of
powerful images and icons. Choose images and icons that support and strengthen your message. A quick Google
search for stock images and icons will generate thousands of options. To help simplify your search.
8. Videos
Integrating videos into web design is becoming increasingly popular amongst designers. When used
properly, videos can help your users experience or understand a message that can’t be properly
conveyed through text or image.
Keep in mind that like having a TV screen on in a restaurant, visitors’ eyes will be drawn to moving
images. Make sure your videos don’t compete with or detract from other important elements. Avoid
video autoplay as it can disrupt user experience, increase page load times, and annoy visitors. It
may also drain mobile data and distract from key content, leading to higher bounce rates.
Functional
elements
“These functional elements are imperative to consider when designing your website. A
website that functions properly is crucial for ranking highly on search engines, and giving
your users the best possible experience.”
1. Navigation 4. Speed
2. User Interactions 5. Site structure
3. Animations 6. Cross-browser & cross-device compatibility
1. Navigation
Your website’s navigation is one of the main elements that determines whether your website is
functioning properly. Depending on your audience, your navigation can serve multiple purposes:
helping first time visitors discover what your site has to offer, giving easy access to your pages for
returning visitors, and improving every visitor's overall experience
2. User Interactions
Your site visitors have multiple ways of interacting with your site depending on their device
(scrolling, clicking, typing, etc.). The best website designs simplify these interactions to give the
user the sense that they are in control. Here are a few examples:
Never auto-play audio or videos
Never underline text unless its clickable
Make sure all forms are mobile-friendly
3. Animations
There are tons of web animation techniques that can help your design grab visitor’s attention, and allow
your visitors to interact with your site by giving feedback. For example, adding “like” buttons or forms can
keep your site’s visitors engaged. If you’re new to web design, we’d recommend keeping your
animations simple to avoid developer intervention or overstimulating your users.
4. Speed
No one likes a slow website. Having to wait more than a few seconds for a page to load can
quickly deter a visitor from remaining on or returning to your site. Regardless of how beautiful, if your
site doesn’t load quickly, it will not perform well in search (i.e. won’t rank high on Google). Top site
builders typically compress your content for faster load times, however, there are no guarantees.
Make sure to research which site builders will work best for the content you will have on your site
5. Site structure
A website’s structure plays an important role in both user experience (UX) and search engine
optimization (SEO). Your users should be able to easily navigate through your website without
encountering any structural issues. If users are getting lost while attempting to navigate through
your site, chances are “crawlers” are too. A crawler (or bot) is an automated program that
searches through your website and can determine its functionality. Poor navigation can lead to a
poor user experience and site ranking.
6. Cross-browser & cross-device compatibility
A great design should look polished on all devices and browsers (yes, even Internet Explorer). If
you’re building your site from scratch, we’d recommend using a cross-browser testing tool to
make this tedious process faster and more efficient. On the other hand, if you’re using a website
building platform, the cross-browser testing is typically taken care of by the company’s
development team allowing you to focus on design.
Types of Website Design: Adaptive vs.
Responsive
Adapts based on device type
When your browser connects to a website, the HTTP request will include a field called “user-agent”
that will inform the server about the type of device attempting to view the page. The adaptive
website will know what version of the site to display based on what device is trying to reach it (i.e.
desktop, mobile, tablet). Issues will arise if you shrink the browser window on a desktop because the
page will continue to display the “desktop version” rather than shrinking to the new size
2. Adapts based on browser width
Instead of using the “user-agent”, the website uses media queries (a CSS feature that enables a
webpage to adapt to different screen sizes) and breakpoints (certain width sizes) to switch between
versions. So instead of having a desktop, tablet, and mobile version, you will have 1080px, 768px,
and 480px width versions. This offers more flexibility when designing, and a better viewing
experience as your website will adapt based on screen width.
2. Adapts based on browser width
Pros
• WYSIWYG editing (what you see is what you get)
• Custom designs are faster and easier to build without code
• Cross-browser and cross-device compatibility
• Fast-loading pages
Cons
• Websites that use “device-type” can look broken when viewed in a smaller browser window on a
desktop
• Limitations on certain effects that only responsive sites can accomplish
Responsive Websites
Responsive websites can use flexible grid layouts that are based on the percentage each element takes up in its
container: if one element (e.g. a header) is 25% of its container, that element will stay at 25% no matter the
change in screen size. Responsive websites can also use breakpoints to create a custom look at every screen
size, but unlike adaptive sites that adapt only when they hit a breakpoint, responsive websites are constantly
changing according to the screen size.
Pros
• Great experience at every screen size, regardless of the device type
• Responsive website builders are typically rigid which makes the design hard to
“break”
• Tons of available templates to start from
Cons
• Requires extensive design and testing to ensure quality (when starting from
scratch)
• Without accessing the code, custom designs can be challenging
WEB DEVELOPMENT
CONTENT MANAGEMENT SYSTEM
WEB DEVELOPMENT TOOLS
Tool Launch Date Downloads USP Founders Freemium/ Free
Powerful and
Over 12
customizable code
Visual Studio million
April 29, 2015 editor with Microsoft Freemium
Code monthly active
extensive plugin
users
ecosystem
Adds optional static
Over 15 typing to JavaScript, Anders
October 1,
TypeScript million weekly improving Hejlsberg Freemium
2012
downloads scalability and (Microsoft)
maintainability
Cloud platform for
static sites and
server-rendered Guillermo
Over 3 million
September 23, applications with Rauch, Shu
Vercel websites Freemium
2015 focus on Ding, Tim
hosted
performance and Neutkens
developer
experience
Adam Wathan,
Over 1 million Utility-first CSS Jonathan
November 1,
Tailwind CSS weekly framework for rapid Reinink, Steve Freemium
2017
downloads UI development Schoger, and
Caleb Porzio
Tool Launch Date Downloads USP Founders Freemium/ Fr
Comprehensive Abhinav Asthana,
Over 20 million API development Ankit Sobti, Abhijit
Postman February 2012 Freemium
users and testing Kane, and Kunal
platform Batra
Comprehensive
set of web
Chrome Developer September 2, Integrated into development and
Google Freemium
Tools 2008 Google Chrome debugging tools
built into the
Chrome browser
Identity
management Free for individ
Over 100,000 platform for Eugenio Pace and use, paid plans
Auth0 March 2013
customers secure user Matías Woloski teams and
authentication enterprises
and authorization
Open-source tool
November 13, Over 3 million for web
Selenium Jason Huggins Free
2004 downloads automation and
testing
No-code platform
Free for individ
for building and Kabir Nagpal, Cory
CONCLUSION
Web design and development are essential components of creating a successful online
presence. Web design focuses on the visual and user experience, while web development brings
the design to life through code and functionality. The two disciplines are interdependent, requiring
collaboration and a shared understanding of project goals.
The web development process involves careful planning, design, development, testing,
and deployment. Continuous maintenance and updates are crucial for ensuring the website
remains functional, secure, and relevant.
By adhering to best practices in web design and development, businesses and individuals can
create engaging and effective websites that meet the needs of their target audience. The
rapid evolution of web technologies necessitates continuous learning and adaptation to stay
ahead of the curve. Whether you are focused on the creative aspects of design, the logic of
development, or the combination of full stack development, the internet provides a dynamic and
ever expanding field of opportunity.
