일반적인 웹 UI 스타일

다음날 웹 앱의 프로토 타입을 고객 중 한 명에게 보여줘야합니다. 문제는 제가 CSS를 잘하지 못하고 무엇보다도 제가 얻은 결과에 거의 만족하지 않는다는 것입니다.

비즈니스 로직을 코딩하는 것은 어렵지 않지만 UI 디자인은 내 시간의 80 % 이상이 걸립니다. 나는 숨 막힐듯한 것이 필요하지 않고 깨끗하고 멋지고 표현 가능한 환경이 필요합니다.

이것은 내가 겪어 온 반복적 인 문제입니다. 웹 UI 개발이 덜 기본 스타일을 가질 수 있기를 바랍니다. Visual Studio 또는 iPhone SDK 와 유사한 접근 방식 이 나에게 매우 유용 할 것입니다.

Balsamiq Mockups 로 만든 위의 모형 은 좋은 예입니다. 가장 일반적인 모든 "구성 요소"를 사용할 수 있으며 무엇보다도 좋은 스타일을 선택할 수 있습니다.

웹에 이와 같은 것이 있습니까? 중립적이면서도 멋진 CSS 또는 자바 스크립트 UI 프레임 워크?

지금까지의 옵션 :

• 부트 스트랩
• Qooxdoo
• jQuery UI
• jQuery 도구
• MochaUI
• Ext JS
• 야후! 사용자 인터페이스 라이브러리
• BlueTrip
• 청사진
• Uki ( 데모 )
• Napkee
• YAML
• 기준선
• iPlotz
• 새싹 핵
• ForeUI

CSS 전용 UI 프레임 워크가 있는지 알고 싶습니다.

내가 찾은 웹 UI 라이브러리의 아주 좋은 목록이 페이지를 하지만, 대부분은 (적어도 좋은 것들)은 순수 CSS 나 JS의 모든 동등하게 좋은 대안이있다, 자바 특정 것 같다?

추신 : 저는 AJAX, 효과, 행동 등에 관심이 없습니다. 제 주요 관심사는 스타일입니다.

모든 제안에 감사드립니다!

제안 된 모든 UI 라이브러리를 매우 신중하게 고려한 후 ExtJS와 Qooxdoo가 내 요구에 가장 잘 맞는다는 결론에 도달했습니다. jQuery UI는 유망 해 보이지만 적은 양의 요소 만 제공합니다.

CSS 전용 라이브러리에 관한 한 BlueTrip / BluePrint 및 tambler가 제안한 테마가 최고라고 생각했습니다. 그 외에도 Flex와 Napkee도 탐험 할 가치가있는 것 같습니다.

지금 ExtJS를 배울 시간입니다! =)

아무도 언급하지 않았다는 것을 믿을 수 없습니다.

http://www.extjs.com/

상용 js 프레임 워크이지만 꽤 저렴하며 멋진 UI를 쉽게 조합 할 수 있습니다. jqueryui보다 훨씬 더 완전한 요소 집합이 있으며 전체 앱을 만들도록 설계되었습니다. 조금만 가지고 놀았지만 지금까지 정말 좋아합니다. 개인적인 용도로는 무료입니다.

EXT로 개발 된 완전한 UI에 대해 정말로 느끼고 싶다면 다음 URL을 시도해보세요.

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html

레이아웃을위한 960gs 와 스타일링을위한 jQuery-UI 의 조합 은 아마도 당신이 추구 하는 것일 것입니다.

960gs 대신 청사진 CSS 프레임 워크를 고려할 수도 있습니다 .

dojo 와 dijit 를 사용하는 것은 어떻습니까?

Dijit는 위젯과 요소를 만드는 빠른 방법입니다. 또한 수정하기 쉬운 3 개의 기본 테마가 제공됩니다.

여기 에 다른 위젯의 좋은 목록

UI 디자인 을 전문 으로 하는 사람과 짝을 이루세요 .

비즈니스 로직을 더 잘 다룰 수 있다면, 마스터 할 수 있도록 비즈니스 로직을 코딩하는 데 시간을 쓰는 것이 좋습니다. 이를 위해서는 프레젠테이션에 탁월한 다른 사람과 소통하는 방법을 배워야합니다. ( xml 과 json 은 일반적인 수단입니다)

