The poll results show that you love Monofacor’s expanded content. But also, half of the votes gone to “I like the way it is”.

I decided to keep Monofactor as it is, and keep writing more theorical stuff other than giving freebies away (which is not my final word, read the rest=), so my regular readers will keep staying happy.

As for more content, I opened up a designer/developer community where you can yourself can too blog about design and development topics. It’s a system which you can also earn money from your content, by placing your own banner ads to your blog posts. It also is where I will post my freebies as collections and publish my graphic/development tutorials for the insiders, just like everyone else in there.

You are also able to collect your favorite content such as tutorials, free icons

You can check out DesignInject here

Designinject is yet a new child, so please join and contribute and we make the community bigger.

As for Monofactor, we will be seeing more articles on theory category.

I hope you like the movement =)

Thank you everyone.

Onur

This site has been like my other girlfriend, and when it comes to what to do next with it; I’m in struggles deciding which way to choose.

Monofactor happens to be getting more traffic from people I want to make happier, searching my freebies and news content.

On the other hand; there are also a group of select people I consider; keeping an eye on the site for the little more academic and theorical content - which if it was me I would get bothered with seeing the similar popular stuff I can see on most sites -.

I’m considering to add more news and free related content to share more, and obviously this design is not really flexible for that. May also need to change. But, I also believe this boutique look may go away when the design gets altered for wider range of visitor scale…

So, Monofactor is standing in the crossroads of where it will stand in the future.

Please help me choose if I should continue to do what I do, or widen the content and change the structure & and layout, with voting on your desired option in the poll.

You can also comment on this post suggesting me your ideas.

POLL HAS ENDED. THANK YOU VERY MUCH.

Results show that 8 of 20 voters chose to suggest Monofactor to stay the way it is, and 12 chose for more content with a new design.

Thanks very much!

Onur

As I promised earlier, I’m releasing the first 5 pieces of the 3d isometric vector icon set which was for a client and was cancelled couple of months ago.

I tried hard to convert them to generic eps format so that you can open and edit with many vector editors, but as some of you know, it is a very time taking process.

So I again filed them for Illustrator 8.0 and above versions.

The first part contains 5 icons subjected as “lock”, “user”, “new user”, “newsletter” and “warning” icons.

Completely scalable vectors, so you can edit, change and use for printing or web purpose. But, like before, there are just little restrictions to preserve my own rights.

Wait. There’s more. I released the remaining and the full set of this icon pack under Design Inject. Click here to go to Design Inject, to download the full set

If you want to really thank me for these, I humbly ask you to just buy me a latte, that’s it; right below. Thank you=)

Buy me a coffee latte by donating $5 usd(cost of a mid size latte at starbucks) =)

I listed here the ones I always use on when building websites and suggest to my friends. I categorized them as for designers & developers and for SEO tracking purposes.

• Top 10 Extensions for Designers & Developers
• Top 10 Extensions for SEO Purposes

I am sure some of you already have them in your FF. In total, they’re great time-savers.

Top 10 Extensions for Designers & Developers

• 1- Firebug

  With firebug, you can edit, debug and monitor CSS, HTML, and JavaScript live in any web page.

  Most of the CSS / XHTML developers I know dig it for it’s live edit and change feature.

  Click here to download Firebug
  

• 2- Web Developer

  Developed by Chris Pederick, Web Developer is one of the best development extensions around, and my personal favorite.

  It is loaded with zillions of development tools such as CSS, DOM elements, xHtml properties of the website, browser resize, W3C validation check, site information, form, javascript and images limitation etc.

  Totally a must have.

  Click here to download Web Developer

• 3- Dust-Me Selectors

  This tool helps you find the unused selectors on a web page. A handy feature for developers.

  Click here to download Dust-Me Selectors

• 4- Fire FTP

  Fire FTP is a free and secure, cross-platform FTP client foFirefox which provides easy and intuitive access to FTP servers.

  Click here to download Fire FTP

• 5- MeasureIt

  This tool allows you to draw a ruler across the web page to check the width, height, or alignment of page elements in pixel measurement.

  Click here to download MeasureIt

