Users Online

· Guests Online: 98

· Members Online: 0

· Total Members: 188
· Newest Member: meenachowdary055

Forum Threads

Newest Threads
No Threads created
Hottest Threads
No Threads created

Latest Articles

· Do while loop
· The for loop in C
· C while loop
· Pointers in C
· Functions in C

Articles Hierarchy

Articles Home » Web » Become a Web Designer

Become a Web Designer

Become a Web Designer

 

Today's web designer balances clear, concise design skills alongside a strong foundational background in the technology of the web. Our tutorials cover the skills you need to design rich, engaging websites and applications that look beautiful on both desktop and mobile devices.
Learn the fundamentals of HTML and CSS based web design.
Practice using industry standard, modern tools to design websites and applications.
Create designs that adapt to fit a wide variety of devices and screen sizes.

 

 

 

01

Introduction to Web Design and Development with James Williamson

3h 38m • COURSE
New to web design? Start here first. In these tutorials, James Williamson introduces the fundamental concepts, tools, and learning paths for web design. He explains what it means to be a web designer, the various areas of specialization, and whether web design is the right hobby or career for you. Along the way, he talks to five prominent designers and developers, who have each found success in a different corner of the web.
If you want to get up and running fast, check out the chapter on getting online, choosing a domain name and web host, and getting around the backend of a standard website. Need to stock your tool chest? Learn what you'll need to build a brand new site, from web design software and content management systems, to testing and prototyping tools and development frameworks. Finally, James outlines learning paths for where to go next, touching on subjects such as standards and accessibility, responsive design, and the three core web technologies: HTML, CSS, and JavaScript.
This course is part of a Learning Path approved by the American Marketing Association.
Gain the skills you need to become an AMA Professional Certified Marketer (PCM) in Digital Marketing by using the industry-leading courses and resources in the Learning Path. Take the AMA certification exam to show that you have what it takes to lead the digital transformation.
Topics include: • What is web design? • What is a web designer? • Learning to code • Choosing a web host • Working with a CMS • Exploring how websites are structured • Choosing your framework or software • Designing with standards and accessibility in mind • Learning HTML, CSS, and JavaScript
02

Design Aesthetics for the Web with Sue Jenkins

2h 45m • COURSE
Topics include:
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices
03

User Experience for Web Designers with Chris Nodder

1h 49m • COURSE
As a user experience professional, you often find yourself acting as a liaison between business teams and technology teams, challenged to make design decisions that satisfy both parties. Additionally, you frequently revisit decisions made in the past, looking for ways to refresh and meet the changing needs of today's users. Everything from different devices and form factors to increased awareness around human computer interaction is driving a need to examine and optimize the user experience. Join Chris Nodder as he shares insights to help strengthen your design choices and help you adapt to current and evolving trends. Designers, product managers, strategists, UX newcomers, and curious observers alike can gain an expanded understanding of what it takes to succeed in the field of UX.
Topics include: • Getting an organization started with user-centered design • Substantiating the benefits of UX • Helping systemizers on your team empathize with users • How UX work today compares to the past • Being a generalist vs. being a specialist • Where is UX headed in the future?
04

Mapping the Modern Web Design Process with Morten Rand-Hendriksen

2h 16m • COURSE
Once you eliminate the trends and terminology, web design is about one thing and one thing only: getting your message across to an online audience. This course offers a 10,000-foot view of the web design process, to help ensure you never lose sight of your users. Morten Rand-Hendriksen takes you on a journey from initial consultation and discovery through content strategy and UX considerations, to development, content creation, design, testing, and launch. By the end, you'll understand the different players and phases and how they fit together in a web design approach focused on meaningful communication and a great user experience.
Topics include: • Understanding what your users care about • Creating user personas • Creating content priority hierarchies • Testing wireframes and interaction patterns • Establishing a three-track build process • Incorporating accessibility principles • Using content blocks • Testing and revising your web design • Optimizing for social media and SEO • Launching your web design • Getting feedback from users
05

HTML Essential Training with James Williamson

