Web Design Medium

How would you present a design over the web? This is one question on how would a web design should be implemented. Many strategies are integrated on the web nowadays, strategies like defining most on prioritizing the design, and the other is the content. Working with a project or with the clients, a designer must always conforms to the decision made by them. Whatever suitable for the audience may be, a web designer should also contribute what is best for what is planned, even though it is hard for him to put into action what is decided.

Without a web developer, a web designer would only implement a static content of the page unless if he also have knowledge in web development. In static content, the webpage is easily designed since the content to be displayed is fixed and one is focused more on the design of the page, but the downside of having this is that pages need to have a higher maintenance. Once the update is done on a webpage then the corresponding pages which have relationship to that said page should also be updated to provide consistency. Static contents are commonly implemented on company folios, about-us pages and credit pages, which these contents need not to be stored as raw facts but information.

Dynamic content is employed to most websites nowadays. These dynamic contents came from stored information like databases that would generate active data to webpages. The content is easier to maintain while putting interest to the design would compromise since the webpages follow a standard so the design is simpler. Most websites that are dynamic uses the MVC (Model-View-Control) structure of their site, in which the content update is a different task over any other. MVC architecture uses powerful system to make it applicable. Web Content Management Systems uses the MVC architecture which the maintenance of the content is another task over the functionality provided by the site. Dynamic Content is usually found data driven websites like the renowned Yahoo! Portal, E-Commerce Systems and many more.

Users also wanted engaging websites not just for wasting time but also finds it enjoyable and they refer the site to other people. Applications may take bandwidth much but make sure the applications are worth the wait. If users can wait then surely they have their expectation much. Web applications may also do the talking to the user, this makes the user and the application provides a unique interaction. Web applications are made under scripting languages like: Javascripts, VBScripts, and PHPs.

Multimedia content can easily be distinguished by the users. Once they encounter on a multimedia content, the attention is focused on it. Make sure that posting multimedia content is well-organized and proficient.

Everyone needs to promote their site to market their content and provide better service. And many people abused their presentation that would catch much attention to the audience, but having a simple website and following all the guidelines, the site would look more credible and appreciable by many users.

Read more!

Social Networking Sites for Designers

Social Networking sites for designer’s helps fellow designers share ideas and information on the site. Every individual site has its features for collaboration, post content in the web and let anyone post comments to be read by everyone. Like any other social networking sites, you can link fellow designers and follow them by adding them to your favorites or follow user links. You can also edit personal profile and share personal information about yourself. Social networking sites for designers also allow sharing of resources to be downloadable and use for anyone. Sites like them could also feature to include blogs and step-by-step tutorial to be viewed by everyone.

Here are some social networking sites for designers:


DeviantArt

Every art fanatic has an account on DeviantArt. In DeviantArt, users can customize their pages and upload their works on a gallery. The design or preferably called ‘deviation’ in DeviantArt is categorized according to the style and medium used. Users can also follow and linked any other deviation for inspiration purposes. Users can also have an option to subscribe and print deviations.


Designster

Is a simple website to show profiles of a designer and that makes the site intuitive, users can also post works.


SitePoint

SitePoint is a publishing company for publishing media content books and webpage development. It is also a community for web designers to share information and articles and directly ‘Digg-ed’ and ‘Tweeter-ed’. SitePoint also hosts contests under 99Designs.


Design21

The site shares information about designs and keep you in touched with any other people through designs. You can posts designs and information and keep up the presence and company with other designers.


Open Web Design.org

Generally created for designers specializing in web design, Open Web Design shares Web Site Templates for the consumption of other Web Designers. Users can browse web design templates for resources, like their motto: Helping Internet a Prettier Place.


Graphic Design Network

Created by Ning – a social networking site creator. Graphic Design Network which helps designers interact with any other designers, they can also chat with each other about designing. Graphic Design Network has diversified designers from any other countries.


Adobe Communities : The Design Center

The leader in producing design software, Adobe communities lets users of the Adobe software interact with each other. The site offers documentation and manual to their Creative Suite Application

Flickr

For image social networking, Flickr lets users upload their images to their database and let anyone score them for the number of viewers. Users can organize them into galleries and explore millions of images posted in the site.

Kuler

For color theming site, Kuler which is an extension to the Adobe Creative Suite Software is for starting up color themes of any design. Users views many color themes and then they can add them to their swatches to start on.
Typophile

Typography is the main purpose of the site. Typophile shares typographical layouts to be shared among designs. Also a resource for fonts and typography tips.

Smashing Magazine

Smashing Magazine is a diverse topic distribution from photography skills to web design. The site offers unique articles that made it a primary resource in design. Authors of the articles are specialized in their field and they provide links to the site they had researched. It also shows design inspirations and showcases them to the site. Anyone can subscribe to the site through their RSS.

