Modeling Visual Containment for Web Page Layout Optimization

Kikuchi, Kotaro; Otani, Mayu; Yamaguchi, Kota; Simo-Serra, Edgar

doi:10.1111/cgf.14399

Cited by 11 publications

(4 citation statements)

References 45 publications

Supporting

Mentioning

Contrasting

Unclassified

Order By: Relevance

“…A follow-up project, Dynamic Brushes, combined procedural programming into brush behavior and design, enabling more custom expression [25]. Other design tools have looked at supporting design layout [30,44], fashion [60] and design coloring [17,70].…”

Section: Vector Graphics Design Toolsmentioning

confidence: 99%

Interactive Flexible Style Transfer for Vector Graphics

Warner,

Kim,

Hartmann

2023

Proceedings of the 36th Annual ACM Symposium on User Interface Software and Technology

View full text Add to dashboard Cite

LEONARD's delivery specialFigure 1: VST generates new output graphics by transferring visual styles from source graphics onto target graphics. The styling interface lets designers customize which styles to transfer, filter which elements to stylize, and preview the new stylized output graphics. The output graphics retain a similar structure to the target graphics while bearing styles from the source graphics.

show abstract

Section: Vector Graphics Design Toolsmentioning

confidence: 99%

Interactive Flexible Style Transfer for Vector Graphics

Warner,

Kim,

Hartmann

2023

Proceedings of the 36th Annual ACM Symposium on User Interface Software and Technology

View full text Add to dashboard Cite

show abstract

“…Design elements adjust to the target audience, especially regarding age and education level. Based on the previous example, we can take a homepage template and pour representative text, images, and media into the template to show real content in action (Hu et al, 2021;Kikuchi et al, 2021).…”

Section: ) Pagementioning

confidence: 99%

Atomic Design System for Typography Layout in Student Poster Design

Hermanto,

Ibrahim,

Sudarmanto

et al. 2023

ANDHARUPA

View full text Add to dashboard Cite

AbstrakPenelitian ini bertujuan untuk menerapkan atomic design system pada proses perancangan desain poster komunikasi visual. Banyak cara menciptakan produk desain untuk kebutuhan tertentu. Urgensi penelitian ini adalah karena selama ini banyak desainer terutama mahasiswa, yang bingung dengan proses desain poster. Banyak metode desain yang tidak semuanya sesuai dengan penciptaan desain poster. Maka, atomic design ayatem merupakan alternatif metode yang dapat digunakan untuk membuat desain poster. Desain poster tersebut memiliki dua tujuan yang penting, yaitu menyampaikan pesan atau informasi dengan baik dan benar pada masyarakat, dan menampilkan informasi tersebut dengan artistik dan estetik. Atomic Design System dapat membantu desainer dalam membuat desain dengan tujuan-tujuan tersebut. Disamping langkah yang sistematis, system ini juga membuat elemen desain dan elemen informasi yang akan disajikan teridentifikasi dengan lengkap. Metode atomic memiliki langkah-langkah sebagai berikut: atomic element, molekul element, organisme desain, menyiapkan halaman, serta merancang template desain . proses dari atomic design system ini menghasilkan elemen desain yang tertata, alur baca yang baik, serta template design yang dapat diterapkan pada desain lain. Studi kasus perancangan poster PIMNAS merupakan studi yang tepat karena poster PIMNAS menampilkan banyak informasi dan data serta harus disajikan dengan runtut dan jelas. Hasil dari penerapan Atomic Design System adalah final design poster PIMNAS dengan legibility dan readability yang baik. Kata Kunci: atomic design, desain poster, sistem tata letak, tipografi AbstractThis study aims to apply the atomic design system to the poster design process of visual communication design. There are many ways to create and design products for specific needs. This research is urgent because many designers, especially students, are confused about the poster design process. Many design methods are not all appropriate for creating poster designs. So, the atomic design system is an alternative method that can be used to make poster designs. These poster designs have two important goals: conveying messages or information properly and correctly to the public and presenting the information artistically and aesthetically. Atomic Design System can assist designers in making designs with these goals. In addition to systematic steps, this system also makes design elements and information elements be presented wholly identified. The atomic method has the following steps: Atomic elements, Molecular elements, design organisms, prepare pages, and design templates. This atomic design system produces well-organized design elements, good reading flow, and design templates that can be applied to other designs. The PIMNAS poster design case study is the proper study because the PIMNAS poster displays a lot of information and data and must be presented coherently and clearly. The result of implementing the Atomic Design System is the final PIMNAS poster design with good legibility and readability. Keywords: atomic design, layout system, poster design, typography

show abstract

“…BPR NTB Sumbawa berupa: a. Pembuatan tampilan yang lebih menarik. Sesuai dengan kriteria tampilan dapat dikatakan menarik jika memiliki Goals (tujuan dari pembuatan design harus terlihat jelas), Hierarcy (arsitektur informasinya harus dapat dimengerti oleh user), White space (antar tiap design/informasi harus dibatasi dengan white space agar tiap informasi dapat dibaca dengan mudah), Simplicity (tampilan terlihat simple) dan Typography (jenis ukuran, jenis font yang digunakan, tata letak tulisan) [23]…”

Section: Ideateunclassified

Penerapan Metode Design Thinking Dalam Pengembangan UI dan UX

Herfandi¹,

Yuliadi²,

Zaen³

et al. 2022

bits

View full text Add to dashboard Cite

Website is a computer service that is connected with hypertext facilities. A bad user interface that is made carelessly will affect the user experience (UX), so that the information to be conveyed cannot be received properly. The Design Thinking method is proven to be able to provide solutions in designing user interfaces based on the experience, emotions, and situation of the user (user experience). PD. BPR NTB Sumbawa has a website that can be said to have not maximized the function of the user interface and user experience in the manufacturing process. The results of the questionnaire with a Likert scale to 30 respondents resulted in 47% of users agreeing with the inaccurate website layout. Based on these problems, this research applies the Design Thinking method to analyze and develop user interfaces and user experiences. This research resulted in user empathy map, user persona, user interface design based on define, wireframe and prototype stages in responsive form made using Figma. The prototype results have gone through a direct testing process by the user and produced a better display design based on the Design Thinking Method stage. The prototype display design is expected to make it easier for users to use Thinking and increase interaction satisfaction between users and products.

show abstract

Modeling Visual Containment for Web Page Layout Optimization

Cited by 11 publications

References 45 publications

Interactive Flexible Style Transfer for Vector Graphics

Interactive Flexible Style Transfer for Vector Graphics

Atomic Design System for Typography Layout in Student Poster Design

Penerapan Metode Design Thinking Dalam Pengembangan UI dan UX

Contact Info

Product

Resources

About