5h 54m • COURSE
HTML is the programming language that powers the web. And like any language, once you master it, you can begin to create your own content, whether that's simple websites or complex web applications. This course provides an in-depth look at the essentials: the syntax of HTML and best practices for writing and editing your code. Senior staff author James Williamson reviews the structure of a typical HTML document, and shows how to section pages and format your content with HTML. Plus, learn how to create links and lists, and find out how HTML works with CSS and JavaScript to create rich, engaging user experiences. So open a text editor, watch these videos, and begin learning to author HTML the right way.
Topics include: • Why is HTML important? • Exploring an HTML document • Formatting content • Displaying images • Using nav, article, and div elements • Linking to pages and downloadable content • Creating lists • Controlling styling (fonts, colors, and more) • Writing basic scripts
06

CSS Essential Training 1 with Christina Truong

2h 36m • COURSE
CSS is a stylesheet language that allows you to control the appearance of your webpages. In this hands-on course—the first installment in an ongoing series—Christina Truong demonstrates the concepts that form the foundation of CSS, and explains how to use this language to add colors and other design elements to take your webpages beyond just black text on a white background. Christina covers selecting content, how the box model defines the spacing and sizing of page elements, styling text, and managing basic layouts. She also explores the tools needed to work with CSS, how to use selectors to target elements, and guidelines for page layouts with floats. Plus, at the end of the course, you'll walk away with an actual project—an online résumé page.
Topics include: • Creating a CSS file • Writing basic selectors • Setting properties • Using different typefaces and web-safe fonts • Understanding cascading and inheritance • Setting a font family, font size, text color, and more • Understanding the box model • Using the float property
07

Sketch Essential Training: The Basics (2017) with Chris Converse