Read more!

Design Workflows

The first basic steps are a little bit confusing if you have an idea and start out the design. One should have a workflow in which he should have the necessary steps to follow. In the process of designing and experimenting creative ideas, he may or may not follow the workflow as specified. Listing what is the workflow one should have eases the tasks for future work on with a reference. The designer may also let the actions be saved until it is intuitive for him to memorize the tasks needed to come up for a design. For professional designers, tasks he will consider are time-consuming and just let another designer do the specific task in which he is in the field of specialty. A designer may also be flexible and diverse – doing all the tasks by himself.

These are some task one should consider:

Setting up the workspace

Every individual has its own workspace – the layout of the interface one works on. If one feels cluttered about the interface on he works on like unnecessary panels, limited space like in canvas, optional menu bars, messy and unintuitive feature placements; one can change them as he want, most design software nowadays include customization of workspaces according to different types of work and save them so one needs not to customize them again for the next work.

Analysis

This may be the long process which not only a designer should work on. Without this, one couldn’t arrive on the exact or planned idea. If a designer is working on a client or with someone else, analysis should be carefully considered to satisfy what is the output. If a designer is working for himself then it is left for him to judge the design. Usually dealing with clients is a hard job, one should have patience in redefining what the user’s needs and wants.

Automation

This part helps the designer automates the tasks. Tasks that takes much time should a designer consider of having tools on automating the tasks, one should need not to work from scratch. There are available tools like frameworks that help the designer complete the tasks; these frameworks can also be customized for the users’ preferences and frameworks have standards or conventions in which one should exercise in designing. Considering the learning of the framework compared to create from scratch, it is ok to use frameworks.

Proofing

Before the final layout of the design to be completed, it is always best to proof the design; check for errors, check for consistency of the design and check for misplaced elements. Working with a client, the designer should show the design to satisfy the client, changes may be made if the client didn’t satisfied and with this, one should appreciate the work behind it.

Deployment

This may be the final process of the workflow. The design made here is final and ready for production if it is produced and or deployed in a site if it is a web design. One should make sure that the necessary things are included like the portions of the file to make it operational.

This step doesn’t need to be always followed or work in exact steps, there are also things to consider and make it as an exception. One may also refine the ideas I raised in the workflows. I may also narrow down the ideas to make it more specific at certain types of operation.

Read more!

Web Design Tools - Hardware

Ok, the question is: ‘what do you really need?’ Factors are something that constitutes what hardware is really needed to consider. Factors involved like affordability, capability, accessibility and ease-of-use. If you are a type that involves more on graphic designing then you divulge more on graphic designing hardware and tools, and if you involved more on web development then a powerful specification of hardware is what you need. And if you are an amateur and trying to develop skills then try to settle first with a cheaper alternative to experiment on one and later then you upgrade them as the necessity increases.

PC or Mac?

First you need a workstation where you work on the project. A computer to work on and fits your needs. PC or Mac? This is always one debatable issue on which computer will you reside in. Every one of them has its features which has not existing or lacking to the other. Many of the professionals equate Mac to designing since the interface and hardware is specifically created for designers. Currently Mac has a powerful hardware standard for its computers: the iMac and the Mac Pro. The downside is that the Mac computers are powerful also with the cost, one need to work on to pay the price. PC has been made for different stuffs like business, gaming, developing and designing, but designing is far slower than Mac unless you have the strong hardware. PC utilizes varying hardware to make up as one computer with varying compatibility. If one decided to upgrade, he may choose to replace one subcomponent like the video card for example or he may choose to upgrade them as a whole. PCs are more flexible than Mac due to its hardware compatibility and software. Many software and platforms are capable of running into PC since PCs are more accessible by ordinary users and users find ways to create software attending to them. Mac PCs have defying software that is well-suited to its hardware.

Display Monitors

Display Monitors are devices on which the computer passes output to them. CRTs have been a bulky one and now replaced by LCD monitors. The pros in using CRT monitors is the color clarity and higher refresh rate which means output is quickly rendered but uses much power and generates more heat. LCD monitors are energy efficient and causes less eye strain but the downside is that it produces blurry display if the resolution doesn’t matched the native resolution of a display monitor and renders image slowly than CRTs. Professional graphic and web designers includes the two display monitors to accurately check the color output of their graphics.

Input Devices

Input devices lets a user interface the computer to provide communication. Examples of these ranges from the computer mouse/touchpads and trackballs to track points, keyboards for accepting alphanumeric inputs to sophisticated pen/stylus or a display monitor accepting pen inputs. Pen inputs help the designer a total control of input like holding a pen or even more enhanced when a display monitor accepts pen inputs, it is like having a pen and a paper.

