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 ...
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 ...
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 ...
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 ...
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. ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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".
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 ...
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 ...
Use the find options at the top of the Layers Panel
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.
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;
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 ...
This effect is made with CSS.
Simply add a border-radius attribute to your image to make it have rounded corners.
(That would apply it to all images)
Here is a live example you can play around with.
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 '...
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 ...
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 ...
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 ...
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 ...
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 ...
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
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 ...
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 ...
Going on a point that Jenna mentioned about the nav highlight; she has a good point about it looking like a separate element but I don't think it needs to be re-designed, I think it just needs to have the text lowered so it sits closer to the highlight:
The fact that something isn't there at all is a great indication that it is not present!
If you'd like to still display the things that were 'chosen but missing' in each result element I suggest not doing it as the same elements in the same section with the only difference being styling.
Rather have it be clear to the user that this section shows what ...