14

Screen Size Higher screen resolutions ultimately make everything look smaller. A very small percentage of Internet users are still using older resolutions like the once popular 800×600. Sites using a 720px width appear very small on high resolution screens, and don’t leave room for a sidebar. Now most websites are staying somewhere around 960px wide. Some ...


11

The advantages tend to be primarily: Rapid Prototyping (ie, speed) Built-in Cross browser consistency If you need to create a grid, and the grid you need to create fits the pre-built CSS framework, then the logic is that you're halfway there by using the framework. All that said, I tend to agree with you. CSS frameworks, IMHO, are like visual design ...


11

I'm familiar with HTML5 Boilerplate, but I'm more familiar with Bootstrap, so I'll talk about that. Remember that both are geared towards two different tasks, (H5BP is a responsive normalised template, Bootstrap is a collection of HTML/CSS/JS widgets and a responsive grid.) In fact they can be used together. However, I can't help but wonder if Bootstrap ...


10

This is called 'speculative work' or 'spec work' as it's commonly used. Spec work is you working for free under the assumption that you MAY get paid for it. This is actually quite common in some industries...film/television, architecture, etc. But it's usually a bad deal. It's common in the graphic design world, but also quite common to outright refuse ...


8

It depends..... Disregarding the implications of derivative work, that's a legal matter and different. Template systems are meant to be altered in many instances. There are a ton of positions out there which are looking specifically for those who can alter template systems to client demands. Bootstrap is a template system. Wordpress is a template system....


7

The nice thing about templating systems and frameworks is that they can save you a lot of time iff you work the way they want you to. So, with Bootstrap, once you learn their semantics for doing a JS carousel, it's almost criminally simple to implement. Also, Bootstrap seems to get a lot simpler if you either roll your own before you get started or use ...


7

How do i crop out images and select them on AI and save them? You don't have to crop. In both Adobe Illustrator and Photoshop you can use a technique called slicing to extract web graphics from the artboard. I'll post some links so that you can get started with slicing in Illustrator. After you have sliced your webpage into the elements you want, use File &...


7

