Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Webdesign essentials

This presentation tries to collect skills, and considerations one should be familiar with creating web-design.
by

Marci Rónyai

on 26 August 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Webdesign essentials

Usability Screen properties Print optimization Screen readers Colors Contrast Pixels (anti aliasing) Graphic design Imaging Graphics Application Communication Limitations - Device fonts Optimization Formats Backgrounds Patterns Icons application icons favicons They say that a development really starts when a project goes public HTML elements CSS Javascript Animation Forms Lists Dinamic content Localization - RTL Interaction design Flash HTML 5 3D Banners Social networking Facebook apps Widgets Standard sizes Optimizing content Layout Platforms Wireframe Browsers Mobile, tablet X-box, set-top boxes, etc. Wireframing tools http://mashable.com/2010/07/15/wireframing-tools/ Design Usefull resources http://www.smashingmagazine.com/ http://mashable.com http://www.webdesignerdepot.com/ http://www.deviantart.com/ http://www.aviary.com http://www.webdesignerwall.com Thank you: WEB essentials by Marci Rónyai Organize the content... Images SEO friendly ©? 500 px Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. copyrights The written content has to be As a webdesigner you don't necessary have to
provide content, but you have to be able to give
feedback on the content, to make it usable for the web The text should be brief and strait forward, people don't want to read novels on a website
The text must take use of semanticly correct html elements like hadings, lists, etc.
The text must include proper keywords You must be sure that you own all copyrights of the materials used, including the materials provided by your clients arround The length of the textboxes should not be too long, because it makes it hard to follow the lines is usually fine for body text-size Is a principle more important then anything else
It should influence the content,
the layout, and the graphic design The most common aspects of screens are size and resolution
Currently most webdesigners optimize their sites to 1024x768px size
There are way bigger screens tough, and many devices that probably have even smaller Elastic design is one way to cope with the sreensize issue When creating the layout keep in mind all the common platforms people may use to view your site common Creating a wireframe allows you to easily visualize, modify and extend your page elements before the graphic design If you have an approved wireframe you don't have to worry that you have to change the basic structure after the graphic design You need some skills to create succesfull webdesign You need graphics to create unique sites and to distinguish certain functions and info blocks within the site Strong imagery is a must for a great website
Making or collecting images for a project is always an essential part of creating good webdesign You have to think of websites as applications rather then graphic content

Websites are dynamic they constatnly change and grow

Consider the following elements when creating a webdesign After a site is up and running,
the designers work is still not over

You need to communicate the site so that people get to know about it

Communication may include classic banner ads, or social activity which both may need graphic design work Marci Rónyai
raggafuegos.com I personaly discurage everyone to print webpages,
but it can be a request to create a properly printing site
In this case consider ergonomic usage: ommit backgrounds,
invert text etc.. are widley used in accessible or different environment
It is strongly considerable to make sites that are properly handling sreenreaders too Besides the different screen sizes people may use, up until the latest times not all browsers were standardized W3C is the consortioum that issues the specification of HTML and CSS formats, the basic elements of webdesign A good webdesigner should be familiar with these specifications http://w3c.org ... mobiles and tablets have lower resources and screensizes that needs to be taken into consideration Even tough these devices have more and more standardized browsing capabilities... Many devices provide some browsing functionality but are unreasonable to optimize to
It is probable that the developers of these devices find a way to present your content if it uses standard code Creating seamless patterns, and infinite backgrounds are common tasks such as iconography or data visualisation On aviary you can find online tools for your work:
Online image editor
Online color editor
Online vector editor
Screen capture
and a lots of other fun goodies Usefull tools http://www.lovelycharts.com/ Free online wireframing
Data visualization Mind the following other aspects of screens Is the single way to implement your design to HTML. All webdesigners should be familiar with the capabilities and limitations of Cascading Style Sheets I've collected some issues, skills and considerations that one might need to be familiar with, when creating webdesign You must think of all the different ways people may come accross your site Also you need the necessary ui design skills to provide solutions for all upcoming requests in the project e.g. If a project requires a main menu including more than 6-8 menu-items, provide a solution to create a multilevel or hierarchical menu system e.g. Mind the following technical considerations when working with images on the web: Besides graphic content consider
the following usage of icons: Think in application rather than artwork.
Optimize, for longterm use rather than first impression.
Allways be ready to add change or remove content
that may include design change also. Webdesign is all about organizing content in
a certain layout and create graphic design with usability in mind ...in a way that is most accessible to your viewers Text is the main element of web sites
Because of this typography has very important rule in webdesign Typo There are good javascripts based solutions e.g. Cufon http://cufon.shoqolate.com/generate/ Replacing device fonts used to be quite complicated
Image replacement is a solution that has strong weaknesses when it comes to dynamic content, localization, seo, etc... separate content parts
create an order of importance on the page
give feedback on user action
and almost everithing else Use typography to: graphy (like Iphone application icons) Consider learning HTML 5 instead of Flash for it is being more accessible and productive consider the following when designing banners Currently these might be the most widely used social networking platforms
But it is important to see that these trends may and will change constantly There are beautyfull javascript libraries to create a great user interface like JQuerry or JQuerryTools Consider using movie embeds instead of browser 3d solutions because of performance issues. WEB Touchscreens 2011.
Full transcript