Jalokim
Manager
 | First steps in designing a webpage in photoshop Nowadays its far far easier to create a website than ever before. We have far more tools that make creating webpages a whole lot easier. For example Adobes dreamweaver and photoshop, and thier similar counterparts, have all extinguished the need to code in notepad. Though the geekier of coders will still use notepad to create pages , and use a fancy excuse like its easier for me. | So you wish to create a webpage design in photoshop. well don't get to hasty. You cannot just dive in and start pulling random shapes and typing lorem ipsum text. here are a couple things to take into consideration before starting to design and code your works. 1 - color and style scheme Before you do anything, you have to know what style your future design must be like and what colors it should have. As recommended many times on tealeaf graphics, use adobes kuler system. Its a fancy color pallette that you can use free of charge, to mix and match the perfect colors for your design. Most people do the mistake of picking colors that don't really match each over or are not web safe. When you use photoshop you can hit the web colors option when picking colors. then you got 100% certainty the css will read your color to the hue. Color is one of the most important factors of a site, take some time to pick the perfect link color , then try to match a nice hover color. Remember hover colors do not have to be darker or lighter than the original color. use your imagination! Style is another vital factor. You can't mix retro with sci-fi , simple with complex. Your style has to be solid and pure throughout your entire design. Also when creating buttons and banners and images, try to keep them in style too. you can't have a few of you nav links in high gloss and the rest in no gloss. everything must flow 2 - Simplicity or complexity This is another vital factor of webdesign. Right at the start you have to choose whether you want a clean, simple design, or a complex graphics filled design. remember that graphics heavy websites need to be properly optimized and the image sizes should be as small as possible, you can't go overboard with UI effects and javascript. A simple design requires a lot of space. Remember to use a lot of padding(spacing around elements), use a lot of whitespace (larger spaces that let the site breathe) and don't be afraid to use a bigger line height, making lines of text further away from eachother. 3 - Fun or Function Sites can be divided into 2 parts. Those that are functional, with everything on hand and easy to use or Fun, in which its the design and eye candy that does the work. The fun profile is used for portfolio's and show off sites. Functional sites are mostly those that give you a service, like shopping, banking or other. Most people try to find a compromise between function and fun. Its not always easy to find the perfect blend of a functional , easy to use site and something nice and attractive to the eye. when you plan out your PSD project make sure to include areas like fast navigation, links "go to top" and other helpful links and shortcuts for your users to enjoy. 4 - Content or showcase In both instances how you present your art or content is the most important. If your site is to manage a lot of content, a lot of news and information, you have to display the content in the best possible way. You big bold headings, make a statement! Your text has to be readable for every internet user. Just because you see something well doesn't mean someone with visual problems will. your text has to be readable from about 50cm from the screen. When dealing with galleries and showcases... the most important is the images in the gallery, not necessarily the page its found in. display your images in fancy frames, with fancy hover effects to maximize your impact. 5 - Originality Nothing beats a personalized design, made entirely by you! there is no need , no fun, no nothing from checking out a cool site and picking its fruits and pasting them on your canvas. create the site yourself, you'll be far more satisfied than having the burden of knowing that a few elements of your site are from another... slight change in color a button or background is not fair ... neither to the original owner nor yourself. This concludes the topic. Remember to plan out your entire site beforehand. You won't create a nice design simply sitting and adding random elements to your PSD canvas. I sometimes draw the website on paper, I can easily move around elements and prepare for the designing task at hand. Inspiration -> motivation -> planning -> organising -> photoshop and designing -> coding. Guest posting activated |
Tue Nov 24, 2009 3:49 am by dandanthedan