Re: [web2py] What to tell designers when they create a mockup for my web2py site
Were you using Balsamiq in some of those examples? And did you use anything to generate the html from your mockups? Mike
Re: [web2py] What to tell designers when they create a mockup for my web2py site
This is great advice and examples -- you should make this a slice. :)
Anthony
On Friday, March 11, 2011 11:05:40 PM UTC-5, rochacbruno wrote:
> I work in partnership with a designer in blouweb.com so I have some
> experience in this subject, and I tested variety of work models.
>
> *Some things I learned:*
> 1. The front-end guy have to be master in Images, HTML, CSS &
> JavaScript/Jquery so DONT EXPECT THE DESIGNER TO LEARN PYTHON or WEB2PY
> 2. Dont expect that the Designer will work very well with web2py generated
> forms, always work with pure HTML forms if you want to work with a designer
> 3. EXPLICIT is Better, HTML code has to be in view, try to minimize
> generated HTML by functions
> 4. Choose natural names to your own generators i.e:
> {{=get_list_of_persons(params)}} is better for designer than {{for person in
> persons: #do something}}
>
> *Advices/instructions*
> 1. take care to the name and id of the elements
> 2. choose a nice DIV structure
> 3. before start coding choose how you want to deal with forms (generated or
> pure HTML)
> 4. Use web2py_components
> 5. Always keep CSS in a separated file (but sometimes you will need to
> generate CSS dinamicaly)
>
>
> In my case I always draw the mockup, so I pass and idea to the front-end
> designer, but sometimes the designer gives me some HTML and I include
> {{=python}} inside and split in to components and views.
>
> *The better workflow we found:*
>
> 1. I create the mockup
> 2. The front-end guy create it in Image Editor and we validate
> 3. We define the structure regions, divs, IDs
> 4. I develop the program, functions, services, helpers and views
> 4. The front-end guy transform IMage in to HTML/CSS/JS
>
> Note the 4th step is done together.
>
> *How do we do that?* using a dropbox shared folder for the project, dont
> expect the designer to know how to use git/bucket
>
> I want to share some examples:
>
> *## web2py.com*
> I created this mockup (in poor image editor) http://min.us/lmmXzW
> The designer drawed this layout (in professional image editor)
> http://min.us/lmmRb8
> Designer created basic HTML for the layout:
> http://3.latest.web2pysite.appspot.com/examples
> We worked together in evolution of the concept:
> http://4.latest.web2pysite.appspot.com/examples [5,6,7,8,9,10]
>
> So we finished with http://web2py.com
>
>
> *## A restaurant website (work in progress)*
> I created this in a poor image editor: http://min.us/ljWk14 and this:
> http://min.us/lmrsaq
> Designer drawed this: http://min.us/lmrQgu
> and we developed this together: http://serafimnatural.com.br (note the
> image uploader, and image gallery)
>
> In this project we used web2py_components, so I developed components
> without styles as you can see for example in
> http://serafimnatural.com.br/principala and
> http://serafimnatural.com.br/principalb ,
> http://serafimnatural.com.br/galeriaflickr and others.
>
> So we user {{=LOAD()}} to put it all together in index page and then he
> designed just that page.
>
> ## System
> We are now working on a large project using the same approach, but with a
> larger team and it is a very bigger project so the approach is a little
> differente but even simple.
>
> Example:
> I created an annotated mockup: http://min.us/lmn32a (components defined)
> Designer created the respective layout: http://min.us/lmrJIa
> In few weeks we are going to release the beta version:
> http://dl.dropbox.com/u/11469395/SiteCadastro/index.html
>
>
> *Conclusion*
>
> web2py, Python and template render is for programmers, if you have to give
> anything to your designer it have to be paths, structures and minimal inline
> template functions as {{=get_something(params)}}
>
> I dont think there is any other template language that is more easily
> integrated with designet work, I worked with Mako and Jinja in Pylons and it
> is terrible for designers too. I think pure Python template engine is better
> for this, you just need to create an API and components and give docs and
> paths to the designer.
>
> --
> Bruno Rocha
> [ About me: http://zerp.ly/rochacbruno ]
>
>
>
> 2011/3/11 PlanetUnknown
>
>> My goal is to bring an idea to fruition in the fastest way, but I want
>> to use python.
>> Also, I'm not a designer, hence want to get a professional to design
>> the sites.
>>
>> Here are the two questions -
>> 1.) What steps should I take so the layout developed by the designer
>> are easiest to integrate into the Web2Py code ?
>> i.e. instructions I can give to him.
>>
>> 2.) If there are other python frameworks which do this, please suggest
>> those.
>>
>> Something about the site I'm building -
>> 1.) About 25 tables (models)
>> 2.) Uses javascript extensively for manipulating web-pages
>> 3.) Interacts with only one kind of DB - PostgreSQL
>> 4.) It will have atleast 4 main links from the home page, each having
>> about 5 usecases(read child pages) and these 20 pages are interlinked
>> in some scenarios.
>>
>> Than
Re: [web2py] What to tell designers when they create a mockup for my web2py site
I forgot to mention that you can take any of the layouts in web2py.com/layouts and use it as an example, the design guy can follow this structure to develop your own layout.html -- Bruno Rocha [ About me: http://zerp.ly/rochacbruno ]
Re: [web2py] What to tell designers when they create a mockup for my web2py site
I work in partnership with a designer in blouweb.com so I have some
experience in this subject, and I tested variety of work models.
*Some things I learned:*
1. The front-end guy have to be master in Images, HTML, CSS &
JavaScript/Jquery so DONT EXPECT THE DESIGNER TO LEARN PYTHON or WEB2PY
2. Dont expect that the Designer will work very well with web2py generated
forms, always work with pure HTML forms if you want to work with a designer
3. EXPLICIT is Better, HTML code has to be in view, try to minimize
generated HTML by functions
4. Choose natural names to your own generators i.e:
{{=get_list_of_persons(params)}} is better for designer than {{for person in
persons: #do something}}
*Advices/instructions*
1. take care to the name and id of the elements
2. choose a nice DIV structure
3. before start coding choose how you want to deal with forms (generated or
pure HTML)
4. Use web2py_components
5. Always keep CSS in a separated file (but sometimes you will need to
generate CSS dinamicaly)
In my case I always draw the mockup, so I pass and idea to the front-end
designer, but sometimes the designer gives me some HTML and I include
{{=python}} inside and split in to components and views.
*The better workflow we found:*
1. I create the mockup
2. The front-end guy create it in Image Editor and we validate
3. We define the structure regions, divs, IDs
4. I develop the program, functions, services, helpers and views
4. The front-end guy transform IMage in to HTML/CSS/JS
Note the 4th step is done together.
*How do we do that?* using a dropbox shared folder for the project, dont
expect the designer to know how to use git/bucket
I want to share some examples:
*## web2py.com*
I created this mockup (in poor image editor) http://min.us/lmmXzW
The designer drawed this layout (in professional image editor)
http://min.us/lmmRb8
Designer created basic HTML for the layout:
http://3.latest.web2pysite.appspot.com/examples
We worked together in evolution of the concept:
http://4.latest.web2pysite.appspot.com/examples [5,6,7,8,9,10]
So we finished with http://web2py.com
*## A restaurant website (work in progress)*
I created this in a poor image editor: http://min.us/ljWk14 and this:
http://min.us/lmrsaq
Designer drawed this: http://min.us/lmrQgu
and we developed this together: http://serafimnatural.com.br (note the image
uploader, and image gallery)
In this project we used web2py_components, so I developed components without
styles as you can see for example in http://serafimnatural.com.br/principala
and http://serafimnatural.com.br/principalb ,
http://serafimnatural.com.br/galeriaflickr and others.
So we user {{=LOAD()}} to put it all together in index page and then he
designed just that page.
## System
We are now working on a large project using the same approach, but with a
larger team and it is a very bigger project so the approach is a little
differente but even simple.
Example:
I created an annotated mockup: http://min.us/lmn32a (components defined)
Designer created the respective layout: http://min.us/lmrJIa
In few weeks we are going to release the beta version:
http://dl.dropbox.com/u/11469395/SiteCadastro/index.html
*Conclusion*
web2py, Python and template render is for programmers, if you have to give
anything to your designer it have to be paths, structures and minimal inline
template functions as {{=get_something(params)}}
I dont think there is any other template language that is more easily
integrated with designet work, I worked with Mako and Jinja in Pylons and it
is terrible for designers too. I think pure Python template engine is better
for this, you just need to create an API and components and give docs and
paths to the designer.
--
Bruno Rocha
[ About me: http://zerp.ly/rochacbruno ]
2011/3/11 PlanetUnknown
> My goal is to bring an idea to fruition in the fastest way, but I want
> to use python.
> Also, I'm not a designer, hence want to get a professional to design
> the sites.
>
> Here are the two questions -
> 1.) What steps should I take so the layout developed by the designer
> are easiest to integrate into the Web2Py code ?
> i.e. instructions I can give to him.
>
> 2.) If there are other python frameworks which do this, please suggest
> those.
>
> Something about the site I'm building -
> 1.) About 25 tables (models)
> 2.) Uses javascript extensively for manipulating web-pages
> 3.) Interacts with only one kind of DB - PostgreSQL
> 4.) It will have atleast 4 main links from the home page, each having
> about 5 usecases(read child pages) and these 20 pages are interlinked
> in some scenarios.
>
> Thanks !
[web2py] What to tell designers when they create a mockup for my web2py site
My goal is to bring an idea to fruition in the fastest way, but I want to use python. Also, I'm not a designer, hence want to get a professional to design the sites. Here are the two questions - 1.) What steps should I take so the layout developed by the designer are easiest to integrate into the Web2Py code ? i.e. instructions I can give to him. 2.) If there are other python frameworks which do this, please suggest those. Something about the site I'm building - 1.) About 25 tables (models) 2.) Uses javascript extensively for manipulating web-pages 3.) Interacts with only one kind of DB - PostgreSQL 4.) It will have atleast 4 main links from the home page, each having about 5 usecases(read child pages) and these 20 pages are interlinked in some scenarios. Thanks !
