Tag Info

Hot answers tagged

12

There's two questions here. Let's start with the first: Why do people use the golden ratio? Because they are lazy, or just blindly following advice without putting a lot of thought behind it. The reality is that the Golden Ratio is mostly BS. Well, BS may be a bit harsh, maybe a better term is that it's mostly arbitrary. Connections to Roman ...


7

I'm only advising this on the basis that it's used for short snippets of text and not paragraphs. The formatting of headlines can and should be controlled as much as possible within reasonable limits. JavaScript, or extra unnecessary elements are not quite "reasonable limits". Non-Breaking Spaces on the other hand... ...


6

The best practice is to acknowledge that you have no real control over line breaks on the web and it's best to design with that in mind. Any solution to the contrary will, invariably, have to be hacky. As it will be a hack as HTML doesn't adhere to user defined line breaks outside of hard coding. You could do it with JS fairly easily. Set up your break ...


5

If your presentation is a printed material, personally I draw a wireframe or the end design proposal and annotate it with comments and explanations. and I do present all possible interaction like so - for example. if you have a pulldown menu or a mega menu in the top navigation bar for example, I render a file having the nav bar with one opened menu item. ...


4

This should be possible somewhat easily if you instruct your web developer accurately. They'll have to give the bar a certain so-called class and include a media query to hide it on smaller screens. for example: html <div class="foo"> <div class="bar-element"> ... </div> <div class="bar-element"> ... ...


4

It's not that circles or golden ratios are some kind of required constant in logo design. What are constant in effective design are proportionality and similarity (or, sometimes, contrast). There are many natural ratios on which to base proportionality. The golden ratio is one, but there are also 4:3, 3:2, 2:1, 1:1, 1:3.14159 and many others. Simple ratios ...


4

I have a feeling the answer would come down to opinions. In my opinion no, the baseline is for consistent vertical flow. And the grid for layout and logical sections. The two could be integrated. But may create more design issues than they fix. You could have baseline with multiples of 4px and a grid with multiples of 7px, as long as it looks good its ...


4

This really depends on your workflow. Keep in mind that lots of web designers these days forego the use of any graphic software and design directly in their browser. That way, you present your designs in a browser, where they will end up. Clear an concise. If you do use static mockups in any part of your workflow, you could always create a small dynamic ...


4

Your question is why I suggest coding in the browser (reference: What are the steps in designing a website?). The best way to display interactivity in a site, app, or anything is the medium it is to be used in. I'm not saying completely develop the site and deliver it. What I am saying is you can deliver stages in the design/development process: Simple ...


3

