[wp-design] Second Draft

[Khaled Abou Alfa]

Okay took me a while but got there in the end. Just wanted to say that 
Joen's done such a fantastic job of bringing all our initial ideas 
together into something really tight. First I'll talk about what I liked.

I love the cross-hair increase decrease button.
I'm agreeing with putting all the items on the right hand side, and I 
like which ones you've chosen to put there as well.
I like Joen's switching of the website name and the wp logo.
I know the borders were a hot topic, I like them as they are, however I 
will say that one of my favourite graphics in there is the little white 
border that has a 1px gap and goes all the way around the text input 
field.Would it be an idea to have this thin white border go all the way 
around the actual text input fields?

My versions can be found here:

www.brokenkode.com/shuttledev/v4.jpg

www.brokenkode.com/shuttledev/v4.psd

Here's a list of what I changed and my reasoning behind them:

   1. I removed the actual white background around the entire post area.
      I really like the application feel that it has without the
      addition of the white area. It makes it less of a website.
   2. I moved the entire post area and aligned it to the left. I think
      that's where it should stick, and only increase as a maximum to
      what we've currently got. I don't think it should be floating in
      the middle of the page as it currently does. I guess we should be
      using the real estate more properly?
   3. I've removed the help links for a couple of the field, which I
      thought were a bit un-necessary. Specifically the 'Title', and
      'Post Status'
   4. In the list on the right hand side, I've added a border and a
      separator line underneath that. The line has got a dark grey and
      then a white 1px line underneath it. I know very application
      looking, but I think it works in the style without the white
      border. One of the reasons for this is because there didn't seem
      to be a clear separation between the items in the list. I also
      increased the spacing between them
   5. It's very subtle and if you blink you'll miss it but underneath
      the tab navigation I've added a very thin 1px white line under the
      black line. I've got to admit that I need to think about the top
      nav bar a bit more. I'm still thinking about this, so I don't have
      any concrete ideas as such...yet
   6. I've aligned the save and publish buttons on the side of the text
      input box.
   7. I've added a light grey box on the footer, and moved the wordpress
      1.5 and support forum link to the right hand side, to align with
      the end of the actual list. This I did simply because I was
      experimenting. I liked it so I kept it in there. It doesn't work
      with the header, which is why I'm thinking about how to go about
      that, especially since it's got a white 1px border at the top,
      which makes it slightly softer.
   8. Retweaked the advanced section. I wasn't sure how you were
      proposing on tackling this one Joen, so I just opened it up a bit.
      Not ideal I'll be the first to admit that but I was trying to get
      the ideas across so that we can build on that. I tried putting a
      red border around that, but it didn't look correct to be honest.

Final point just want to say that this is all a brilliant experience. 
I'm loving seeing the progression as we bat this thing between us. You 
can see how all the designs are meshing into one another and becoming so 
much more solid, slowly but surely. I'm going to be tackling the header 
next until Michael does his tweaking on the main body :), then it all 
starts again :).






> Right, I managed to throw together a new draft, based on some things I 
> wanted to communicate visually, and some ideas Michaels and Khaleds 
> awesome sketches showed.
>
> First, some feedback though, so as to not spam too much.
>
> Matthew Mullenweg wrote:
>
>> That's a very good point, even if we nail something revolutionary and 
>> exciting to us, we probably want to deploy it over a few version help 
>> people gradually adjust and also see how it's working in the Real World.
>
>
> A soft rollout. That's a good idea. We'd also be able to do some 
> hotfixes if we make some huge blunder.
>
>> I'm only speaking from what I've observed, and I've watched a lot of 
>> people use WordPress for the first time. I don't really want a dark 
>> border, but I think some gentle styling could give a more usable, 
>> unified, and consistent user experience. If we start to put marching 
>> ants around the active box, please stop us, but I don't think we 
>> should pre-emptively cut off any experimentation on this front.
>
>
> I see where you're coming from, and I'm all for experimentation and 
> seeing how things would work. The reason I mentioned it is so we might 
> save some time. When I heard "1px dark border" some alarm bells 
> immediately rang. I've _made_ these mistakes before. Sometimes it's 
> okay to style websites, but not for admin interfaces like these. With 
> that said, I'm pretty sure I've made myself clear now, so I'll shut my 
> piehole. Plus, I realise it's quite possible that Michael or Khaled 
> can style the input boxes in a way that puts all these comments to shame.
>
>> Also on the subject of the input box I really liked what Chris D did
>> on his mock up which was have this oval offset thing rather than a
>> square box. It was smaller and tighter.
>>  
>>
> Did I miss anything here? I haven't seen Chris' mockup?
>
> Now for my sketch:
>
> http://www.noscope.com/dump/v2.jpg
>
> http://www.noscope.com/dump/v2.zip
>
> As you can see, it's heavily building on both Mike's and Khaleds nice 
> drafts. I wanted to extend some of my ideas, including collapsing, etc.
>
> * Moved logo to the top right.
>
> * I kept the box around the whole post. This is not something I'm 
> married to, but I like it, especially for when we'll add a preview. 
> That way we can keep the post editing completely separate from the 
> preview. I also tinted it light gray.
>
> * Widened title box, just like Michael did. This is a good idea: a 
> wide input box encourages people to write.
>
> * I havent' changed any text sizes, it would take too much time. Rest 
> assured that I completely accept and expect a larger font when we go CSS.
>
> * The "quicktags" panel is modelled after Word. It is below the "Post 
> Body" title, but above the text area, similar to Word (or other text 
> apps). It is left aligned, because IMHO things just die when they get 
> centered. Furthermore, I could expect this to be a problem with a 
> liquid design.
>
> * Removed the "save and continue editing" button, for the same reasons 
> as Michael.
>
> * I moved many things to a "sidebar" to the right. I did this because 
> it is somewhat secondary to the contents of the post. To separate 
> these two I added a small dotline.
>
> * Collapsable menus. Instead of reinventing the spoon with regards to 
> how things collapse, I simply re-ised a metaphor that is well 
> established on the Windows platform. The plus. When you click the 
> plus, something expands, and it turns into a minus. When the minus is 
> clicked, this collapses. The strenght of using this plus/minus, is 
> that people know what it does, almost by heart. It is not "something 
> new to learn". On a sidenote: I know we have some Mac people among us. 
> As I recall, mac people have a small blueish arrow that rotates down 
> when clicked? I could go for such one as well.
>
> * The sidebar is now wider than the categories made it before. The 
> extra space makes it lighter, and allows for both "Post Password" and 
> "Post slug" to be located there.
>
> * I have moved "Timestamp" and "Post Author" to the sidebar, but they 
> are collapsed by default. I mentioned this when looking at Michaels 
> sketch. If a user wants to change the time of a post, he/she shouldn't 
> have to look through the advanced options.
>
> * The same logic applies to the "advanced" section I've added in the 
> bottom. As you can see, all contens are immediately visible under the 
> "advanced" title, and there's no doubt what you can do there.
>
>