When designing something for the web, is it a better to focus first on the layout and then on the style or the reverse?
-
2You don't design with CSS. You design with a variety of tools, graphical or code based, even drawing on a piece of paper. After that, you build the code and then apply the needed styling. To be honest, it's the first time I hear something like this. Think of this: how would you style something that doesn't exist?– DevinCommented Dec 12, 2015 at 17:16
-
@Devin when writing or using CSS frameworks you have style before layout. The framework then often gives you a way of adding the layout, e.g. some grid classes.– MarvinCommented Dec 13, 2015 at 7:57
-
When you use frameworks you have default styles applied, you don't design anything with CSS. Furthermore, until you start adding something, even those default styles don't exist. You can design with CSS only after you have content to style.– DevinCommented Dec 13, 2015 at 15:13
-
For me styling just means to make elements look the way you want them to look. For example I style/design tables, menu bars, or even page headers when I write my CSS framework. Then I add elements to the page (layout them) and apply these styles. My understanding is, that there doesn't have to be any content when I work on the style of the page. But yeah, probably I just have a different understanding of the words.– MarvinCommented Dec 13, 2015 at 18:54
Add a comment
|
5 Answers
CSS was designed (unfortunately) to lump layout in with styles. It really doesn't matter whether you focus on layout or colors or fonts first. What is important is to focus on content first. That is the most important distinction: content v. styles. Content drives everything. Content drives layout, and font and colors come in to reinforce everything.
-
While I understand your point, there are many situations where color, typography, shape and layout are way more important than content, actually becoming the content itself. Or in other words, sort of "McLuhan-ist medium is the message" :) . Seriously speaking, at least 50% of the sites on the web have no content that matters at all, but styling makes it shine in some way. For example: is it the same to read a newspaper in "UNIX like" lines or in beautiful (and conscious) style, with spacing, emphasis on words and so on? I bet no. Otherwise, most of us would be working at something else!– DevinCommented Dec 12, 2015 at 17:12
-
@Devin You are contradicting your comment under the question. I upvoted that one.– RobCommented Dec 12, 2015 at 20:44
-
Yes, that's why I said I understand the point and playing devil's advocate ;) . However, the question clearly asks how to design with CSS, which makes no sense, and Obelia's answer is a sound and logic answer– DevinCommented Dec 12, 2015 at 23:35
-
1@devin - there are times when the style is already locked in, the brand is established and mustn't be compromised. But if you have to style something, I think the preferred way is to do it with respect to the content. As for you typography example: you can do it "blind", just have rules that work well applied to any text. But you can can better results styling specific text, that is if the text (content) is known beforehand.– obeliaCommented Dec 14, 2015 at 19:08
Since there's not an established rule for this, I think this is very ambiguous, it depends on the person's developing (the layout, not coding or writing a program) style.
A few months ago at job we had a serious debate about this. Everyone has different points of view. We finished with the idea that "it depends in the way your brain works".
You can think that implementing the interface once the code is written is easier than designing the interface and next coding. But there was something in common in both ideas, and it was that first you need to make a classes diagram and a pre-design (<joke>everyone knows it will always change </joke>). So you can work in any case with "the final" product and you are counting with all the functionalities it has to have.
In my opinion, it also depends with the type of interface or program you want to create.
Here some examples:
I would first code and then implement interface:
I would first implement interface and then code:
So we can say that depending on the weight of each one you will be more comfortable to work a way or another.
Yes so go with the layout first, you can have the style in mind and it also will get influenced by similar aspects that help form the layout.
Ideally when you go to start the design/build of a website you will have the content (text, photos & brand guidelines) and desired outcomes that the website needs to achieve.
I would recommend taking in the above with the strategy of the site to start with a wireframe (pencil sketches of how the content needs to be laid out to work effectively to get the desired results) which will inform the layout.
Layout before style is good option. Layout is like a skeleton for the styling. It give very good base for styling.
Styling can be achieved vice versa but it's time consuming when we do style before layout.
-
How do you style before layout? Seriously, second time in the day I ask this question , would lovean answer because as much as I try I acn't imagine a way to style what doesn't exist– DevinCommented Dec 12, 2015 at 23:36
-
If we have the layout first ( header, navigation, sections, table, footer), it's easy to style step by step. It will be the planned work. It helps to decide the class names for the OOCSS ( object oriented CSS), so will reduce duplication of styles. Commented Dec 13, 2015 at 1:39
-
That's exactly what I'm saying, it's literally impossible to style without layout, because you would be trying to style something that doesn't exist– DevinCommented Dec 13, 2015 at 3:32
Even more important than style or layout, I would design around the content and let it dictate whether style of layout should have priority. In my past experience, I find that people try and do layout and realize that the content doesn't allow (or isn't structured) to say for example responsive design. Alternatively, people try to focus on style and find that the complexity of information means that the styling options also become too difficult to implement consistently.
So I think let the data or content make the decision for you and not the other way around.
answered Dec 14, 2015 at 1:09