Some people call it an arrow or a caret that enables a slide-out of content or a popup can display some sort of information. In this particular instance it would appear it is for the navigation. Since you tagged this with CSS I included an example of how to create it: .arrow_box { position: relative; background: #b34ae5; } .arrow_box:after { ...


3

There seems to be recent trend towards creating animated GIFs of UI interactions (a quick search on Dribbble will reveal more). I imagine a lot of those are put together using After Effects. InVision recently posted an article outlining how they do this inhouse. While I can understand the appeal of these kinds of deliverables (they're en-vougue, they look ...


3

With RTL language sites, we need to change a fair many things about a LTR site. Assign <html dir="rtl">. For more information on what that does, check this article or look it up. There is also a CSS direction property that changes the text flow of block level elements and text but does not affect the layout of the page. Mirror your layout. This means ...


3

My understanding and knowledge of grids is quite limited but from what I've learned when it comes to images the upper side should line up with the f-height of the copy and the lower side should line up with the actual baseline. That may be a bit tricky to implement properly on the web but it's worth considering.


3

I think of the baseline grid as a framework to build from. You could probably potentially use it for everything but your work will end up looking robotic. For the web, I think it could make sense to use multiples of your baseline grid to create spaces between your elements as you can probably define it as an em or somehow in sass and reuse it. In print, I ...


3

Since the tiles are shaped in such an irregular way, you can create each them using SVG in Inkscape or Adobe Illustrator and attach a click event to change the selected color. Once you export it from Illustrator or Inkscape it turns into XML which is DOM based, so you can selecte each part using CSS and JavaScript. You can then do the same thing for the ...


2

First of all, this answer depends completely on what the content of the text and the feel you want to create. From your question, it seems that it's for some type of blog or informational article, but not too technical. My answer will reflect that outlook. For these dense sections should I reduce the width of the content wrapper? Or enlarge the font ...


2

First of all, creating a "coming soon" page might not be a good idea at all. We have a discussion about whether or not they are helpful which I hope you read and consider the arguments. If you still think that you should create a "coming soon" page, then the best practice would not be to design for one particular set of dimensions, but rather to design ...


2

It's pretty easy to find a correlation between the golden ratio and the proportions of natural forms, e.g., plants and animals. Of course, the growth of natural forms is subject to variability caused by, for example, environmental factors, so you will never find a perfect correlation. Likewise if a designer consciously uses the golden section to design a ...


2

There is a website, Woorank that auto generate your website into a monitor like this: They offer a 7 day free trial. Very good website if you are a web designer. You can also do this manually with a program like Photoshop or GIMP. Open up your image in photoshop or GIMP. Use the the Pen Tool to draw a shape around the screen: Then take a screenshot ...


2

@born2DIE It would be good if you provided a sample image of your logo. In addition to what @joojaa and @hsawires have said, try the following: Even AI doesn't really support 3d! I Assume you are using the "Extrude & Bevel" tool (Effect > 3D)? The best way for SVG Compatibility is to break up complex objects into their composite paths. You can do ...


1

There's a jquery plugin for that, Balance Text. It's an Adobe-made plugin created alongside of Adobe's proposal to get a CSS option text-wrap: balance; that would just do this like Adobe InDesign's Balance Ragged Lines feature (sounds great, but even if it is accepted, it'll be years before browsers support it). The plugin, however, works right now. It ...


1

You can use JavaScript to detect the screen width and write the correct version (with < br>'s as you have them in your post) into an empty div via innerHTML. Unfortunately, "desired web breaks" and "best web practices" don't go together. Let go of your perfectionist desire to get every word in the right place -- there are just too many screen ...


1

What most people do in this situation is to provide the developers with a pattern library / design library /style guide. This is what I provide the developers at my company with. Its basically a wiki that shows the developer what they need to build out say the navigation for example. It will provide them with all the information they will need to remake ...


1

I would use two different stylesheets. One stylesheet for on screen, and another print stylesheet to specify sizing when your page is printed. This way you will be able to adjust your CSS appropriately for various devices, as well as specify inches or centimeters for a printed page. Check out these resources for making a print stylesheet. And for achieving ...


1

Actually this is a known "wontfix" bug with Firefox not fully supporting SVG fonts. Once WOFF2 becomes fully supported, Firefox will render SVG font outlines embedded in an OpenType-flavored WOFF 2 font. At least that's the idea. Learn more here: https://bugzilla.mozilla.org/show_bug.cgi?id=119490


1

The problem with most greeked text that resembles real text is that people don't read. In the context of websites, I often find that I need to make it absolutely clear that "Hey, this page still needs real content!" To that extent, I've been using 'Xxxx' text: Xxxxx xxx xx xxxxxx xxx xx x xxxxx xxxx. Xxxxx xx xxxxx xx xxxxxxx xxxxxx xxx x xxx. Xxxx ...


1

Note: I have not tried any of these tools in depth. The closest thing I can find to a full animator for the web is Animatron. It looks like it renders to Canvas, which means it is built on HTML5 and JavaScript. Another similar tool is HTML5Maker. However, if you're just looking to create an online video there are lots of tools including Moovly, GoAnimate, ...


1

You were exporting at High (300dpi) resolution. On the other hand, "Save for Web" has an automatic resolution of 72dpi. The 300dpi PNG is larger than the 72dpi PNG because the number of pixels in the image has increased, while the print size has remained the same. It's easy to Export an image to PNG with specific pixel dimensions if the target resolution is ...


1

Are there are standard dimensions for a coming soon page? No.


1

If it's web design feedback you're after then things like Behance and DeviantArt are ok but they're more geared towards graphics. I'd suggest going onto the Envato forums, probably the themeforest site as the users on there are all people who are selling websites so they're all looking for feedback themselves. http://themeforest.net/forums



Only top voted, non community-wiki answers of a minimum length are eligible