Visual Design for Styles

[nova]

Here are some things to keep in mind when designing styles, especially for others who may be using their journals differently than you.

1) Size and Positions Matter

There are many different elements that can either be empty and/or vary drastically in size:

• Icons can be non-existent or anywhere between 1-100px on either side. Also remember that they're not always square.
  
• Usernames can be anywhere between 2-25 characters.
  
• Journal titles and entry titles can be empty, short, long.
  
• Entries themselves can take up a single line or a whole screen or more.
  
• Sidebars and modules will vary depending on the ordering the user chooses and the content displayed (how many tags, how many current entries displayed that are visible to the viewer, etc.).
  Modules can be moved around by the user. It wont necessarily always be in a sidebar; something could be in the header or footer of the style.
  
• Text like "Leave a comment" can be changed by the user to their liking, so that could potentially also be really short or really long. Text strings can also be translated into other languages; something like "Links List" might end up being three times as long in Russian or Icelandic.
  
• Comment subject lines and comment subject icons are sometimes forgotten, but they are there, and do appear when used.
  
• Website link, user's display name, and probably many other things I'm forgetting, but you get the idea.
  

2) When It's Too Big (or Too Small)

A couple of things to consider based on how things change in size as mentioned above:

How will that specific part of your design stretch and/or repeat if there's a long string of text or a large image? Not just horizontally, but vertically too. Whether your style is fixed-width or flexible-width, there will be parts of it that need to tile. Make sure these pieces connect seamlessly to look good in all cases.



What happens when something exceeds the width you've set to an area? For example, an image wider than the entry space, or a username that is too wide to fit into your sidebar. Should scrollbars appear in that section to keep the content viewable? Should the rest of that image/text be hidden? Should it show in full and overlap or underlap whatever is to the right of it? Should it show in full and push everything else down as needed?

3) Text and Typography

Refrain from using graphical elements in type; they need to be text rather than images so they can be translated into other languages or by user-input such as "My Friends" in place of "Links List". Having a graphical element behind or around type, however, is okay.



Use web-safe fonts to ensure that text is rendered as close to the same as possible for anyone viewing your style. Below is a table of web-safe fonts, and the font type they fall under. They're not very exciting, so if you must use a font that is only available on Mac or only available on Windows, pick a web-safe backup.

Serif	Sans-Serif	Monospace	Cursive
Times New Roman	Arial	Andale Mono	Comic Sans MS
Georgia	Impact	Courier New
	Lucida Sans
	Trebuchet MS
	Verdana

4) Other Views

Don't forget that you're not just designing for the Recent Entries page! There's also the Entry/Read Comments page, the Leave a Comment Page, Read Page, Archive, Year View, Month View, Day View, and Tag pages.

Also keep in mind that your style will be used for more than just journals. In addition to communities, a user can choose to view any page (other journals, communities, feeds) in the journal style they have set.



And that's it for now; hope you found this helpful! If you'd like to see more posts like this, feel free to comment with suggestions. Other posts about S2 and CSS are forthcoming.

Comments

[holyschist]

This is awesome, thank you!