Hey there, fellow designers!
As someone who works with a lot of marketing and campaign agencies, I often see amazing creative concepts for websites. But sometimes, those designs don’t quite translate smoothly to the online world. That’s where I come in! I bridge the gap between stunning visuals and flawless functionality.
This blog post is your cheat sheet to designing websites that not only look fantastic but also work like a dream. Consider these your technical commandments for a truly successful online experience.
1. Software Savvy
- Pixels are king: Stick to pixel-based programs like GIMP or Photoshop. If you’re an Adobe Illustrator fan, make sure to use the pixel preview. Why? Because websites are displayed in pixels, and you want your design to translate perfectly to the screen.
2. Resolution Revelation
- Browser beware: Remember those pesky browser elements (taskbar, buttons, address bar)? They eat up screen space! Design for these common resolutions:
- 1280 x 1024: design in 1240 x 854 pixels
- 1024 x 768: design in 984 x 598 pixels
- 800 x 600: design in 760 x 430 pixels
- Resolution riddle: Think about what happens at higher resolutions. Does the text get stretched out? Does the background image become a panoramic view?
- DPI dilemma: Forget about DPI for web design. Just set it to 72 DPI in Photoshop.
3. Font Finesse
- Font favorites: Arial, Verdana, Trebuchet MS, Times New Roman, Courier (New), Comic Sans, Sans-Serif, Georgia – these are your trusty sidekicks.
- Font frenzy: Don’t go overboard! Stick to a maximum of 2 fonts for a clean and consistent look.
- Verdana victory: This font was born for the screen.
- Fancy fonts: Want something more unique for titles and headers? Explore web fonts (Google Fonts offers a huge library) for easy implementation and optimal performance.
4. Size and Style
- Sweet spot: Aim for a font size between 9px and 12px for easy reading.
- Sharpness: Choose “non-aliased” (none instead of smooth in Photoshop) for crisp, clear text.
- Text tango: Keep your text width to a maximum of 500px. This prevents those annoyingly long lines of text that make readers’ eyes glaze over.
5. News Nugget
- Homepage headlines: How many news items will you feature on the homepage?
- Newsflash format: How will you display the date, title, and “read more” link?
- Intriguing intros: Will you use intro text and images to entice readers?
- Archive access: How will visitors access older news items?
6. Form Fundamentals
- Essential elements: What information do you need to collect (name, address, email, etc.)?
- Email etiquette: Which email address(es) should receive form submissions?
- Required reminders: Clearly mark required fields and provide helpful error messages for incomplete forms.
- Thank you touch: Don’t forget a friendly thank you message upon successful submission.
7. Color Confidence
- Contrast is key: Ensure sufficient contrast between text and background. Dark background with white text is a classic for a reason.
- HEX appeal: Use HEX values for colors (e.g., #FF3300).
- RGB rules: Design in RGB color mode, not CMYK.
8. Navigation Nirvana
- Highlight heroes: How will you visually indicate the active page in the navigation menu?
- Hover hints: What happens when users hover over menu items?
- Link loveliness: How will links within the text look and behave?
9. Screen Savvy
- Scanning secrets: Visitors naturally scan a page from top left to bottom right.
- Strategic placement: Place your logo, navigation, and breadcrumbs in the top left corner.
10. Template Triumph
- Fixed foundations: Use fixed widths and heights for images within your templates.
- Structured success: Define the consistent elements of your templates (title, intro, call-to-action, etc.).
By following these guidelines, you’ll create website designs that are not only visually stunning but also technically sound and user-friendly.
