This document summarizes a presentation on web design and user experience design. It begins with introducing common terms related to web design. It then discusses the evolution of the web from the 1990s to today. It outlines the five planes of user experience design according to Jesse James Garrett: strategy, scope, structure, skeleton and surface. Examples and tools for each plane are provided. More common terms related to web development, content management systems and how websites are built are defined. Takeaways focus on how the web is evolving with new technologies, the importance of user experience design and resources for learning more.
ChatGPT
!
Web designing is a dynamic and creative process that involves conceptualizing, planning, and crafting visually appealing and user-friendly websites. It is a multidisciplinary field that combines elements of graphic design, user interface (UI) and user experience (UX) design, and coding to create a seamless and engaging online presence.
A skilled web designer employs a keen understanding of aesthetics, color theory, and layout principles to bring a website to life. They focus on creating a visually harmonious and intuitive user interface that not only captivates visitors but also enhances the overall user experience.
Popular apps are the ones which fulfill the user’s need, have rich UI, backed with robust performance and high availability. And of course, when you build a great app, you need to complement it with successful ROI strategies. And most importantly ensure faster time to market, as they say ‘Strike while the iron is hot’.
Let Harbinger Systems help you to get it right, the first time, every time!
1- What are key considerations for Startup?
2- How do you take idea to cost?
3- What is the ROI?
4- Design considerations for a robust design
5- How does one ensure less time to market?
ChatGPT
!
Web designing is a dynamic and creative process that involves conceptualizing, planning, and crafting visually appealing and user-friendly websites. It is a multidisciplinary field that combines elements of graphic design, user interface (UI) and user experience (UX) design, and coding to create a seamless and engaging online presence.
A skilled web designer employs a keen understanding of aesthetics, color theory, and layout principles to bring a website to life. They focus on creating a visually harmonious and intuitive user interface that not only captivates visitors but also enhances the overall user experience.
Popular apps are the ones which fulfill the user’s need, have rich UI, backed with robust performance and high availability. And of course, when you build a great app, you need to complement it with successful ROI strategies. And most importantly ensure faster time to market, as they say ‘Strike while the iron is hot’.
Let Harbinger Systems help you to get it right, the first time, every time!
1- What are key considerations for Startup?
2- How do you take idea to cost?
3- What is the ROI?
4- Design considerations for a robust design
5- How does one ensure less time to market?
GOOGLE DEVELOPERS STUDENT CLUB, MSIT Info Session.pdfIshikaPunchariya1
This presentation will be particularly based on 'What is GDSC?' and all the doubts around its methodology, the Team, Future Events, and Hackathons. Our Club i.e. Developer Student Clubs MSIT or DSC MSIT is a program presented by Google that aims to help students and peers build their development skills, gain knowledge, connect with like-minded people and grow as individuals.
Join Google Developer Students Club, DSC MSIT and get updates about every event:
https://gdsc.community.dev/maharaja-surajmal-institute-of-technology-delhi/
Connect with us through social media:
https://linktr.ee/DSCMSIT
Responsive Web Design: One Size No Longer Fits AllPerficient, Inc.
Designing to allow an ever-increasing number of devices to access your website or web application is a game you can never win. There is arguably little business benefit to targeting less-widely used devices, yet web-accessible smartphones that aren't iPhones constitute a large group of users that is costly to ignore.
Responsive Web Design is a new approach to the design and execution of websites and web applications that offers a way to cater to a much wider array of users and devices than would be possible otherwise. Through the use of modern web standards and a thorough execution plan it is possible to create attractive, brand-aware user experiences that work across a wide range of devices - feature phones, smartphones, tablets, netbooks, laptops and desktop computers - without requiring expensive device-centric development.
This slideshow covers:
• Costs and benefits of Responsive Web Design
• Examples of large-scale responsive websites currently deployed
• When to consider a responsive approach to your project
• The skills your team should have, and the techniques they should be using, when designing responsively
PepsiCo needed to:
Enable dashboards and selected applications on smart phones
Increase the usability and richness of custom applications
E.g. Port Demand Resource Planner from a thick client to an RIA
Establish a division of responsibilities between rich applications and portal umbrellas
There are many industries in which web designers can find work easily as the scope of web design courses in India is expanding year over year as the thinking of the people shifts toward starting a business from doing a job and opening many firms every year. So, Jeetech Academy provides the most reasonable web designing course in Delhi.
It’s time to start a new journey filled with suprises and quests. We at Google Developer Student Clubs, IIT Patna congratulates Freshers Batch’22 for making this far.
We had our Introductory session on 15/11/22 from 8:30 PM to 9:30 PM in room number 107, Block 9, IIT Patna.
Regardless of one’s technical knowledge, they can participate in our club activities and learn various domains like Blockchain, Web Development, Android Development, and more. Remember, there are no branch barriers and no prerequisites required so all can learn together.
Beginners involves learning the fundamental principles and skills required to create visually appealing and functional websites.
Are you excited to embark on a journey into the fascinating realm of web design? Look no further our "Web Design for Beginners" course is tailor made for individuals like you, eager to explore the art and science of creating stunning websites from scratch. Whether you're a tech enthusiast, a creative soul, or someone looking to enhance their skill set, this course is your key to unlocking the secrets of web design.
GOOGLE DEVELOPERS STUDENT CLUB, MSIT Info Session.pdfIshikaPunchariya1
This presentation will be particularly based on 'What is GDSC?' and all the doubts around its methodology, the Team, Future Events, and Hackathons. Our Club i.e. Developer Student Clubs MSIT or DSC MSIT is a program presented by Google that aims to help students and peers build their development skills, gain knowledge, connect with like-minded people and grow as individuals.
Join Google Developer Students Club, DSC MSIT and get updates about every event:
https://gdsc.community.dev/maharaja-surajmal-institute-of-technology-delhi/
Connect with us through social media:
https://linktr.ee/DSCMSIT
Responsive Web Design: One Size No Longer Fits AllPerficient, Inc.
Designing to allow an ever-increasing number of devices to access your website or web application is a game you can never win. There is arguably little business benefit to targeting less-widely used devices, yet web-accessible smartphones that aren't iPhones constitute a large group of users that is costly to ignore.
Responsive Web Design is a new approach to the design and execution of websites and web applications that offers a way to cater to a much wider array of users and devices than would be possible otherwise. Through the use of modern web standards and a thorough execution plan it is possible to create attractive, brand-aware user experiences that work across a wide range of devices - feature phones, smartphones, tablets, netbooks, laptops and desktop computers - without requiring expensive device-centric development.
This slideshow covers:
• Costs and benefits of Responsive Web Design
• Examples of large-scale responsive websites currently deployed
• When to consider a responsive approach to your project
• The skills your team should have, and the techniques they should be using, when designing responsively
PepsiCo needed to:
Enable dashboards and selected applications on smart phones
Increase the usability and richness of custom applications
E.g. Port Demand Resource Planner from a thick client to an RIA
Establish a division of responsibilities between rich applications and portal umbrellas
There are many industries in which web designers can find work easily as the scope of web design courses in India is expanding year over year as the thinking of the people shifts toward starting a business from doing a job and opening many firms every year. So, Jeetech Academy provides the most reasonable web designing course in Delhi.
It’s time to start a new journey filled with suprises and quests. We at Google Developer Student Clubs, IIT Patna congratulates Freshers Batch’22 for making this far.
We had our Introductory session on 15/11/22 from 8:30 PM to 9:30 PM in room number 107, Block 9, IIT Patna.
Regardless of one’s technical knowledge, they can participate in our club activities and learn various domains like Blockchain, Web Development, Android Development, and more. Remember, there are no branch barriers and no prerequisites required so all can learn together.
Beginners involves learning the fundamental principles and skills required to create visually appealing and functional websites.
Are you excited to embark on a journey into the fascinating realm of web design? Look no further our "Web Design for Beginners" course is tailor made for individuals like you, eager to explore the art and science of creating stunning websites from scratch. Whether you're a tech enthusiast, a creative soul, or someone looking to enhance their skill set, this course is your key to unlocking the secrets of web design.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Top 5 Indian Style Modular Kitchen DesignsFinzo Kitchens
Get the perfect modular kitchen in Gurgaon at Finzo! We offer high-quality, custom-designed kitchens at the best prices. Wardrobes and home & office furniture are also available. Free consultation! Best Quality Luxury Modular kitchen in Gurgaon available at best price. All types of Modular Kitchens are available U Shaped Modular kitchens, L Shaped Modular Kitchen, G Shaped Modular Kitchens, Inline Modular Kitchens and Italian Modular Kitchen.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
1. WEB DESIGN
DESIGN FOR THE WEB
Shaheed Bhagat Singh College, University Of Delhi
17 January 2019
2. AGENDA
• Introduction to common terms
• Evolution of the web & where we are today
• Elements of user experience design for the web
• More common terms
• Your web presence
• Q & A
17 January 2019Shaheed Bhagat Singh College, University of Delhi
2
3. INTRODUCTION TO COMMON TERMS
Internet Web
>
17 January 2019Shaheed Bhagat Singh College, University of Delhi
3
Interconnected networks Network of content
4. INTRODUCTION TO COMMON TERMS
Client Server
17 January 2019Shaheed Bhagat Singh College, University of Delhi
4
http
“Web pages”
a.k.a the browser that you use to access the content The computer on which content is stored
5. INTRODUCTION TO COMMON TERMS
Website Web application
17 January 2019Shaheed Bhagat Singh College, University of Delhi
5
Primarily defined by content
Consume data
Defined by interaction with user
Manipulate data
6. THE EVOLUTION OF THE WEB (1990 – 2018)
• 1990 - 95: Early movers
• 1995 - 2000:The Dot Com Bubble, Mobile technology
• 2000 - 2005: Consolidation, open-source CMS
• 2007 - : Smartphones, Social media
• 2009 - : Fourth Industrial Revolution (term coined in 2016)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
6
7. THE EVOLUTION OF THE WEB (1990 – 2018)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
7
1995 – early 2000s
Plain text, static
First generation technologies
2003 – 2010
“Web 2.0” / Rich Internet Application
Dynamic, user generated content
2010 –
“Responsive Web”
“User Experience”
8. USER EXPERIENCE
"User experience" encompasses all aspects of the end-
user's interaction with the company, its services, and its
products.
– Don Norman, Jacob Nielsen
17 January 2019Shaheed Bhagat Singh College, University of Delhi
8
9. ELEMENTS OF USER EXPERIENCE
Defined by Jesse James Garrett
Five planes: Strategy, Scope, Structure,
Skeleton, Surface
Original diagram from 30 March 2000:
http://www.jjg.net/elements/pdf/elements.p
df
17 January 2019Shaheed Bhagat Singh College, University of Delhi
9
10. STRATEGY
• The “why” of the website
• What does the customer need?
• What are our objectives?
Tools:
User research (Surveys, Interviews, Card
Sorting), Personas, Empathy Mapping
17 January 2019Shaheed Bhagat Singh College, University of Delhi
10
Persona: Image credit - Get Response
11. SCOPE
• From strategy, to requirements
• What features and content can the site offer, that
meets our goals as well as those of the user?
• Which features are priority?
Tools
Competitor research, Customer Journey Mapping
17 January 2019Shaheed Bhagat Singh College, University of Delhi
11
Customer Journey Map: Image source - NNGroup
12. STRUCTURE
• From scope / requirements, fitting the pieces
to form a whole
• How will the user interact with the site’s
functionality?
• How will the content be categorized?
Tools:
Use case diagrams, flowcharts, architecture
diagram
17 January 2019Shaheed Bhagat Singh College, University of Delhi
12
Information Architecture: Image source - NNGroup
13. SKELETON
• From structure to specific aspects of
user interface, navigation & information
design
• Making intangible structure concrete
Tools:
Wireframe, Sitemaps
17 January 2019Shaheed Bhagat Singh College, University of Delhi
13
Wireframe: Image credit – Market8
14. SURFACE
• Visual design of the interface elements,
text, graphics, navigation
• Brand identity, colours, typography
Tools:
Digital tools (Sketch, Figma, InVision Studio,
Adobe XD, Photoshop, Illustrator)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
14
15. USER TESTING
• Test out the design with real users.
• Hand over the prototype to the user
and observe behavior
• Best done at wireframe stage, so that
quick corrections can be made be done
Tools
Paper prototyping
Digital tools (Sketch, Figma, InVision Studio,
Adobe XD)
17 January 2019Shaheed Bhagat Singh College, University of Delhi
15
Image source: Sitepoint
16. MORE COMMON TERMS
Web Design Web Development
17 January 2019Shaheed Bhagat Singh College, University of Delhi
16
Definition & visualisation Implementation
17. MORE COMMON TERMS
Web Development
17 January 2019Shaheed Bhagat Singh College, University of Delhi
17
Webpage
(as part of website
and/or
web application)
Client-side
(Front-end)
Server-side
(Back-end)
HTML
CSS
JavaScript
APIs
SQL
PHP
ASP
Python
https://www.w3schools.com/whatis/default.asp
Client Server
19. HOW THE WORLD BUILDS WEBSITES
• WordPress (free) 51%
• Wix (paid) 7%
• Joomla (free) 4%
• Squarespace (paid) 4%
• Weebly (paid) 2%
Source: https://websitesetup.org/
17 January 2019Shaheed Bhagat Singh College, University of Delhi
19
20. YOUR WEB PRESENCE
• Domain Name free* / yearly fee
• Web Hosting free* / yearly fee
• Content (Web Pages, Scripts) free / paid
• Software (FTP client / CMS) free
• Social Media integration mostly free
* T & C apply
17 January 2019Shaheed Bhagat Singh College, University of Delhi
20
21. DOMAIN NAME
17 January 2019Shaheed Bhagat Singh College, University of Delhi
21
https://www.google.com/
google.com
http://www.kasturika.wordpress.com/
kasturika.wordpress.com
https://kasturika.blog/
kasturika.blog
Protocol Subdomain Top-level domain (TLD)Domain
Protocol Subdomain TLDDomainSubdomain
Protocol TLDDomain
22. WEB HOSTING
• Server
• Storage space
• Email
• Database
• cPanel
• Website builder / pre-installed CMS
• Compatibility with other technologies
• SSL
• Tech support
17 January 2019Shaheed Bhagat Singh College, University of Delhi
22
23. TAKEAWAYS
• Fourth Industrial Revolution is already underway – blurring of lines between content
and application, greater integration with physical world.
• Web Design: mostly DIY, replaced by CMS
• Web Development: constantly evolving tech landscape – what you learn today will
likely be replaced very soon – be prepared!
• User Experience: Holistic approach towards end user’s experience, where web is one
of the touchpoints
• UX/UI has been around for a long time, gaining importance in India now
• Design degree good, but industry exposure & portfolio are key
17 January 2019Shaheed Bhagat Singh College, University of Delhi
23
24. UX RESOURCES
• Nielsen Norman Group https://www.nngroup.com/articles/
• Interaction Design Foundation (open source library)
https://www.interaction-design.org/literature
• Smashing Magazine https://www.smashingmagazine.com/
• A List Apart https://alistapart.com/
• UX Collective https://uxdesign.cc/
17 January 2019Shaheed Bhagat Singh College, University of Delhi
24
25. RELATED
Interactive session on
Responsive Web Design
at Ideafarms:
https://www.slideshare.net/Ideafarm
s/responsive-web-design-43778493
17 January 2019Shaheed Bhagat Singh College, University of Delhi
25
26. 17 January 2019Shaheed Bhagat Singh College, University of Delhi
26
I am a member of the Interaction Design Foundation, the
world’s largest UX Design learning community.
Get 3 months of free membership to learn UX Design!
Use this referral link:
https://www.interaction-design.org/invite?r=kasturika