• 6- Dummy Lipsum

  This one is a handy tool to generate dummy “lorem ipsum” text from the Firefox context menu, without having to visit lipsum.com every time you need.

  Click here to download Dummy Lipsum

• 7- IE Tab

  Though Internet Explorer 7 is becoming more popular than the outdated and developer enemy 6th version, it still has many rendering issues you might want to check when developing sites.

  IE Tab allows you view the page in IE render inside the same tab, without having to launch the program.

  Click here to download IE Tab

• 8- Screengrab!

  Screengrab! is a great website snapshot tool for Firefox. It allows you take partial or whole screen snapshot of the page and save it in various graphic formats.

  I use it mostly for my inspirational deployments.

  Click here to download Screengrab!

• 9- Colour Contrast Analyzer

  This extension is a very helpful tool for visual accessibility check. It allows you to see if there is sufficient contrast between background and foreground colours of the web page.

  Click here to download Colour Contrast Analyzer

• 10- ColorZilla

  ColorZilla helps you pick the hex or rgb colour of any pixel on a website. Very useful for designers.

  Click here to download ColorZilla

Top 5 Firefox Extensions for SEO and Internet Marketing

• 1- Alexa Sparky

  Great tool for viewing the Alexa rank, traffic and linkback details of a web page from your Firefox status bar.

  Click here to download Alexa Sparky

• 2- Pagerankstatus

  Another sweet extension to check the google page rank status of a website from status bar.

  Click here to download Pagerankstatus

• 3- Seoquake

  If you want both of the above SEO check tools and even more ranking investigation for the page viewed, Seoquake is an absolute must have.

  Click here to download Seoquake

• 4- KGen (Keyword Generator)
  

  Amazing tool allowing to generate the best matching keywords for the page, depending on the weight of the major words inside the content of that page.

  Click here to download KGen

• 5- MetaTags

  This sidebar displays page meta-information (metatags, links, etc.) Also has an automated search engine submission menu.

  Click here to download MetaTags

I hope they are useful for you.

Please let me know if you know any other great tools for development and seo purposes.

Since I pretty much solved the technical issues, I’m giving more care about the site.

As of this period being my vacation, I use my time less for my clients but more for my own projects and improvements on monofactor.com.

So here are some bits from what I’m up to lately:

• I’m organizing another licence free vector icon set (3d isometric) which was another abandoned job.
• Will publish the next phases of the “Fundamentals of Good Design” article series.
• Had a self project started for designers community, to deliver daily inspiration and resources. May sound as a very popular attempt nowadays, but it will be more complicated than the existing ones.

  It actually will be for myself to keep my inspirational and resource data organized in one place.

• Been brainstorming about my late primary website, Graphart (www.graphart.org) to what to do about it.It used to be a local(turkish) graphic designers community.

  Though it was decided to no longer keep alive due to lack of contribution among turkish designer population (it was year 2003 and we were few then=))

  So, you have any ideas? Anyone want to contribute, share information?

We will see the new stuff up on the site soon. Meanwhile, I will very much appreciate your suggestions and thoughts.

Cheers!

The zipped file contains various vector formats which are basically highly editable with Illustrator 8 and above.

Please be informed that with earlier Illustrator versions or other legacy vector editors, you might loose some of the effects.

Disclaimer & Conditions: Redistribution, Release for Download or Selling of these icons on an another site without permission is completely prohibited. Drop me an e-mail if you would like to publish the icons for download on an another site.

You’re though completely free to edit, change and/or directly use the icons in your site and in any kind of your projects.

You liked them? A thank you will be just enough. But if you’re really nice, buy me a coffee latte by donating $5 usd(cost of a mid size latte at starbucks) =)

In order to shorten the time I waste on the css and to modify the elements a bit easier, I defined some common base selectors to use and they exist almost on every css file of my previous projects and this site’s css as well.

Doing that, I reset the default values for common elements and selectors, and then I restyle and organize those elements individually, wherever they are needed.

Here are my favourite fixes and resets for my possible troubles:

