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
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'm using a Windows Form Application in Visual Studio 2013 to design a prototype for a software. I'm not a software-developer, the only purpose of the project is to communicate with the dev-team to let them know what the end-product is supposed to look like.
There is not really much flexibility when it comes to designing control, like buttons, textboxes, etc. so I was wondering if it is possible to attach stylesheets to VB.NET projects? Thank you
There is not really much flexibility when it comes to designing
control, like buttons, textboxes, etc.
NO. winforms is a really old technology that basically has no amount of built-in support for custom UIs. It is not recommended for any new projects (only to maintain legacy applications) and it will be completely useless if you're not a developer, since any sort of custom look and feel needs to be done with an ugly procedural code technique called "owner draw", which requires too much code for anything, and is unable to provide professional-looking UIs due to the lack of hardware acceleration and lack of support for pixel-independent UIs.
If you're doing a prototype (as opposed to a real application), as others have recommended, you should use design tools such as Photoshop, or maybe a quick HTML + CSS kind of approach.
Otherwise, you can easily create a modern-looking application using a technology that is the replacement of winforms, called Windows Presentation Foundation, or WPF, for short.
There's also a design tool made specifically for this technology, called Expression Blend, which is bundled with recent versions of Visual Studio, and offers a very designer-centric approach to building UIs:
To summarize: winforms is useless. Use proper, relevant, current technology instead.
There are no such things as stylesheets in WinForms applications. You can change the appareance on a form and control basis by changing the Appearance properties.
You can create base controls and forms that have your appearance changes and then use those to create other forms to make things easier to design out the screen.
There are also 3rd party control sets that do have skins/themes, which maybe what you want but you have to purchase them first then you are limited to that control suite.
I have an asp.net website, it contains database calls etc
Whats the best way of taking an existing asp.net website and making it look good in mobile and tablet devices?
I have done some research but there seems to be so many options eg lessframework.com, jquerymobile etc
I havent used mvc before but a few people say to use mvc + jquerymobile
any help would be muchly appreciated
There is no magic bullet that will instantly convert your website to mobile. In fact without knowing the specifics of your website it would be hard to recommend a good fit for your situation since the tools you mention like MVC, JQMobile, etc. would be used in one case or another. With the question as you have posed it you will get personal opinion and there are millions of us with opinions... here's mine:
I would recommend not building a mobile specific website like mobile.website.com but rather look into responsive design where your website and the underlying data structs remain the same but your view changes depending on screen real-estate. Bootstrap or HTML5 Boilerplate or any number of design frameworks will help you get started. You just need to figure out a design that fits your websites functionality.
I use MVC + HTML5 Boilerplate (I love Razor) for most of my new projects but sometimes even it has too much overhead so I just start from scratch (multiple PSD's, convert to HTML in Dreamweaver, apply logic with MVC & client side scripting) but that is something you will have to decide on a project by project basis.
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.
Past, now irrelevant back story: I was trying to make some changes to BlueBand and get 'up and running pretty quickly' but after looking at it further this is no longer an option due to tables that a previous developer introduced into the layout. I'll have to live with this and make what tweaks I can.
So, looking towards future greenfields projects...
Are there any recommendations for CSS frameworks that work nicely with SharePoint publishing sites? (Examples are BluePrint, YUI.) They should not interfere with standard out-of-the-box controls such as the Site Actions menu, rich text editor, and publishing toolbar.
Real world experiences welcomed, please!
What would you like to use a CSS framework for? As far as I can tell you could use one for making a cross-browser reset but everything else just depends on your layout. If you're planning to throw out the standard SharePoint layout it means that you need to start from scratch. The good news is that it's not much different than creating a layout for any other website. There are some things you need (http://msdn.microsoft.com/en-us/library/aa660698.aspx) while working with SharePoint but as for CSS it's all up to you.
Heather Solomon has a great blog/guide on wiring up SharePoint CSS classes - take a look:
http://www.heathersolomon.com/content/sp07cssreference.htm
Cheers,
Adam
You will run into a lot of trouble trying to hack the blue band theme into a table less layout.
You may get some mileage from the free Accesibility Kit for Sharepoint.
It comes with layout pages, CSS and even control adapters for those who care about the HTML of thier site.
Still, getting rid of the tables produced by SharePoint is not really compatible with "up and running pretty quickly"
You should start with the minimal masterpage. That will be the masterpage that's connected to the publishing layouts. You can then add in all the html/css you desire to your masterpage and layouts to make them look like anything you want.
If the users who are browsing those same publishing pages also need access to your list forms (new,edit,display) you will have to edit those files and attach them to your masterpage (either through SP Designer or a Feature to do it automatically). Or, customize the application masterpage to be nearly the same as your publishing masterpage and deploy them both as a feature with an HTTP Handler that changes the masterpage for the application.master at runtime.
Also an FYI, there are many issues once you start customizing list form pages for a site accessible to anon users, so do your research first on that one if needed.
We have used 960.gs with some success. Just include it in your master page, and wrap the main content area with a - or use container_12/container_24. Then in your individual page layouts, you can leverage all the columns/push/pull/alpha/omega goodies that make 960 so great. This works in 2007 and 2010, just takes a bit more work in 2007.
You can use any framework you desire when working with Sharepoint, however, the primary concern is how much control you have over web parts. OOB web parts use table based layout. If you have full control over how the web parts use the markup they product then you are one step closer to using a framework with little headache.
To alleviate some of the table based layout used in web parts you can look at accessibility toolkits to convert the web parts appropriately.