Responsive Photoshop web templates do not exist. Usually if someone is creating Photoshop templates for a responsive site they are based on the CSS media queries. If you are developing for each media query that is going to be a nightmare if you target up to four devices (mobile, tablet, laptop, desktop, soon to be an addition with Mac's 5k). I would ...


6

Out of interest, do any of you work in a large team for a large company? Frameworks such as bootstrap are fantastic for creating a consistent standard of code throughout a project, it also means that when recruiting for new developers, those with experience of a popular framework will already be familiar with the syntax and can become productive much ...


6

I've been researching frameworks a lot the last month or so. I haven't actually dived into any of the solutions, but a couple of framework alternatives that are on my shortlist are Foundation, Intuit and YAML and Base. The good thing about these is that they don't have the 'Bootstrap' look, and seem to encourage designers to to their job (design), whilst ...


6

The real question is not "which document size?" but "which document width?". I would recommend to design at 1440px X 900px, this way you're in the average of browser sizes (put some guides at 1000px for smaller browsers and ipad). Don't stop your design at 1000px, stop your content at 1000px. Usually I start at this size then I increase my height ...


6

Short answer: No Photoshop can’t create responsive templates. Long answer: To understand why, you need to understand the difference between normal, static designs (like you do in Photoshop) and what is needed for a responsive designs. Lets take a portrait of someone that is in portrait format 4✕6. Now someone cuts of the upper half of the image, making it ...


6

There are several placeholder image sites. placekitten.com (kitten placeholders) placebear.com (bear placeholders) fillmurray.com (Bill Murray placeholders) placecage.com (Nicolas Cage placeholders) dummyimage.com (just blank image with dimensions) There are more.. just Google search for "placeholder images".


5

When you copy something from Illustrator and paste it into Photoshop, Photoshop places it with the same "physical dimensions" that the object had in Illustrator. So, if your object is 14 inches wide in Illustrator, it will place the object in Photoshop at 14 inches wide, regardless of how many pixels that is. Take a look at this screenshot, and note the ...


5

What you could do is create a few layers and give them layer masks that are sized to the different image sizes that you want. I did this by using the Rectangular Marquee tool to make a selection, then going to Select > Transform Selection and sizing the selection to be 150px wide by 50, 100, 150, and 200px high: Now, drag your images in and apply the masks ...


5

I suggest a bunch of indicators working in tandem: 'Greyed Out' - give the unavailable buttons some transparency, (or the appearance of transparency with lighter colours). This will make sure it is noticeably different from the other buttons, at the very least sparking curiosity as to why it's different. 'Strike-THROUGH!!!!' - "Like seriously guys look, I ...


4

This is a question that really cant be answered since it is based on opinion of ones desire in a color palette. Furthermore, you only provide a sample area and we have no clue on your end intentions or the layout of the entire site. I would strongly advise searching for color inspiration from other sites or head over to Adobe Kuler or Colour Lovers and ...


4

Adding to what has been said in the great previous answers, another advantage to these templates would be cross-device consistency. The built-in grids make it very easy to design for any OS. I still prefer to write my own code, for the following reasons: Familiarity with what I've already written. If I need to change anything, I know exactly where it is; ...


4

This effect is made with CSS. Simply add a border-radius attribute to your image to make it have rounded corners. Example: img { border-radius: 10px; } (That would apply it to all images) Here is a live example you can play around with.


4

I'd say Twitter Bootstrap is probably one of the favorites. It has a nice grid system that utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack ...


4

When I learned how to theme, I didn't really know PHP at all, so I modified Kubrick - the default of the day - to get what I wanted. That's obsolete now, but it might do you well to find a theme that's similarly simple and well-supported and modify it in order to get a feel for how WordPress theming works. These days, I'm working with _s (pronounced '...


4

I have built a WordPress theme from scratch only once, it wasn't fun. There weren't a whole lot of resources out there for themeing from the ground up; most guides I came across were for an older version of WordPress and already obsolete. Unless you are already familiar with the WP architecture, diving right in and trying to build your own template from ...


4

The biggest advantage is that you can experiment with the resizing yourself instead of just speculating what things would look like. I have a very "content first" approach of development where I actually code the navigation and add the text content. It tends to expose you to things that you did not anticipate when you were in design phase. By using a ...


4

A more elegant solution would be to grey out the button, set it's state to disabled and use a disabled cursor to clearly show the state. I've thrown together a quick codepen to demonstrate this.


4

Use the find options at the top of the Layers Panel etc. Narrowing search parameters hides other layers. If you want to see the layers in the layer panel, but not view the other layers in the document window you can Option/Alt-click the visibility icon for the layer, that will turn off visibility for all other layers.


4

As someone who uses these kind of services (I'm a woman, I get my hair/nails done etc.) nothing annoys me more than stock images on a salon website. I want to see where I'm going, how it looks, how the result looks. I want REAL feedback and images. Don't go for stock, but take (or have someone else do it) pictures of the real salon. Don't use stock images ...


4

If you only want place holder images, just use some Creative Commons images. Do a search at the Creative Commons search website. search(dot)creativecommons(dot)org Alternatively, many stock photography sites let you download watermarked images for free - such as istockphoto(dot)com In istockphoto just find the image you want, click on it to open the photo ...


3

For years, I used to handcode everything, but nowadays I tend to use Bootstrap. Why do I do that? I get a responsive layout with very little work. At some of the websites I was working on, it just need a couple minor tweaks to get a tablet- and mobile-optimized layout. The responsive navbar is one of my favorite bootstrap component. Default controls is not ...


3

The brainstorming process you are going through right now is normal. It is hard to answer your question with so little information about your company, your customers, your target, your whole business. In fact when done correctly, the process is long and deep, and often (if not always) requires a professional expertise. That said, I think what would help is ...


3

Welcome to GD Firebirdz. In regards to your question it maybe considered by some as off-topic but I will try to give you some advise on how to make a better design. Your whole design is Monochromatic: Monochromatic colours are all the colors (tints, tones, and shades) of a single hue. You're not utilizing color very well and it's hard to distinguish ...


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