• 1- Settings for Headings

  Because IE6 displays the font-size and margin/padding properties for headings different than other browsers, I define preliminary standard values for the heading properties:

  1 2 3

  h1 { font-size:138.5%; }

  IE6 renders the font sizes for headings differently (mostly for the typefaces like Georgia, Trebuchet MS, etc), so they need to be standardized for all browsers:

  1 2 3 4 5 6 7 8 9 10 11 12 13

  h1,h2,h3 { margin:1em 0; }   h2 { font-size:123.1%; } h3 { font-size:108%; } h1,h2,h3,h4,h5,h6 { font-weight:bold; }

• 2-Hiding the Horizontal Rules

  As I sometimes divide content into divisions, it looks better and more organized by dividing with horizontal rules when site is viewed without stylesheet. And of course, I hide them inside css:

  1 2 3

  hr { display:none; }

• 3- Removing the Link Outlines

  Especially with Firefox view, a links get bordered and outlined on focus and active states. It is annoying when it is not intented, so I deactivate the link outlines.

  1 2 3

  a { outline: none; }

• 4- Preventing Linked Images Gain Borders

  Unstyled img elements gains borders when they are hyperlinked. I remove the possible image borders:

  1 2 3

  img { outline: none; }

  However, as Gareth reminded me on his comment; removing outlines may reduce accessibility. Removing outlines and borders on focus or hover will theorically disable browsing using tab key.

  Unless you are not worried about this issue, you can use this hack.

• 5- Resetting Margin and Paddings on My Common Elements

  Mostly because IE renders margins and paddings ratherly different than other major standards based browsers, I reset the paddings and margins for my form, paragraph, and list elements.

  1 2 3 4

  p, form, ul, ol, dt, dd { margin:0; padding:0; }

• 6- Clear Fix

  Almost in every project, I come to needing the float clearing divs. So I created a base class selector for clearing div and usually pick name from a comic hero. Mostly I name it spiderman/batman =)

  1 2 3 4 5 6 7 8 9 10 11

  .batman:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .batman {display:inline-block;} /* Hide from IE Mac */ .batman {display:block;} /* End hide from IE Mac */

Of course some of you might think if all of these settings are necessary, as some of the techniques may be altered with other shortcut selectors. These are just my kind of solutions, and I hope they help on your projects too. There are many more techniques about base css documents and resetting selectors like Yahoo’s Base CSS and Eric Meyer’s Reset CSS. Just take a loot at them and see how timesaving they are.

Once we have the blocks of information and the important information areas determined, we can have a look at the design elements and how they can be used to interprete the ideas and messages, using the visual language.

So, here we go:

Design Elements:

• Points:
  Points are the elements that have positions, which are basically root for lines. The difference is; while lines have continuing extension, points are individual objects without extensions:

  Still, according to “Gestalt Visual Perception Theory”, when multiple point elements are gathered within a relative space, human eye tends to connect the point elements and visualize the form and shape:

  

  We can see how Addcomm website uses the point elements grouped within forms, lines and shapes in the homepage illustration:

  

• Lines:
  Lines are the spaceless figures between points, hacing direction, length and angle.Lines help building forms, shapes and figures to represent an idea or matter. For illustration purposes; lines are also used for imitating perspective, dominance and continuity:

  

• Forms and Shapes:
  Shapes are the figures created by connected lines, having 2 or multi-dimensional formats.Shapes are mostly the resemblence of real life figures, used for imitating the real life concept in graphical preference:

  

  Typography, which is another form of shapes, is used for creating type content and visual language.

  So in short, we can say following objects refer to as shapes:

  • Figures
  • Icons
  • Drawings
  • Figured elements of illustrations
  • Types / Fonts
  • Marker shapes

  See how web2.la website uses the shapes effectively:

  

• Textures:
  Textures are complex combination of forms, shapes, lines and figures. Mostly used to create surface appearance or visual image.In this matter, background patterns, surface imitations and pictures are categorized as texture elements:

  

