[Design] [UI Standardization] GUI template

Discussion:

May Tee-Galloway

2014-10-22 23:00:18 UTC

Team,

I will be preparing a GUI template to help the team's design process
towards a standardized interface smoother. But before I do that, I'd like
to hear what you think will be relevant and helpful to you, it helps me
prioritize what's most helpful now. I'm including some devs in the loop
with this too just to see if they have any input.

If don't know what a Graphical User Interface
<http://en.wikipedia.org/wiki/Graphical_user_interface> (GUI as in
"goooey") template is, it's a template mainly for designers while designing
products. Think of it like a sticker book where every control, list item,
text are individual stickers, and you put them together with a few given
rules like space, sizes, composition etc. So it's safe to say that I'll be
making some stickers for designers. This GUI template sticker book is
typically presented in file formats that designers usually work with, most
popularly Illustrator .ai, Sketch .sketch, and Photoshop .psd files. But
I'll be starting with either a .sketch or a .ai file.

--

Here are some examples:

Apple's GUI <http://www.teehanlax.com/tools/ipad/#>
Android's old version GUI
<http://developer.android.com/design/downloads/index.html>
Google's Material Design GUI
<http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components>

--

This etherpad has a few ideas listed <http://etherpad.wikimedia.org/p/GUI>.
I hope to help us all look and feel like one product soon and make
everyone's life as easy as possible while getting there. Let me know how
this can be integrated into your work better.

Please respond at etherpad <http://etherpad.wikimedia.org/p/GUI> by EOD
October 31st.

May

Pau Giner

2014-10-23 08:30:47 UTC

Permalink

Thanks May, this is great. I added some specifics to the etherpad.

Regarding formats, in addition to Illustrator (which I currently use the
most) or Sketch (which I'm willing to use if they fixed the scaling issues
Sketch 2 had), I think we need to add SVG as one of the formats to export.
The community would appreciate the templates to be usable on an open
format, and it would help the users of whichever tool is not used as the
first choice to have something to work with (both AI and Sketch support
exporting and importing SVGs although some information may get lost in the
way sometimes).

Pau

Post by May Tee-Galloway
Team,
I will be preparing a GUI template to help the team's design process
towards a standardized interface smoother. But before I do that, I'd like
to hear what you think will be relevant and helpful to you, it helps me
prioritize what's most helpful now. I'm including some devs in the loop
with this too just to see if they have any input.
If don't know what a Graphical User Interface
<http://en.wikipedia.org/wiki/Graphical_user_interface> (GUI as in
"goooey") template is, it's a template mainly for designers while designing
products. Think of it like a sticker book where every control, list item,
text are individual stickers, and you put them together with a few given
rules like space, sizes, composition etc. So it's safe to say that I'll be
making some stickers for designers. This GUI template sticker book is
typically presented in file formats that designers usually work with, most
popularly Illustrator .ai, Sketch .sketch, and Photoshop .psd files. But
I'll be starting with either a .sketch or a .ai file.
--
Apple's GUI <http://www.teehanlax.com/tools/ipad/#>
Android's old version GUI
<http://developer.android.com/design/downloads/index.html>
Google's Material Design GUI
<http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components>
--
This etherpad has a few ideas listed <http://etherpad.wikimedia.org/p/GUI>.
I hope to help us all look and feel like one product soon and make
everyone's life as easy as possible while getting there. Let me know how
this can be integrated into your work better.
Please respond at etherpad <http://etherpad.wikimedia.org/p/GUI> by EOD
October 31st.
May
_______________________________________________
Design mailing list
https://lists.wikimedia.org/mailman/listinfo/design

--
Pau Giner
Interaction Designer
Wikimedia Foundation

May Tee-Galloway

2014-10-23 19:11:14 UTC

Permalink

I think it's most likely going to start with an .svg if we use Illustrator.
I haven't exported/imported .svg with much success on Sketch though. I
added a section at the top so you guys can vote for your software of
preference.

mm