Topics include:
Adding a library to Sketch
Designing a search form
Drawing icons in Sketch
Working with fonts
Setting up an artboard for tablet screens
Using Sketch Mirror to preview your designs
Creating interactive prototypes
Exporting artboards and assets
Collaborating with Sketch Cloud
Course Contents
  • Introduction Learn the basics of Sketch 1m 6s About Sketch and this course 1m Work with fonts in Sketch 51s About the exercise files 25s
  • 1. Get Your File Set Up Add hero image and header bar 6m 11s Set and style the main headlines 4m 36s About Sketch libraries 3m 52s Add a library to Sketch 2m 23s Set up layout guides 3m 48s Add the top navigation 2m 39s Design a search form 8m 45s
  • 2. Draw Icons in Sketch Create a calendar icon 6m 49s Update Sketch library items 3m 16s Create the best price icon 6m 46s Create the chat icon 7m 57s Switch Sketch library files 1m 14s
  • 3. Complete the Web Layout Add icons to the header navigation 4m 22s Set up the great deals section 5m 48s Add the labels for each deal 7m 6s Create the details button 3m 43s Create a nested symbol for ratings 4m 46s Add the services section 5m 53s Add the testimonials section 4m 11s Add the footer 3m 18s
  • 4. Adapt the Web Design for a Smaller Screen Set up an artboard for tablet screens 2m 19s Resize the header for a smaller screen 4m Resize the search section for a smaller screen 3m 2s Using Sketch Mirror 2m 19s Apply the deals section to a smaller screen 3m 42s Apply the services section to a smaller screen 3m 11s Resize the testimonials and footer sections for a smaller screen 3m 57s
  • 5. Share and Collaborate Export artboards to a multipage PDF 1m 32s Collaborate with Sketch Cloud 3m 6s Prototyping: Fixed items when scrolling 3m 46s Prototyping: Interactive linking 2m 48s Prototyping: Control links with symbols 3m 36s
  • 6. Export Assets Export artboards to JPG and PNG 3m 25s Using the Slice tool 3m 39s Export images in multiple sizes 4m 6s Export SVG 4m 35s
  • Conclusion Where to go from here 41s
    • 08

    Photoshop for Web Design with Emily Kay

    2h 33m • COURSE
    Working in web design involves creating UI (user interface) elements—icons, graphics, wireframes, and mockups. Adobe Photoshop provides the capabilities needed to make these design elements transition smoothly and easily to production. In this course, learn how to use Photoshop for modern web design workflows. Join Emily Kay as she takes you through a responsive web design project, including setup, using templates, making comps, and exporting for the web. Emily shows how to work with artboards, libraries, and smart objects. She demonstrates the process for creating several deliverables—wireframes, mockups, mood boards, style guides, navigation elements, and more.
    Topics include: • Setting up workspaces and artboards • Using libraries • Responsive design tips and tricks • Setting breakpoints • Creating navigation elements • Creating textures and backgrounds • Embedding or linking smart objects • Making custom templates • Creating reusable UI elements • Saving and exporting for the web • Using Generator
    09

    Learning Responsive Design with James Williamson

    2h 14m • COURSE
    Web projects need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables, providing an optimal viewing experience for each scenario. In this course, author James Williamson introduces responsive design to new web designers and fills in any gaps experienced designers may have, while providing a deeper exploration of how current trends in devices, connectivity, and user experience are driving its adoption. The course covers concepts like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from mock-up to testing.
    Topics include: • What is responsive design? • Controlling viewports • Designing for multiple screen densities • Working with media queries • Using fluid grids • Building responsive forms • Optimizing site performance • Building responsive mockups • Developing a content strategy • Designing for mobile capabilities • Creating flexible HTML • Testing responsive designs
    10

    Responsive Images with Morten Rand-Hendriksen

    Topics include:
    How responsive images work
    Adding Picturefill to your site
    Making regular images responsive
    Using the element
    Identifying breakpoints and layout changes
    Using the elements for image type fallbacks
    Course Contents
  • Introduction 1m 47s Welcome 49s Who is this course for? 58s
  • 1. Responsive Images: An Introduction 8m 28s How images on the web work 3m 41s How responsive images work 1m 52s New attributes and terminology for responsive images 2m 55s
  • 2. Making Responsive Images Work with Picturefill 13m 9s What is Picturefill? 3m 50s Adding Picturefill to your site 5m 20s Testing to make sure Picturefill works 3m 59s
  • 3. Making Regular Images Responsive 33m 31s When to use responsive images with the tag 1m 37s Preparing images for responsive display 7m 39s Introducing srcset and w 2m 56s Using srcset and w 4m 37s Introducing sizes3m 53s Using sizes 3m 48s Advanced layouts with srcset and sizes 5m 36s Targeting resolution density with x 3m 25s
  • 4. Responsive Images for Art Direction 17m 53s Introducing the element 3m 35s Identifying breakpoints and layout changes for your images 1m 47s Preparing images for element 1m 59s Using the element 6m 53s Challenges with responsive images in art direction 3m 39s
  • 5. Beyond Traditional Image Formats 5m 7s Using the element for image type fallbacks 5m 7s Going Further 2m 8s Responsive images are part of the new world of RWD 2m 8s
    • 11

    Responsive Typography Techniques with Val Head

    2h 9m • COURSE
    Learn how to create typography that's beautiful, functional, and easily scalable across tablets, phones, and computers of all types and sizes. Designer Val Head shows you how to choose quality web fonts, develop a typographic scale and rhythm throughout your design, and build bulletproof font stacks. Plus, learn how to use media queries and CSS rules to keep your type looking great at any size. This course is a collection of best practices and techniques that will soon be an indispensible part of any web typesetter's toolbox.
    Topics include: • Deciding between self-hosted and hosted web fonts • Sizing your type with pixels, ems, and rems • Applying and choosing a typographic scale • Creating a font stack • Maintaining line lengths • Using media queries to set natural typographic break points • Tools for controlling type dynamically with JavaScript and jQuery
    · Posted by Superadmin on January 19 2019 · 0 Comments · 926 Reads · Print
    Page 1 of 100: 1234...100

    Comments

    No Comments have been Posted.

    Post Comment

    Please Login to Post a Comment.

    Ratings

    Rating is available to Members only.

    Please login or register to vote.
    No Ratings have been Posted.
    Render time: 1.01 seconds
    10,829,855 unique visits