• Color:
  Color is one of the strongest elements for design. It is used to create harmony, represent a feeling and completing the design concept. Shades, tints and tones of color is percepted by the source of light. Without light, it is only black. Knowing that do help illustrators, photographers and designers create good imitations of reality and visual compositions with the effective blend of light and color.

  Typical human eye will respond to wavelengths between 380-740 nanometers (nm), with red being at one end (740 nm), violet at the other (380 nm) and every other color in between these two.Sometimes in the spectrum of colors, heat of the light source (kelvin values) also affects on the range of color distributon.

  Basically there are mainly 3 properties of color:

  • Hue: Is the position and direction from “white” of the colors. The hue value of a color determines the position of the color in the color wheel. Hue value is referred as the exact and pure tone of a color without tint and shade properties.
  • Value, Shades and Tints: Value is the measure of where a particular color stands along the lightness–darkness axis. Tint is used to add white balance, and shade is used to add black balance to the color.
  • Saturation: Determines the strength of color tone. It is practically the the amount of gray in a color. The more the color has gray tones, the more it is saturated



There is a lot more to talk about colors and characteristics of them, but it is another big issue that I would like to mention later.

Usage of a good color harmony alone can make the design effective, or bad usages can sink the job. I can say color is almost the biggest and most powerful element among all other design aspects.

See how tweetapp uses a great color palette and blend it in the design nicely:

Knowing what elements are needed, what style they need and why are they needed is important.

Good design has never been popular, it is the effective design that does the score, which also covers good design.

This slick layout can be very useful and effective for web designers, graphic designers, photographers and artists.

The portfolio items are powered with lightbox gallery viewer and javascript based fade in/fade out effects when mouse is rolled over them.

It is all yours for only $20 USD.

The zipped file contains:

• Well organized, layered PSD [Photoshop 7.0 and above]
• xHTML & CSS output of the design
• Fonts used in the template

Price: $20 USD.

Exclusive licence also available for $415. Contact me for exclusive purchase.

At the institute I work, most of my class hours pass by giving students design works and to-dos. Like “œcreate a design layout for x consulting company website” or “Create an iPhone presentation page without using iPhone images but injecting the essence of it’s features visually” etc.

After declaring the work, almost all students (and most of the designers) open up Photoshop, and start gazing at the blank screen with blurred and blank eyes, for hours… We might almost call this “Designers’ block“- which I will be talking more about in an another article soon-, but it really isn’t.

We can call it “lack of organization“, “not knowing what to do“, or “photoshophobia“ or even “I don’t belong in this world“ issue but it is not “Designers’ Block”. It is rushing into things without planning, organization, knowledge of the subject to be designed.

Definition of Design

Dictionary.com says “to form or conceive in the mind; contrive; plan” as the 4th meaning of design.

You can also have a look at other explanations (http://dictionary.reference.com/browse/design), some of which are more basic, relative and common, but I would like to underline what i just mentioned:

• Forming your plan or ideas:
  Whatever the subject is, we first have to have an idea about the subject. If it is about a beverage company, then it is useful that we do a small research about tasty beverages and well shaped sample designs we come by in the web.

To make our work good, we will need to organize the information, and then jump to styling it:

• Organizing the Information:
  Since we always have at least the headings for the subject, we will know what topics or parts of the information will need to be visually boosted; so that the visitors can catch them earlier.

  I highly suggest a pen and paper to draw a blueprint of the site, outlining the focal areas, important sections.

  

  This will help prepare before opening up a canvas and giving visual styles to that information block.

• Using the design principles and elements:
  I will be talking more about the design elements in the future, but for starters; I can say they are basically a list of visual objects and rules making your work efficient, stylish and elegant.Now that is the step where we open up photoshop or an equivalent visual editor to start shaping our data.

A good design is a compilation of good color contrast, right choice of typographical elements, a well use of white-space and creative small touches, all making the raw information to look more user-friendly and elegant.

These steps will also prevent a possible “Designers’ block”, helping you know what you are doing and how you are doing.

I know that so far I have been a little abstract about the subject, but the main idea is; how well you are prepared about the scope, so well you will handle the design steps.