Post by Pau Giner
Thanks May, this is great. I added some specifics to the etherpad.
Regarding formats, in addition to Illustrator (which I currently use the
most) or Sketch (which I'm willing to use if they fixed the scaling issues
Sketch 2 had), I think we need to add SVG as one of the formats to export.
The community would appreciate the templates to be usable on an open
format, and it would help the users of whichever tool is not used as the
first choice to have something to work with (both AI and Sketch support
exporting and importing SVGs although some information may get lost in the
way sometimes).
Pau

Post by May Tee-Galloway
Team,
I will be preparing a GUI template to help the team's design process
towards a standardized interface smoother. But before I do that, I'd like
to hear what you think will be relevant and helpful to you, it helps me
prioritize what's most helpful now. I'm including some devs in the loop
with this too just to see if they have any input.
If don't know what a Graphical User Interface
<http://en.wikipedia.org/wiki/Graphical_user_interface> (GUI as in
"goooey") template is, it's a template mainly for designers while designing
products. Think of it like a sticker book where every control, list item,
text are individual stickers, and you put them together with a few given
rules like space, sizes, composition etc. So it's safe to say that I'll be
making some stickers for designers. This GUI template sticker book is
typically presented in file formats that designers usually work with, most
popularly Illustrator .ai, Sketch .sketch, and Photoshop .psd files. But
I'll be starting with either a .sketch or a .ai file.
--
Apple's GUI <http://www.teehanlax.com/tools/ipad/#>
Android's old version GUI
<http://developer.android.com/design/downloads/index.html>
Google's Material Design GUI
<http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components>
--
This etherpad has a few ideas listed
<http://etherpad.wikimedia.org/p/GUI>. I hope to help us all look and
feel like one product soon and make everyone's life as easy as possible
while getting there. Let me know how this can be integrated into your work
better.
Please respond at etherpad <http://etherpad.wikimedia.org/p/GUI> by EOD
October 31st.
May
_______________________________________________
Design mailing list
https://lists.wikimedia.org/mailman/listinfo/design

--
Pau Giner
Interaction Designer
Wikimedia Foundation
_______________________________________________
Design mailing list
https://lists.wikimedia.org/mailman/listinfo/design

Jared Zimmerman

2014-10-28 23:21:01 UTC

Permalink

Reminder, please add your feedback to this before friday, thanks!

*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation

May Tee-Galloway

2014-10-30 23:56:19 UTC

Permalink

Friendly bump. :-)

etherpad.wikimedia.org/p/GUI

On Tue, Oct 28, 2014 at 4:21 PM, Jared Zimmerman <

Post by Jared Zimmerman
Reminder, please add your feedback to this before friday, thanks!
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation

Post by May Tee-Galloway
Team,
I will be preparing a GUI template to help the team's design process
towards a standardized interface smoother. But before I do that, I'd like
to hear what you think will be relevant and helpful to you, it helps me
prioritize what's most helpful now. I'm including some devs in the loop
with this too just to see if they have any input.
If don't know what a Graphical User Interface
<http://en.wikipedia.org/wiki/Graphical_user_interface> (GUI as in
"goooey") template is, it's a template mainly for designers while designing
products. Think of it like a sticker book where every control, list item,
text are individual stickers, and you put them together with a few given
rules like space, sizes, composition etc. So it's safe to say that I'll be
making some stickers for designers. This GUI template sticker book is
typically presented in file formats that designers usually work with, most
popularly Illustrator .ai, Sketch .sketch, and Photoshop .psd files. But
I'll be starting with either a .sketch or a .ai file.
--
Apple's GUI <http://www.teehanlax.com/tools/ipad/#>
Android's old version GUI
<http://developer.android.com/design/downloads/index.html>
Google's Material Design GUI
<http://www.google.com/design/spec/resources/sticker-sheets.html#sticker-sheets-components>
--
This etherpad has a few ideas listed
<http://etherpad.wikimedia.org/p/GUI>. I hope to help us all look and
feel like one product soon and make everyone's life as easy as possible
while getting there. Let me know how this can be integrated into your work
better.
Please respond at etherpad <http://etherpad.wikimedia.org/p/GUI> by EOD
October 31st.
May
_______________________________________________
Design mailing list
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
https://lists.wikimedia.org/mailman/listinfo/design