Output Devices

Output devices are hardware that shows the output generated by the computer. Display Monitors are also included under output devices. Printers are optional for the designers since printers purpose is to print the output displayed or what the software wanted to print. Occasionally, designers use the printers to correctly define the color of the output which are necessary for print production. Web Designers only needs an enhanced color display monitors to show the exact color needed to display the webpage.

As enumerated from above, those are the examples of the basic hardware devices that a web designer should have. Reviews of each individual hardware and comparison with other devices will happen on the long run. Since then, as a starting point, these necessary hardwares can generate an output which a web designer wanted.

Read more!

Web Design Tools - Layout

Browsers lets anyone access files and displays them in a formatted output called HTML (Hypertext Markup Language) – a language which browsers read to arrange the contents. If a web designer would implement the format of the files, he should need not to arrange them one by one unless he wants to encode them from his personal convention. A perceptive web page is carefully designed to lay out the content in a good way, not compromising the sight of the audience.

Another tool for web designer is the layout editor. The layout editor or preferably called the HTML editor helps the designer create webpages. Layout editors range from simple text editors to hybrid WYSWIG (What You See is What You Get)/Code Editors. When a web designer chooses to work on a text editor then he is sure and imagine what is the output of the design or just let the browser read for them and outputs what exactly the layout, not all WYSWIG editors shows accurate display of a webpage but tries its best to come up the layout. The best thing about some commercial HTML editors has functionalities that ease the web designer to design the webpage without consuming much time in writing lines of code in a simple text editor. Some of them have drag-and-drop capabilities that quickly generate the output. Some HTML editors also aids a web programmer create scripts to be included in a web page and dynamically displays content.

Comparisons of Some HTML Editors

Adobe Dreamweaver CS4

Adobe Dreamweaver is a hybrid HTML editor. It is also used for CSS editing, an IDE (Integrated Development Environment) for Web Scripting, either client or server-side, or the combination of both. It had flexible interface since once the edit is made in the text mode it automatically updates in the WYSWIG Editor and vice-versa. Dreamweaver also lets you define a site locally or remotely and is like working on the files directly on a web server, no need to edit-and-upload them since it automatically updates the file on a server. The CSS editing is more or less accurately display as a webpage on the editor and the inserting and editing of each html element is accessible. The dynamic data output like information from databases can also be integrated into the page with the use of Recordsets. Live View of the webpage is now possible.

Microsoft Expression Web 2

Microsoft Expression Web is the continuation of the phased out software Microsoft FrontPage which is the competitor of Dreamweaver of that time. Expression Web has an intuitive interface for designing webpages which most Microsoft Products integrates most of their software. The said editor can also map out links of pages in the site and provides a graphical sitemap.

Bluefish Editor

Bluefish Editor is a text based HTML editor but acts like an IDE since it has tools to insert HTML elements and capability of editing attributes easily. Like most HTML editor, Bluefish editor uses color-coding of texts to separate one element with another. Bluefish is an open-source HTML editor distributed among UNIX systems. Bluefish editor also recognizes PHP keywords and identifiers and any other scripting languages.

Integrated Development Environments

IDEs purpose is primarily on web scripting. Examples of these are the Eclipse IDE: for server side scripting, VBNet IDE: also for server-side scripting for VBNet language. IDEs has built-in compiler for compiling and running the scripts created and tests it on a server.

Simple Text Editors

Due to its simplicity, Web Developers commonly uses simple text editors like notepad for little update changes into the webpages since it doesn’t need to load much of the software and is very accessible like most of the computers now features a text editor.

Above all mentioned is part of the software for layout the files for a website. One should utilize the tools to aid him for the design. Anyone can use the tools as long as it takes a reasonable time for a designer to layout files, he doesn’t need to create them from spotless.

Read more!

Web Design Tools and Computer Graphics - Vector

Most designs in the web, apart from they are Raster Graphics, is designed under a Vector Graphics. In example, if one designer wanted to use rounded corners on a panel or a division element then it is best used that a vector-‘ized’ round corner is rendered before applying the color fill or any other style. If the designer changes his mind and replaces the rounded corners to a straight one, then he should only edit the vector paths without reengineered the design. That is one example of the beauty of having vector in the designs, apart for being made as a ‘style’ of illustration.

Generally, a pen tool is the primary tool in vector design; this creates paths and edits them according to its lines, points/vertices and its tangency to make its curves. Even some Raster Image Editing Software is integrating pen tools to accompany the Raster Design but the sole purpose of Vector Editing Software is for creating vector designs and then probably exports it to a Raster Image. Predesigned templates of Vector Image Editing Software is integrated to help graphic artists accessibility and ease of use to design their idea, examples of these are predefined polygons which a designer can define how many sides they prefer and it is up to the designer that he will use them and customize for their designs with the aid of transformation tools of vector like the pen tool.

