Tag Info

Hot answers tagged

11

If you already have your banner and are wondering about the little drawings on top, then I can think of two ways of getting them: 1) Buy them online, already made. Sites like iStock or GraphicRiver offer vector illustrations with transparent backgrounds, so it's quite easy to open the files and just paste them on your banner. There are also free icons you ...


5

First, I'd restructure the HTML. Having a div for every single line of text is overkill. All you need are 4 divs then paragraphs for the text. Containing div Three column divs paragraphs for text <div id="wrap"> <?php include 'menu.php'; ?> <div class="inner body"> <section class="round-border"> <div ...


4

I turn my vector images and logos in to a font (or fonts). Take your .ai files (after you clean them up, compound path, and crop the viewbox) and export as .svg. Then use the icomoon app to convert to a font. This will display at any size, any resolution crisply. https://icomoon.io/app/#/select Learn more: ...


4

There is a lot of software out there, some free and some paid. Just to list a few: FREE GIMP Ultimate Paint InkScape Paint.Net Paid Adobe Fireworks Adobe Photoshop Adobe Illustrator CorelDRAW All of which have different learning curves, you can fin more graphics software by doing a quick Google search.


4

The simple answer here is use both. The fact that you've named SVG as an option, means we can rule out photo graphics as an intended use case - because SVGs are only good for line-art graphics such as logos, icons and clip-art-like illustrations. If you are considering this choice for photo graphics, there is no choice; PNG will probably always be better. ...


3

"what is the process/workflow" There isn't one. Or rather, there isn't just one. It will vary from project to project, team to team. Common processes I've seen. 1. Send a large PSD to Dev The designer spends all their time in Photoshop then sends the file to the developer to figure out how to turn it into HTML. This can work when the designer has zero ...


3

Material design is unrelated to flat design in its principles. Material design is skeuomorphic in that it is an attempt to make web design more realistic in how it portrays elements, using layers and animation in a way that makes sense outside of the browser. Visually flat design and material design are similar at the moment, but material design can be ...


3

Asprilla, While above comments make very good technical points, I suggest tailoring your work to particular client, which starts by looking at their current site's Google Analytics - Reporting / Technology / Browser & OS / Screen Resolution. This way, you will be spending your time and your client's budget wisely by addressing your client's specific ...


3

There are several things to keep in mind when serving images to viewers. Keep the image ratio the same as the original dimensions We do this to prevent the image from getting skewed and to prevent images from being blurry. We can either keep the dimension ratio the same or clip off parts that don't fit. When using an <img> element or ...


3

Here is some additional information you may find useful. Screen Size Statistics Popular screen sizes vary, so here are some statistic sites that list screen size usage by percent, browser trends, operating systems and more. http://www.w3schools.com/browsers/browsers_display.asp http://www.netmarketshare.com/ Hero and Large Images A great, easy CSS ...


3

I don't think it needs to be the same as your logo, particularly if it's somewhat exotic, but it should complement your logo. If your logo has big chunky letters, the headline font should have something in the same genre rather than Bodoni. The logo should look like it belongs to the website, not that it had run there when it was a young logo, playing at ...


2

I think the only way for you to decide upon a colour - and other characteristics - is to evaluate the purpose of the border. It must have a purpose, even more than one; if it doesn't it's unnecessary. A distinction that I think is important, is that despite being called simply a border by CSS, you are actually defining a border stroke. The definition of a ...


2

Guidelines for choosing the dimensions of your full width browser image I've learnt these through research throughout the last year, and experimentation over the last few days for this specific use case. Choose an image with a single focal point, or no focal point at all. Your source image file will need to be huge (minimum 5000 x 5000) if you want to ...


1

I'm new here but I'll try answering your question based on my experiences in the web design field. First of all, in the current web design trend, we don't actually use flash anymore since it's not widely supported by mobile gadgets. We normally use html, css & jquery scripts or even a CMS(content management system like wordpress or magento) to built the ...


1

Personally, it all depends on your skills and requirements. Skills being able to learn and grasp stuff quickly. Requirements being finances. Learning something will need time., and that would kill your productivity for the time being. So if you have a lot of time to kill, go ahead and learn to code. I've been a designer for the last four years and i am ...


