Web Design 101: Week 1
An introductory class for HTML, CSS, and Dreamweaver/CodePen with Shannon McNamara
Hi everyone, and welcome to Web Design 101!
Upon successful completion of this course, you will be able to understand the Code Editor's workspace and basic tools, analyze best practices for User Experience (UX) and User Interface (UI) in web design, and evaluate strategies for creating responsive website designs. You will also grasp the fundamental principles of design in webpage creation and demonstrate the ability to understand and apply HTML5 to build web pages. Additionally, you will be proficient in using CSS style sheets to format web content and ultimately create a fully functioning, responsive website.
Coding a website does not happen using only one application, and I want you to look into the best one for you! The videos shown will demonstrate using Adobe Dreamweaver, however, you can also use CodePen, which offers a free and pro version. There are also several excellent free code editors available. Popular choices include Visual Studio Code, Notepad++, Sublime Text, Atom, and Brackets.
I have uploaded all the practice files that you will need to complete this course alongside me, right here: Learn Dreamweaver FAST!
A reminder, you can access all the videos in this course on my YouTube page, along with other Graphic Design courses: Youtube.com/ShannonMcNamara
Now let’s hop in!
Table of Contents:
UX - The User Experience
Q: What makes a website successful?
A: How users perceive it.
“Does this website give me value? Is it easy to use? Is it pleasant to use?” These are the questions that run through the minds of visitors as they interact with our products, and they form the basis of their decisions on whether to become regular users.
User experience design is all about striving to make them answer “Yes” to all of those questions.
What Is User Experience?
User experience (abbreviated as UX) is how a person feels when interfacing with a system. The system could be a website, a web application or desktop software and, in
modern contexts, is generally denoted by some form of human-computer interaction (HCI).
Those who work on UX study and evaluate how users feel about a system, looking at such things as ease of use, perception of the value of the system, utility, efficiency in performing tasks and so forth.
UX designers also look at sub-systems and processes within a system. For example, they might study the checkout process of an e-commerce website to see whether users find the process of buying products from the website easy and pleasant. Compared to many other disciplines, particularly Web-based systems, UX is relatively new.
Why Is UX Important?
Nowadays, with so much emphasis on user-centered design, describing and justifying the importance of designing and enhancing the user experience seems almost unnecessary. We could simply say, “It’s important because it deals with our users’ needs — enough said,” and everyone would probably be satisfied with that.
Before our clients (and we) understood the value of user-centered design, we made design decisions based on just two things: what we thought was awesome and what the client wanted to see.
We built interaction based on what we thought worked — we designed for ourselves. The focus was on aesthetics and the brand, with little to no thought of how the people who would use the website would feel about it. There was no science behind what we did. We did it because the results looked good, because they were creative (so we thought) and because that was what our clients wanted.
But this decade has witnessed a transformation of the Web. Not only has it become more ubiquitous — the Web had at least 1.5 billion users globally in 2008 — but websites have become so complex and feature-rich that, to be effective, they
must have great user experience designs.
Additionally, users have been accessing websites in an increasing number of ways:
mobile devices, a vast landscape of browsers, different types of Internet connections.
We’ve also become aware of the importance of accessibility — i.e. universal access to our Web-based products — not only for those who with special requirements, such as for screen readers and non-traditional input devices, but for those who don’t have broadband connections or who have older mobile devices and so forth. With all of these sweeping changes, the websites that have consistently stood out were the ones that were pleasant to use. The driving factor of how we build websites today has become the experience we want to give the people who will use the websites.
Are you finding this content helpful? Consider supporting me with a cup of coffee! Click below:
What Situations Would Benefit From UX Design?
Saying that all Web systems would benefit from a solid evaluation and design of the user experience is easy; arguing against it is hard if you care about user-centered design at all. But we don’t live in a perfect world, and we don’t have unlimited resources. Thus, we must prioritize and identify the areas that stand to gain the most from UX design and UX designers.
Complex Systems
Start-ups
Projects with “OK” Budgets
Projects with Longer Timeframes
Complex Systems
The more complex the system, the more involved will the planning and architecture have to be for it. While investing in a full-blown multi-member UX study for a simple static website seems excessive, multi-faceted websites, interaction-rich Web applications and e-commerce websites stand to benefit a lot from UX design.
Systems that involve a myriad of user tasks must be perceived as being valuable, pleasant and efficient. Designers risk big losses in revenue by neglecting the user experience.
Start-ups
Start-ups and smaller companies generally do not have the resources to hire dedicated employees for this. For example, Basecamp, a lean start-up
company that builds highly successful and robust Web applications, including Basecamp and Highrise, relies on well-rounded individuals, people who can “wear different hats.”
In this situation, training existing employees (specifically, the Web designer) in the principles and processes of UX, or contracting out the UX work as needed, might be more suitable than hiring a full-time employee. However, creating a solid user experience for users in the very first versions of a product or service can certainly make it stand out and attract users’ attention. But as the owner of a start-up, sometimes you may just not have enough resources for hiring a skilled UX designer.
Projects with “OK” Budgets
Smaller agencies that work for small and medium-sized businesses need to keep costs low for the customer base and prioritize deliverables in order to stay on the budget. The focus in these situations is more on the build process and less on planning, research and analysis. Projects with small budgets will be driven more by the launch of the final product. That doesn’t mean that these projects wouldn’t benefit from the good UX — of course they would — but in practice, small or medium-sized companies often do not feel compelled to invest resources into something that is not necessary for the launch of the site.
Projects with Longer Timeframes
By simple logic, adding a cog to the traditional website production process will extend the timeline. Time must be allotted for user experience design. UX designers could, in theory, shorten timelines by taking on some of the tasks traditionally assigned to Web designers and developers, thus potentially saving time and costs in revision phases by having addressed user issues.
Things to Know About UX Design
UX design is an amazing discipline, but it cannot, or will not, accomplish certain things.
UX DESIGN IS NOT ONE SIZE FITS ALL LINK - User experience design won’t work in every situation for every user because, as human beings, we are all different. What works for one person might have the opposite effect on another. And just as we can’t design a user experience, we can’t replicate the user experience for one website exactly on another website. User experiences will be different between websites. A design must be tailored to the goals, values, production process and products of its website.
CAN’T BE DIRECTLY ASSESSED WITH TRADITIONAL METRICS LINK - You can’t determine the effectiveness of a user experience design based solely on statistics such as page views, bounce rates and conversion rates. We can make assumptions, and we can ask users for anecdotal evidence, but we can’t install an app (at least not yet) that automatically records user experience statistics directly.
NOT THE SAME THING AS USABILITY LINK - User experience and usability have become synonymous, but these two fields are clearly distinct. UX addresses how a user feels when using a system, while usability is about the user-friendliness and efficiency of the interface.