• Like
  • Save
Web Design 2.0: The Fundamentals of Modern Design | Learning Catalyst
Upcoming SlideShare
Loading in...5

Web Design 2.0: The Fundamentals of Modern Design | Learning Catalyst



courses on modern web designing. learn modern web designing at learning catalyst. learn the basics of web design, photoshop tips, web 2.0 design and much more.

courses on modern web designing. learn modern web designing at learning catalyst. learn the basics of web design, photoshop tips, web 2.0 design and much more.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Simple HTML pages and effects using Javascript
  • We’l
  • One is a change brought in by sites like Google where not only the design, but also copy
  • - A web designer is also given the respon of help – get found. SEO inputs start right from the concept. - Usability and SEO are linked majorly
  • Qn : What exactly do Rich Apps allow you to do, which cant be already done in say Flash
  • Qn : Why is CSS so important in modern web design
  • Qn : What does RSS clean URL’s mean
  • UGC with allowing people to tag content so that it can be found SMO aspect
  • Qn : What exactly are mash-ups
  • This is for a social media agency Because websites want to connect
  • Here is something which is made only on youtube…..most creative agency ever..? Makes use of the embedded links in utube to make an entire corporate site
  • People want to redesign sites completely in this cooler style
  • Qn : Can we classify the current companies offering web design in any way
  • When you can see an end-point in your mind's eye, you can much more easily see the steps you need to take to get there. Transaction heavy site Awarenes building - lead generation Qn : How can u set design goals
  • Every web site is a means to an end. We're all looking to get something out of it, to achieve certain personal goals (states of being).
  • Simply, put yourself in the user’s shows Qn : how do u go about this
  • Creating personas You should base your personas' characteristics as much as possible on facts you know about your target market or actual user base. The best way to do this is to carry out prior research to interview a number of actual or typical site users. Personas are more effective when they represent the likely preferences, goals, and contexts that your real users will have. Ideally, you should speak to people who fit the target audience right now, who are in the right position or have the right experience. Picture what your persona looks like. Are they male or female? Are they working, studying, or out of work? How old are they? Give them a name, because a persona is a (pretend) real person. Maybe find a photo to represent them. Think about their cultural background. What's their language? What time of day is it when they access your site? What skills do they have? IT skills and familiarity with using computers? What about other technical skills, maybe industry-related? Are they likely to be challenged by any impairments, such as difficulty with sight or reading? Do they have any special needs, such as accessibility issues? Next, write down what they are trying to achieve in general. What goal, or goals, do they wish to reach? For example, if they're a consumer using the web at home, what are their goals for them and their family? If they're a work user, what are their professional goals? What specific goals will drive them to use your website? There may be more than one, if they are likely to use your site at different times for different things. What are their personal priorities? What kind of thing will they appreciate? What kind of thing would insult, annoy or upset them? What kind of thing might make the difference between a tolerable experience and a pleasant experience? What about a delightful experience? What do they expect as a minimum? What do they hope for? How do they like to feel? What kind of things help them to feel that way? What is their potential value to the site? Could they be a key customer or referrer? Do they have prior experience of the brand, the market sector, the proposition, other similar web sites, previous versions, product range? Will they get shown, or trained in, how to use the site? What's their likely frequency of use: one-off, irregular, regular? Where on the web have they come from - and why? What do they want to go away with?   Pasted from < http://www.webdesignfromscratch.com/goal-oriented-design/users-goals.php >
  • Organise views into a site map Think what global or top-level links really need to be available on every page. Test your assumptions. Create enough sections that it will be easy to focus on what you want. Be careful not to over-segment. If you have too many sections, your site will look bigger and seem harder to navigate. Avoid creating sections that won't have enough content. ("No news is bad news"). You need to include any other stuff that needs to be there (like Contact Us and Login), which might not feature on any of your sketches to date. Look for ways to use smart links and deep links that take users directly to what they're most likely to want next. Don't make them dig.
  • Browser testing and Qn : Which are the most ignored tests
  • In any agency..
  • Community – Sunsilk – among the first examples
  • Mailers – some of which work really well
  • IDBI virals
  • Makemytip microsite
  • WAP landing pages
  • Qn : Does Adobe still rule or are therre alternatives.
  • (1) What do u look for when hiring people (2) Do I need to know Web 2.0 design seperately ? Which are the best sites to update urself. (3) How different is Emailer design from flash design and web design
  • Which are most common alternatives to photoshop, flash, etc..