Comparison of Some Vector Editing Software

Adobe Illustrator CS4

Illustrator has been one of the top choices among the vector illustrators pick. Illustrator has long been existing and used by graphic designers. Currently, there are boxfuls of features and functionalities that aid a designer to come up a design, and with its varying feature, Illustrator have many uses from creating blueprints, 3D designs and architectural designs, prints for media and many more. Since it has been a part of the Creative Suite Family of Adobe, designs made from illustrator can be exported to other CS Software like the also renowned Photoshop. The filename extension of Illustrator ‘.ai’ had been considered by most as a standard for a vector design file.

XaraExtreme

If a designer wants agile and fast results, XaraExtreme would be his choice. Xara Extreme provides functionality for better access and provides rapid output. It boasts on total control of units and an intuitive interface that gives the designer a freedom to manage his design. XaraExtreme originates the idea of transparency, soft vectors for feathering and shadows on the vector designs which is useful nowadays on most designs commonly used for the web. XaraExtrene provides compatibility support for any other vector and raster image formats.

CorelDraw

CorelDraw works hand in hand with raster images to form new vector paths with its powerful tracing feature: PowerTrace. Thus, the feature provides fast render of lines and a designer might not need to create or illustrate paths since there is a feature that is accessible to convert bitmaps to vector, just find an actual image then let CorelDraw trace the image. The software is bundled with predesigned layouts to time-save the designer. Also the interface is intuitive that lets the designer come up illustrations faster.

Microsoft Expression Design 2

Microsoft Expression Design 2 outputs are primarily used for web. With tools designed ready for deployment like the integration of XAML (eXtensible Application Mark-up Language) that provides data mark-ups on its images. The interface has improved workflow and workspace that lets the designers have ease-of-use. Also it has flexible elements in illustrating with its powerful tools in drawing and it is also flexible in porting and reading other formats.

The choice of among these Vector Image Editing Softwares is left to the graphic designers. Well, some or most of the graphics designers encounters a Vector Editing Software and sees one thing in common: provide vector images that aid him in implementing the idea. Every Vector Editing Software has its uniqueness and functionalities that differ from any other.

Read more!

Web Design Tools and Computer Graphics - Raster

As every picture element displayed in a webpage it is rendered dynamically or on the will of the designer. If you choose to render them according to your control then of course you don’t need to make them one by one for it will take years. Careful harmony and combination of colors is needed to provide a great design. Therefore, tools to ease the production of the design are provided, may it be proprietary or a freeware, functionality is the difference between them. The same may provide the same results if, of course, you choose it to be.

Raster and Vector Graphics

Raster graphics is made up of individual picture elements (pixels) that made up as a whole.

Vector Graphics uses polygons and lines to provide the image.

The web commonly used the two and they go hand in hand together. Since the web or commonly the display monitors now is made up resolutions which is synonymously made up of pixels, Raster Graphics is used to represent. Vector, on the other hand, provides flexibility to process the Raster Graphic to create a fuller detail.

Comparison of Some Raster Graphics Editing Software

Adobe Photoshop CS4

Generally, most of the designers use Adobe Photoshop since it provides a variety of powerful functionality and usability from Automation to Web. The software improves itself every time to time providing the needs of a designer to give out the best results. The current version: 11 and is part of the Adobe Creative Suite Family which offers designers and developers alike an ease of access to deploy the design and content. And also, the software can be extended and that makes it differ from any other Image Editing Software and the extensions which are top rated may be included in the next version. But the original software costs much and that makes editing using Photoshop exclusively for professionals.

The GIMP (The GNU Image Manipulation Program)

The GIMP is the free alternative over Adobe Photoshop. The software provides a lesser functionality compared to Photoshop. Users of The GIMP and Adobe Photoshop can be sinuously interact over the other software. The GIMP is originally made for UNIX systems and now is ported to different Operating Systems due to its popularity.

Corel Painter

Corel Painter is exclusively for the creative graphic designers and digital artist to create realistic designs with the aid of also realistic tools and traditional media especially the brushes. Corel Painter is also used in web for sensible designs that catches attention of the audience rather than its content. To create a realistic image, one should use a tablet hand in hand with Painter to control the flow.

Ulead PhotoImpact

Fixing images is the primary use of Ulead PhotoImpact. It allows changes like balance, color, saturation etc. to make images lifelike and pops out of the box. It is commonly used before the image is to be cropped and sliced for the layouting.

Nowadays, many existing raster image editing software have varying features and functionalities that defines what a designer wanted to be in his design. Whatever his software tools he may have be, he may always come up a creative idea.

Read more!