I would like to ask a question about the design principles of the components listed in MUI.
I find the MUI components very useful, especially “Data Grid” which seems to cover a great variety of use cases.
So wanted to ask if these components are created based on a design principle?
I would really appreciate if you can tell me anything about what design principles you use for components. especially from an implementation point of view.
If you're looking for design principles behind the Material UI library, they come from Google Material Design
If you're looking for more 'how do I pick which component to use from this large library for my use case?' then it comes from experience.
If you were designing and implementing a button, you could use:
ButtonBase component: Comes with no styles so you can add your own from scratch.
Button component: The standard out of the box component that uses your default primary theme.
IconButton: If you have an action that needs no text to describe, I'd reach for a simple icon button e.g. download or save have very recognizable icons
Related
I've been trying to figure out a good Flutter process workflow for designer and developer interactions in order to iterate desktop/mobile/web application design. There isn't a very clear line of demarcation between the code and the design as there is in web dev. (for example, the developer would be focused on javascript and a little html, while the designer would be focused on the css and html.)
Some of this has been written about here: how developers and designers can collaborate using flutter
but the mechanics have been left out. (also, it seems like the average flutter designer needs to be more tech-savvy with git skills than designers of yore. Is this your experience?)
While there does seem to be good control of color/fonts/styles with the AppTheme widget, other design aspects are more difficult to enact. For example, if you wanted to change all of the div's (in html) / Containers() (in flutter) from square corners to rounded, you could set a class and apply it across the board in web dev. In flutter, I believe you have to visit every Container in the code and apply a BoxDecoration widget... and repeat if there are changes in the future.
Specifically, what design-dev processes/architectures are you using to facilitate design iterations between devs and designers?
Note: Additionally, I've seen that there are some tools like Adobe XD, and supernova.io that allow for design exporting to flutter code, however that seems like a one-time thing... and doesn't lend itself to well to iteration. Has anyone used this method in their design iterations?
After experimenting with a couple of different methods, it seems like the export features of different programs aren't far along enough to allow anything but the "mockup method" where the designer basically gives the flutter programmer access to some kind of mockup (axshare, adobeXD, zeplin, etc.)
HOWEVER, I did have the most success with exports using sketch -> SuperNova, but this required a tech-saavy designer that was able to probably classify all of the components such as buttons, etc, as well as create designs with responsiveness in mind. Otherwise the export is filled with absolute positioning, which makes the flutter coders job difficult since they need to correct all of those exported widgets and make them responsive.
I understand from threads in this forum and the Google GWT forum that in the GWT world you typically load just a single page and then what appears to a user to be a different page is just the same page with it's content being updated by user actions. A lot of posts imply that you develop your app as you would a desktop application. That sounds easy if you have done desktop development but I am coming from a pure Web services/ Servlets/ Struts background and want to see a very basic example that shows the proper way to implement a GWT app where you show a user a txt box and button and when they click the button, the view is replaced with 2 different components.
There are plenty of basic apps I have done and plenty of complex multipage type ones but I just one that takes me past the click a button to see a message type app to the next level.
Any links to such an example would be welcome
I recommend to study Activities & Places design pattern. It is the best approach, in my view, for large applications with multiple views. It provides a lot of important functionality "out of the box", like browser history management, support for tokens, efficient memory management, etc.
You may want to look into the Model-View-Presenter pattern (MVP). Using this pattern correctly will greatly decouple your application, allowing you to create views that are not only highly modular and disposable, but are very easy to swap out and change.
In fact, Google fully recommends the MVP pattern when developing GWT applications. They provide a full example and walkthrough of a MVP GWT application here, which I imagine is based off of a Google I/O presentation given on best GWT application architecture practices back in 2009.
I've been following this pattern with my latest GWT project and it's working out extremely well. It's very easy to add, remove and swap views.
I appreciate this may be a case of running before I can walk and that discussions are occasionally frowned upon, as opposed to questions
However, I am new to Silverlight and I am keen to not get into bad habits!
As this is more of a general advice typs post, I will mark the most useful information, or link as the answer
I am writing a dashboard. However, I want the areas of the dashvoard to be reusable, basically widgets. Can anyone suggest some good example sites for advice on the best way to do widgets in Silverlight, or any advice in terms of what to beware of etc?
Its the same kind of approach as creating a user control in .NET or, creating a form in Delphi which is then docked into several different screens of an application
The dashboard will need to be customizable by the user, i.e. they see a series of widgets which they can setup then add to the dashboard. Pretty much in the same way as Google Anaytics works
Paul
The quick and dirty approach I would take:
Create a silverlight Control for each widget (could be reused on other Views)
Place them all in a stack panel
Bind the visibility of each Control to a checkbox on an options tab
The not-so-MVVM approach I might consider:
Create a silverlight Control for each widget
Add them to the stack panel from code behind
Open source goodness:
Note that you wont be able to control the order in this type of scenario, but the user will have the option of viewing what widgets they want to see.
If you want to take more of an MDI approach, Tim Heuer has an interesting project on codeplex: Silverlight FloatableWindow which gives you a resizeable child window type of thing.
The expensive approach I don't recommend:
Telerik and ComponentOne have some pretty advanced dashboard features if you don't feel like rolling your own.
I have an application developed using GWT and GXT. Most of my screens are like search or detail kind of pages.
Now i am adding some more functionalities with that. In that i require some nice representation with images, arrows, links, models. I finding its very complex to do it in GXT.
Is there any other libraries or frameworks to do this?
That supposed to be easily integrated with GWT/GXT without much effort.
Please help me out on this.
Thank you in advance.
Is there any specific reason why you do not want to venture the CSS route and are looking for libraries? I mean, if you are good with CSS then you can start with plain GWT stripped-off of all its defualt CSS and incorporate your design ground up. That is the perhaps the best (only?) way to design your web-app once you have your Photoshop mock-up ready.
You may ofcourse depend on libraries, which come with their own CSS, but your web-application will look no different from the next app designed with the same library.
I typically work on web apps that will only be used by a small group of well-controlled people, but now find that I'm writing something that has the potential to be used by a very large population. This means that the design and "look" will be very important to the success.
While I can certainly code up something functional, it ain't gonna look pretty, so I know that I'll need to get an outside designer to make things look good. Never having worked that way before I had a few questions about the mechanics of how this happens and how to try to make things easier.
We do Java, so when building a rich interface, we use GWT. I know that when working with designers, they typically provide images of what the interface should look like without any type of "useable" output. My question is how best to bridge that gap between a simple drawing of an interface to a fully functional realized one.
Any thoughts are appreciated.
Well, "it depends", as always.
Nowadays, I don't think you can work wit someone who simply provides PhotoShop mockups. At least not at your level. Mockups are simply too static, and translating those mockups to actual pages that actually work with different browsers properly is a skill set all its own.
So, you need someone beyond simply a designer, especially if you are planning any javascript wizardry, animations, or other dynamic elements that don't capture at all well on a static image.
What you really want is an "operational" mockup. Static HTML files that look and behave as best as can be done to what the UI designer wants to do, including transitions, work flow, etc. This artifact can be run through all of the stake holders as a live mockup, letting folks "Feel" the site.
Once you have these HTML files, you can then do your part of backfilling these pages with actual server side content. Obviously you can start early working on models and working with the designers so as to have services ready to support the site functionality, but you shouldn't be committing any real time in to actual pages for the site.
As for interacting with the designers, I talk more about that over here: How can I make my JSP project easier for a designer to work with
I worked on a project very much like this. We had "comps" which were pictures of what the interface would look like. We identified common objects and build modules. Then built pages (this was for a web app) from modules plus any elements that were unique to that "comp".
A couple things to keep in mind that will make life much easier: use the comps/drawings as more of a recommendation rather than set in stone design. Try to identify common pieces early on and reuse code.
Also, designers aren't user experience gods. They often have a good idea of how things should work, but if you are close to your product and have a lot of product knowledge, don't be afraid to tweak the design as you and your group see fit. One thing that designers typically lack is product knowledge. They know a lot about general user experience and how a site should work, but they often won't know the in's and out's of your use cases and products.
If you are working with GWT, you should look for designers who are expert in CSS. Apart from, may be, the main layout of the website, all the application components like form fields, dialogs, tabs and grids etc. will need to be styled using CSS.
If the designers are not experienced in working with GWT, share the GWT's documentation about styling with them. It's a good idea to read these yourself as well. Specifically explore the GWT's theme-ing system.
Also try to make use of UiBinder as much as possible. This would allow you to stay as close to traditional HTML based design while still enjoying the GWT high level object oriented interfaces (both widgets and DOM).
Optionally you might want to tell the designers that GWT image bundles will automatically do "CSS Sprites" so they don't need to worry about page load performance issues related to images.