비즈니스 로직과 프레젠테이션은 매우 다릅니다. 보기 좋을뿐만 아니라 직관적이고 사용하기 쉬운 시스템을 설계하는 것은 매우 어렵습니다. 복잡한 응용 프로그램의 내부 작업을 설정하는 것만 큼 어렵고 시간이 많이 걸립니다.

좋은 인터페이스는 CSS 프레임 워크를 포함하는 것만 큼 간단하지 않습니다.

저는 제 자신이 프레젠테이션에서 뛰어난 '창의적인'프로그래머라고 생각합니다. 나는 크로스 경로에 운이 충분이 있었다 사람과 우선 ... 매우 동기 부여, 그리고 두 번째 모두의 할 일이 매우 '비즈니스 로직'에 좋다. 그는 복잡한 시스템을 계획하고 구현하는 데 훨씬 더 많은 경험을 가지고 있었고 저는 주로 인터페이스 디자인에 집중했습니다.

시스템 아키텍처, 계획, 개발 등을 더 생산적으로 수행하고 있다면 ... 그 방향으로 나아가 야합니다. 솔로 개발 프로젝트는 다소 만족 스러울 수 있지만 비효율적이라고 생각합니다. 누군가가 최상위 수준의 응용 프로그램을 단독으로 개발할 수있는 기술을 보유한 경우는 매우 드뭅니다.

문제는 함께 일하는 사람을 찾는 것입니다.

Google Web Toolkit을 확인하십시오 . 그것은 꽤 깨끗한 기본 모양을 가지고 있습니다. 그들에는 예가 있습니다. 특히, 그들의 Showcase 예제는 사용 가능한 모든 위젯과 모양을 달성하는 데 사용 된 CSS 스타일을 보여줍니다.

(G) UI 디자인을 목표로하는 몇 가지 프레임 워크가 있습니다. Qooxdoo , JQuery UI 및 MochaUI 는 그중 일부입니다 (마지막은 사용 가능한 프레임 워크보다 개념 증명에 가깝지만 ). 이러한 프레임 워크는 일반적으로 다양한 JS 기반 요소 (입력 필드 및 제출 버튼과 같은 양식 요소와 탭과 같은 기타 요소)를 제공합니다. 그러나 이러한 요소를 원하는대로 배치하고 스타일을 지정하는 것은 여전히 ​​사용자에게 달려 있습니다.

CSS 프레임 워크 (예 : 960GS )에 익숙해 지면 위의 JS UI 프레임 워크를 보완 할 수 있습니다.

(개인적인 면책 조항으로서 위에서 언급 한 프레임 워크에 대한 경험이 거의 없습니다.하지만 Google이나 SO 모두 제가 할 수없는 답변을 제공 할 수 있다고 확신합니다.)

이것은 현재 프로젝트에 도움이되지 않지만 향후 프로젝트에 대해 고려할 가치가 있습니다. HTML 4로 GUI 애플리케이션을 만드는 데 수년을 보냈고 CSS와 HTML의 한계에 맞서 끊임없이 씨름 한 후 Adobe Flex를 사용해 볼 것이라고 생각했습니다. 얼마나 개선 되었습니까!

Flex 또는 Silverlight를 사용하면 탭 페이지 컨트롤이나 데이터 그리드를 위조하는 대신 태그가 탭 페이지 컨트롤이나 데이터 그리드를 간단히 지정할 수 있습니다. 그리고 프레임 워크에는 지루하지만 전혀 나쁘지 않은 기본 스타일이 제공됩니다. 이것이 HTML을 완전히 대체한다고 말하는 것은 아니지만 위젯과 GUI 레이아웃이 필요한 경우 훨씬 더 나은 대안이라고 생각합니다.

다음 사이트를 탐색 할 수 있습니다.

http://themeforest.net/category/site-templates/admin-skins

여기에서 구매할 수있는 몇 가지 "관리"테마가 귀하의 필요에 맞을 수 있습니다.

