I am designing the user interface of a web application but I am inexperienced with UI Design, I just drag and drop labels and textboxes, but they look not symetric and properly arranged on the page. In a windows application, user interface design is easier since the visual stuido helps you with location of controls, but I don't know how to do that in a web application. Is the only solution entering the html and using lots of space characters for the page to look well organised ? This just makes me feel like an amateur.
Web apps are styled using CSS (Cascading Style Sheets). CSS is used for every aspect of UI in web apps. This is not limited to just ASP.NET, but to web development in general.
ASP.NET, and Visual Studio (or other IDEs) may allow you a familiar drag-and-drop interface for creating the UI, but under the hood, ASP.NET and these tools simply generate css for styling.
For example, in Visual Studio 2010, you can select "Change positioning to absolute for controls added using Tooldbox, paste, or drag and drop." in the HTML Designer Options
You can use these tool to drag and drop elements if you like, but I strongly recommend against even starting down that road for several reasons:
Unless you understand css, you will struggle with otherwise simple positioning and styling issues. The drag/drop tools and properties exposed are often not sufficient.
Web design is vastly different thatn WinForms design. You need to deal with many more screen resolutions, and browser resizes, which need to be fluid. Absolute positioning is horrible for this.
Once you learn the wrong way, it's very hard to change your ways. It's better to learn the "right way" up front.
There's a relatively simple CSS tutorial here.
I'm sorry there isn't a quick and easy answer,but if you're going to do web development at all, you need to learn to use css properly, and there's quite a bit to learn. Hopefully this tutorial will be a gentle introduction.
If you don't like that one, try this Bing search.
Related
I am trying to learn ASP.NET (C#) and the biggest struggle I am having is the design aspects of it. I have primarily been a windows form designer. All of the projects I have worked on have used windows forms and it was much more intuitive and cleaner to design in than HTML/CSS. I am trying to learn how to design web pages, but it seems all "design" needs to be done in CSS. How do you design something you don't see and just use pixels and references to other objects? I don't see how you design anything that way.
What is the best way for me to be able to effectively design for websites using CSS and ASP.NET coming from a more visual approach of windows forms? I have read 3 books on ASP.NET and it makes sense but all of the design is done is source views and CSS sheets. Is there another method or approach I should be aware of? I am using VS 2015 BTW as my IDE.
Please and thanks
CSS and HTML are the building blocks of the Web. Like you, I used to struggle moving from the Drag and Drop world of VS 2003 after initially starting out with just Netscape and Notepad in college. Drag and Drop, like Web Forms, is an unhealthy layer of abstraction in that it removes us from a true understanding of how the Web works.
Just accept that this is the nature of things and stop fighting it. Back in the days of VS 2003, our team would set up VS so as to never default to the designer panel when starting or opening projects. Besides, the tool was totally undependable and created a tangled Frontpage-style mess of so-called HTML.
Make the switch to pure, semantic markup and CSS. Download a good template from a site like Creative Market (I usually search using "Bootstrap 3") to learn from. Study HTML5, CSS3 and RWD (Responsive Web Design) and let yourself have some fun. Yes, it really CAN be fun.
Work by switching from your IDE to the browser and back again.
I am more of a server side programmer so bear with me on this. How exactly are user interfaces for websites designed? I mean which tools are usually used? Lets say for example, stackoverflow.com which has lot of dynamic content. How are the various areas designed? I am pretty sure its not in Visual studio. Probably the server side code is in asp.net but what about the actual UI? (layout, images, tables, buttons etc)
What is the usual workflow for an activity like this? Say, I have a design on paper. Where do I go from there? How do you wire in the code after the interface design is complete?
How do you handle the fact that in a page, some of the stuff is static and some areas are dynamic? (like the ask question page I am on now)
As you said, It boils down to the requirement of the webpage.
For a professional (fairly big) website, many teams are involved for example, creative team to do the paper work and design of UI elements and controls, graphics team to actually design images, UI Developers for placing the contents appropriately and CSS, architects to decide on performance for various items (and taking a call on static/dynamic nature of controls)
Generally designers use some external tools for designing HTML pages to provide templates and same can be used later in visual studio to make actual pages. There are many such tools available in the market such as Dreamweaver There are many freeware also available in the market for designing client and CSS rich websites. You can search on Google for these.
If your website requirement is not very client rich, you can still design using visual studio or use new Microsoft product Webmatrix which gives you user friendly tools to make a website look fabulous.
The paper design is the first correct step.
How to continue:
You can get the 960 grid system from http://960.gs/ and start from this one. Its a nice trick that have ready to use css templates that you can build on them your design.
The image effects:
The shadow and borders and other thinks that you ask is usually make on Photoshop, but now the new browsers support many of them using css. For example: http://css-tricks.com/snippets/css/css-box-shadow/
Software that can help on design:
- MS Expression
- DreamWeaver
On most projects I've been one, designers has produced HTML code, then developers turned it into ASP.NET, including master-pages etc that should really be a part of design.
After it has become ASP.NET, designers could not work on the code with their tools.
I know that a lot of the design of ASP.NET is made with the purpose of separating code and design, and in principle designers should be able to work on design aspects with the Visual Web Developer, but I've never seen a designer using VWD.
How is cooperation done in practice, and what is about the best one can expect from a designer?
From someone who does both:
Most of the design should be done with CSS, so this isn't a problem.
The layout of the page, therefore, comes down to elements with IDs and classes (simplistically speaking).
I try to keep these IDs and classes as is, and place ContentPlaceHolders inside them as needed, when possible, and create controls or skins with the right classes.
Optimally, designers and programmers should work together, and know each others limitations and requirements (this cannot always be done, sometimes these are done by different companies). I think most of the responsibility here lies on the developers - they need the right controls to get the expected output.
Frankly, a web designer should care about HTML and CSS, not about what server-side technology is used to deliver them. The best I would expect from a web designer is to write flexible CSS, that can take a view changes to the HTML structure without breaking (that is - extra divs or tables, as ASP.NET tends to do).
A good ASP.NET developer will intelligently use the set of controls available. For example, in most cases, the ListView will do everything the GridView can, and produce clean, SEO-friendly markup.
In the ASP.NET environment, I would encourage the use of Expression by designers. Business owners can avail of the new deal from Microsoft and obtain VS, Expression, etc., for $100 for three years.
I think both developers and designers have to embrace each others world for anything to work.
We are still stuck with the old fashioned way of the designer producing PSD documents and hopefully rendering them into HTML.
Then we take them over and convert them to .Net, then the designer requests a change and we go in circles for a while before coming to an acceptable solution.
It would be nice if the designer could integrate into the HTML of .Net easier but I don't see that happening for a while, not while Microsoft advocates using scripting in your development..
I've found that using ASP.NET MVC will make the designer's job much easier. Especially if you stay away from using things like HTML.RenderImage, and instead place an IMG tag on the page with <%= ViewData["MyImage"] %> as the src. This will allow the designer to see the html they like and understand, while giving you the flexibility to set the source(which is all the developer should be doing). The goal being to stay away from ASP.NET controls, which would confuse a designer, while still keeping their flexibility to develop quickly.
I am a c# developer.
Recently I had to design a web UI in asp .net 2.0 .I had strange problems with aligning controls in Visual studio UI.
I have used Div, table tags to align asp .net controls(labels, textbox, grid etc).
But the problem was what I saw in design surface of visual studio was entirely different (most of the time) when I view the page in browser.
The gap between controls and alignments was never perfect .I have seen other developers also doing trial and error methods without a proper guidelines.
C# coding I am pretty good and I have lots of Microsoft articles and help materials to guide me.
But I haven’t found proper articles and guidelines for UI design of asp .net pages.(may be its out there and i havent found yet?)
Can anyone through more light on this subject. Any good books ,suggestions etc?
Thanks in advance
SNC
If you want granular control over your HTML/XHTML output then I would recommend switching to ASP.NET MVC. The problems you've described are those typically encountered when using ASP.NET WebForms. As Anton mentions, you do need to gain a good understanding of XHTML and CSS as well.
While I definitly +1 everyone suggesting that you get a better grasp of CSS and positioning in general and ditch the drag and drop method of building your controls, I figure you need something sooner rather than later.
For that, I give you Yahoo!'s CSS Grids (JQuery, MooTools and other libraries also have grid layout tools) which will help you to get your UI done quickly. In the mean time read up on CSS.
(X)HTML is compositional - not unlike XAML (which is actually modeled on HTML/CSS). When building WinForms you can drag and drop your controls onto the window willy-nilly, but not so with the web. One thing the drag and drop designer misses is that (X)HTML components have a hierarchy to them. The designer tries to overcome this by using position: absolute; which is a precarious crutch.
Your controls need to be composed with their positional relationships more or less intact already and that means you'll have to edit the code by hand to put things in the proper order.
It's not the UI design per se. What you need is solid understanding of how CSS and generally styles work on the web (in short: they do poorly). So what you need is a good CSS book. Plus, you'll have to dump WYSIWYG ASP.NET page editor.
I'm curious if you feel your HTML skills are on par. Could you create this same page in HTML without visual studio and get the results you expect (using notepad)?
Regardless, start spending more time in the HTML markup and less time using the designer surface in Visual Studio. The more you understand the output that ASP.NET creates the better a web developer you will become.
A trick I use quite often is knowing that you don't need to recompile to change aspx code. Make your changes to the aspx file, save, and then refresh your browser. Also, use firefox and get the webdeveloper plugin. I use the outline block level elements quite often to understand where some of my html flow problems are occurring.
Read up on Web Design. I'm a bit behind but I've always loved zengarden and zeldman.. I'm sure there's better out there now.
I'm a long time winforms developer and one of the things I really liked was the layout manager controls they had like flowlayoutpanel or gridlayout. unfortunately these don't seem to exist in asp.net or do they?
I'm in the process of modifying my existing asp.net website to use css instead of tables, but when I go into the visual studio design mode it looks terrible.
It's really difficult to wrap my head around all these floats, div:clears and css tricks and then test and retest in every browser. Surely there must be a better way. Ideally a layout manager control which would display properly in design mode, act as a container, be lightweight, and use smart enough to emit tables or css depending on the browser abilities.
does such a control exist as part of asp.net, open source, or commercial add-on?
Using tables instead of DIVs and css can certainly help with laying things out (a lot of people will think this is bad practice, but its works)
Also, have a look at the asp.net Repeater and ListView components. The ListView is very good in that you have a lot of control over the layout and the rendered html, I would look at that.
First thing - don't rely on the VS Designer. It's not a browser. Because each browser implements css in potentially different ways, your only option is to test in the browsers that you think your target market will use.
At first, css positioning can seem a bit confusing, but if you stick with it, you will be able to wrap your head around it. There is no such control as you describe that I know of. CSS is part of a web developers required learning, just as SQL is if you need to use a database etc.