1

I work with Chinese-English prints a lot and usually people use separate fonts for Chinese and English. And like Ryan said, if English uses serif fonts, then Chinese uses serif fonts, same for sans-serif. We don't use Chinese font for English text because Chinese font is double byte and often will display latin characters in a monospace manner (unattractive ...


1

I think the reality is you can do it either way. I would certainly try to use a font up front that supports English and Chinese, if that failed though I wouldn't lose any sleep over selecting a different font for the Chinese version. Just try to keep the overall feel the same between the two. If you use a simple sans-serif English font then try to find a ...


1

Try to ditch the border and especially the border-radius on your elements. Get rid of the padding from each of the three containers, so the list elements touch each other. Divide them just with a low contrast 1px solid line. More padding on the list-items would also look good. Try styling the headlines a little bit more subtle. Finally - I personal - would ...


1

One of the aspects of 'flat' design are flat areas of colour, without an outline. Your current design is teeming with outlines—try and remove those and give the areas they outline contrasting colours. The 'flat' design aesthetic that's very trendy at the moment also eschews rounded corners for regular, 90° corners, you might want to use those as ...


1

You need to export your graphics at double resolution, say if for a standard screen you need an image at 64x64 resolution, you need a 128x128 copy of it (or even not a copy) that will be later processed on retina/high-dpi screens. But different environments may process them in different way, e.g. in HTML/CSS you need additional media queries for every kind ...


1

You dont have to rewrite your code .distributor-middle { text-align: center; } .distributor-right { text-align: right; } This will give you a centered text in the middle. You can also wrap the individual items in another div and give the middle a margin: 0 auto and text-align: justify or something and the last one float: right;. if you want to ...


1

In order to give ID's to groups and paths, you have to give them names in Illustrator. So, if you have a layer called my_layer and a path called my_path in Illustrator and you save them as an svg, you will get: If you don't name your path in Illustrator, it will save it with a random id. If you name the path and the layer with the same name, ...


1

Your headline font should fit in with the font used in the logo, this is a good design practice. "Fitting In" could either mean mirroring the same look, or providing a suitable contrasting font partner instead. ChunkFive has no WebFont variation, but the google font Alfa Slab is similar in that it is a Slab Serif as well as having a very heavy weight. ...


1

The short version Try to design for compatibility with the smallest viewport resolution: Desktops: 800x600 / 1024x768 (in pixels) older mobile phones: 320x480 (in pixels) tablets: 800x1280 (in pixels) By picking the lowest resolution, you ensure that the design will work for people with smaller resolutions as well as larger resolutions. The long ...


1

the ideal width for good readability ... should not be more than 600-700px wide This is roughly true, but only for content sections, generally speaking large blocks of text. Having a readable type, somewhere from 13px to 17px (generally 15-17px) depending on the nature of the site, if very important and the width of the section should be readable with ...


1

This is perhaps a question of taste but there are a few obvious problems with your approach. I have been reading about the ideal width for good readability and discovered that the content width should not be more than 600-700px wide. This isn't true, it depends on how your sizing your text and what typeface you're using. The actual typographic process ...


1

If I understand your question correctly, then you have two options: You can hand-draw the icons on paper, and scan them into an image-editing program. You can turn the "icon" into a fixed-size PNG with a transparent background, or into a scale-able SVG file. Then, just upload that image into your website, turn it into a link, and position it correctly... ...


1

This decision should be made on a site to site basis, depending on the situation. However, by using a mobile-first (that is, in order, not in importance) design, this decision can be made more easily. The easiest way to get the best results is to start with the essentials. By beginning with the smallest screen size that we plan to support, we know we’re ...


1

Short version: <html> - typically only add what you absolutely have to <body> - again add judiciously As your project grows the CSS specificity can and will come back to bite you if you're not careful. Some more details and resources you may find useful HTML is highly permissive, there are tons of ways to accomplish a task, espeically in ...


1

I do feel there are some issues with this design- it's not terrible but could do with some work: Get rid of the gradient at the top. Or if you do keep it, make it very subtle- I would also recommend making it a radial gradient rather than horizontal linear. The brown shades may be based on the logo but they're a bit "mucky", especially with black text on ...



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