이와 같은 와이어 프레임 모형은 훌륭한 시작 방법입니다.

여기서 논의한 대부분의 UI 프레임 워크를 사용 했으므로 다음과 같은 이유로 jQueryUi로 안내하겠습니다.

1. jQueryUI CSS 프레임 워크는 일관되고 멋진 CSS를 처리합니다 (정말 쉽습니다-마크 업을 만들고 클래스를 적용하기 만하면됩니다).

2. jQueryUI에는 tabcontrol이 있으며 양식을 스타일링하는 빠르고 쉬운 방법에 대한 힙이 있습니다.

IE가 아닌 최신 브라우저를 대상으로하는 경우 Sproutcore를 확인해야합니다 . 모형의 경우 나는 mockingbird를 사용 합니다.

UI 중심 소프트웨어 개발을 위해 특별히 설계된 비교적 새로운 PHP 프레임 워크입니다. 탭, 필터 및 그리드를 포함하여 여기에있는 요소가 포함되어 있으며 구현하는 데 약 20 줄의 코드가 필요합니다.

http://agiletoolkit.org/

Axure 를 사용해 보셨습니까 ? 애플리케이션 및 웹 사이트에 대한 와이어 프레임, 프로토 타입 및 사양을 빠르게 생성하기위한 도구입니다.

Balsamiq와 유사한 방식으로 작동하지만 와이어 프레임 / 프로토 타입을 HTML, CSS 및 Javascript로 내보낼 수 있습니다.

그런 다음이를 서버에 업로드하거나 작업 예제로 컴퓨터에서 실행할 수 있습니다.

양식, 링크, 탭, 롤오버, 자바 스크립트 효과를 만들 수 있습니다.

이미 프로토 타입에 발사믹 목업을 사용하고 있다면 Napkee 를 고려해야 합니다 . "Napkee를 사용하면 버튼 클릭 한 번으로 Balsamiq Mockup을 HTML / CSS / JS 및 Adobe Flex 3로 내보낼 수 있습니다."

얼마 전에이 문제를 만났는데 아무것도 찾을 수 없어서 CSS를 배울 수있는 기회로 삼았습니다. 그러나 그 이후로이 주제에 대해 큰 진전이 있었던 것 같습니다.

• 문제를 요약하면 wikipedia 페이지가 있습니다.
• 이 YAML - CSS YAML을 소요하고 CSS로 변합니다,
• 이 기준은 ,하지만 일부 CSS 지식을 가정합니다.
• 또한 Adobe의 Dreamweaver를 살펴 보는 것이 좋습니다 . 그들은 매우 읽기 쉽고 w3c 호환 코드를 생성하는 많은 CSS 및 스타일 생성 도구를 가지고 있습니다.

도움이 되었기를 바랍니다.

레이아웃과 jQuery-UI 또는 Jquery 도구를위한 960gs의 조합은 거의 모든 프로젝트에서 사용하는 것이 좋지만 비즈니스 친화적 인 것은 아니지만 http://easyframework.com/ 에 추가하고 싶습니다. 그것의 라이센스하지만 나는 그것을 좋아한다

최근에 iplotz.com이라는 멋진 웹 사이트를 발견했습니다. 여기에서 아무것도 설치하지 않고도 온라인으로 애플리케이션 / 웹 사이트 / 프로젝트의 모형을 만들 수 있습니다. 또한 전체 프로젝트를 관리하고 온라인에서 다른 사람들과 공유하기위한 훨씬 더 많은 기능과 함께 대부분의 공통 제어 기능이 있습니다.

나는 인정해야한다, 나는 아직 그것을 시도하지 않았다. 그러나 나는 그것을 조금 봤고 그것은 꽤 멋져 보인다. 아마 곧 사용할 것입니다.

Sass 는 CSS 두통을 완화하는 방법으로 잠재력이있는 것처럼 보입니다.

빠르고 쉬운 웹 개발을 위해 직관적이고 강력한 프런트 엔드 프레임 워크 인 Bootstrap 을 추가하고 싶습니다 .

나는 RocketCSS를 좋아 한다 . 깔끔한 디자인이 멋지다.