Web Design 2.0: The Fundamentals of Modern Design | Learning Catalyst Web Design 2.0: The Fundamentals of Modern Design | Learning Catalyst Presentation Transcript

  • Web Design 2.0 The Fundamentals of Modern Design Chaya Carvalho CEO & MD at BC Web Wise Kaushik Mhadeshwar Founder & Chief Catalyst at Learning Catalyst
  • "Isn't web design basically learning HTML with some Java script thrown in?" Yes... once upon a time.
  • Today, a lot of design is about building Web 2.0 sites User-centric Design. High-Interactivity. High - usability. Dynamic pages. Search-engine friendly.
    • User-centric design
    • High interactivity
    • High usability
    • Dynamic pages
    • Search engine friendly
  • What are the characteristics of a typical Web 2.0 site?
  • Minimalism is in
  • Not only building a site but also helping it get “found” in search engine results.
  • Technologies used by Web 2.0 A web 2.0 website may usually feature a number of the following technologies: Rich Internet application techniques like AJAX, Adobe, Flash, Flex, Nexaweb, OpenLaszlo and Silverlight and more Cascading Style Sheet, CSS Organization and collection of data in RSS Clean and meaningful URLs Excessive use of folksonomies (in the form of tags or tagclouds) Use of wiki software Blog publishing Mashups (A mix up of content and Audio usually from different musical style)
  • Richer Apps
  • Cascading Style Sheets
  • RSS Clean and Meaningful URL’s
  • Folksonomy or social tagging
  • Wiki software
  • Blog Publishing
  • And then there are Mashups..
  • Now, websites look more “personal” – more like blogs than corporate sites
  • Web 2.0 allows designers more flexibility and innovation with social media
  • Web 2.0 is also about a philosophy That of user-centric design and enabling user-sharing
  • But so far, in its short history, websites have managed to consistently frustrate users www.learningcatalyst.in
  • Did I type the correct URL? What’s happening on this site ! www.learningcatalyst.in
  • I logged in, how do I pay now ? Fast ! www.learningcatalyst.in
  • Are you talking to me ? www.learningcatalyst.in
  • I am en existing user, what do I do ? www.learningcatalyst.in
  • There is a sharp rise in the use of Web 2.0 technology amongst businesses who want to stay connected with their consumers... Providing the key to new career opportunities for web designers.
  • Who are the various kinds of players in the industry?
  • Some suggestions for building a Web 2.0 site
  • 1. Create a goal Know what you want your end result to look like – both in terms of design and in terms of the traffic you want to generate. When you can see an end point in your mind's eye, it's easy to see the steps you'll take to get there.
  • The means are as important as the end Every web site is a means to an end. We’re all looking to get something out of it, to achieve certain personal goals(states of being) No one browses a site just for the fun of it. Most users go to a site because they need information from it. Design your site in a way that makes it easy for a user to find that information
  • Your users are diverse : you need to understand the persona of your target audience
  • Picture what your users look like. When your users have a face, you can identify with them. You'll end up designing a site that a real person can use, not just a site that looks clever.
  • Start with a detailed site map www.learningcatalyst.in
  • Never ignore testing. Perform compatibility tests to make sure your site opens the same way on every browser platform. Perform usability tests to make sure your applications and content gathering tools are working properly. Most importantly, perform security tests to ensure that valuable data is securely and confidentially gathered.
  • Flash, Emailer, Virals, Communities : Its not just about websites www.learningcatalyst.in
  • Nokia N&E Iphone Blackberry Samsung OMNIA - Smartphone Targeted campaign on Yahoo! INDIA WAP & IDEA FRESH WAP Portal * Landing Page provided by advertiser
  • What are the most common platforms for website development?
  • What are the basic skills and tools that one needs in order to be a successful professional?
  • MYTH #1 "If I can do print and brochure design, I can do web design." Web design is not really part of Advertising/Graphics design. It's a field in itself. It's hard to be a web designer if you don't 'get' the web: understanding usability, interfaces, coding, site structure, etc.
  • MYTH #2 “Web design is a part of software engineering” You don't have to be a techie with an engineering degree in order to be a designer. Web design is about using software tools to create visual communication that is simple and appealing to an end user.
  • What design skills do I need to be successful?
    • Web design is about creating a good user experience. This means that you need the skills to create something visually compelling and at the same time easy to use and navigate.
    • You can quickly build mock-ups and flash templates to explain design ideas.
    • Beyond web pages, you can design interactive banners, widgets, mobile pages, email templates, etc...
    • You need excellent Photoshop, Flash, CSS and Dreamweaver skills.
  • What other site-building skills do I need?
    • You must be familiar with the various styles in which site information and navigation is organized. E.g. horizontal vs. vertical navigation
    • You must know SEO: Understanding how Search Engine Optimization works will help you build it into your design so that your site not only gets built, but also gets “found” on search engine searches.
    • You must understand browser compatibility and quality control issues
  • Programs offered by Learning Catalyst www.learningcatalyst.in
  • Our Cour No one covers ‘digital’ as we do !! Basic SEO Advanced SEM Advanced SEO SMO Basic SEM Website Analytics Affiliate Marketing Integrated Digital Marketing Website Usability
  • Our Courses No one covers ‘digital’ as we do Web Copy Writing Modern Website Design Flash Programming Java Scripts and Ajex - Basic Content Management Systems Web Security Java Scripts and Ajex – Advanced PHP Programming Mobile Gaming and Application Development