UI DESIGN
UIデザイン
A Hat in Time
Client: Gears for Breakfast
{"items":[],"styles":{"galleryType":"Strips","groupSize":1,"showArrows":true,"cubeImages":true,"cubeType":"fill","cubeRatio":"100%/100%","isVertical":false,"collageAmount":0.8,"collageDensity":1,"groupTypes":"1","oneRow":true,"imageMargin":0,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":true,"enableScroll":true,"isGrid":false,"isSlider":false,"isColumns":false,"isSlideshow":false,"cropOnlyFill":false,"fixedColumns":0,"enableInfiniteScroll":true,"isRTL":false,"minItemSize":120,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":0.75,"numberOfImagesPerRow":3,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":1,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":5,"galleryThumbnailsAlignment":"bottom","isMasonry":false,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"useCustomButton":false,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryHorizontalAlign":"center","galleryTextAlign":"center","galleryVerticalAlign":"center","scrollSnap":true,"itemClick":"expand","fullscreen":true,"allowSocial":false,"allowDownload":false,"allowTitle":false,"allowDescription":false,"loveButton":false,"loveCounter":false,"videoPlay":"hover","scrollAnimation":"NO_EFFECT","scrollDirection":0,"overlayAnimation":"NO_EFFECT","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowTitleExpand":true,"allowDescriptionExpand":true,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":200,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"APPEARS","thumbnailSize":120,"magicLayoutSeed":1,"imageHoverAnimation":"NO_EFFECT","calculateTextBoxHeightMode":"AUTOMATIC","textBoxHeight":0,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"textsVerticalPadding":0,"textsHorizontalPadding":0,"titleDescriptionSpace":6,"customButtonText":"","customButtonBorderWidth":1,"customButtonBorderRadius":0,"loadMoreButtonText":"Load More","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":1,"videoLoop":true,"gotStyleParams":true,"selectedLayout":"3|bottom|1|fill|false|0|true","showVideoPlayButton":true,"galleryImageRatio":2,"sharpParams":{"quality":90,"usm":{}},"imageLoadingWithColorMode":"PICKED_COLOR","imageRatioType":"FIXED","numberOfDisplayedItems":3,"itemBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemShadowOpacityAndColor":{"themeName":"color_15","value":"rgba(65,65,65,0.2)"},"textBoxBorderColor":"color-5","textBoxFillColor":"color-2","alwaysShowHover":false,"isStoreGallery":false,"previewHover":false,"galleryLayout":3,"itemOpacity":{"themeName":"color_14","value":"rgba(153,153,151,0.62)"},"itemFont":{"style":{"bold":false,"italic":false,"underline":false},"family":"proxima-n-w01-reg","preset":"Heading-S","editorKey":"font_6","size":22,"fontStyleParam":true,"displayName":"Small Heading","value":"font:normal normal normal 22px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontSlideshow":{"family":"avenir-lt-w01_85-heavy1475544","displayName":"Basic Heading","style":{"bold":false,"italic":false,"underline":false},"size":22,"preset":"Custom","editorKey":"font_5","fontStyleParam":true,"value":"font:normal normal normal 22px/27px avenir-lt-w01_85-heavy1475544,sans-serif;"},"itemDescriptionFontSlideshow":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemDescriptionFont":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemDescriptionFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemDescriptionFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonFont":{"family":"proxima-n-w01-reg","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"loadMoreButtonFontColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"loadMoreButtonBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"arrowsColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"oneColorAnimationColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"isAccessible":false,"allowLeanGallery":false,"layoutsVersion":2,"selectedLayoutV2":3,"isSlideshowFont":false,"externalInfoHeight":0},"container":{"top":"","bottom":"","left":"","right":"","width":959,"height":493,"position":"","avoidGallerySelfMeasure":true,"galleryWidth":959,"galleryHeight":358,"scrollBase":0}}
AGW UI Showcase
Personal projects and UI mockups.
Personal projects and UI design mockups ranging from 2012 onward. Click on an image to see the full size, as well as additional information.
ADV Main UI
Main UI elements of a visual novel styled adventure game.
(Character Art: Sami Briggs)
(Character Art: Sami Briggs)
DRR Main Menu
Anime styled racing game menu.
(BG Screenshot: Auto Modellista)
(BG Screenshot: Auto Modellista)
DRR Titlescreen
Anime styled racing game menu.
(BG Screenshot: Auto Modellista)
(BG Screenshot: Auto Modellista)
DRR Config
Anime styled racing game menu.
(BG Screenshot: Auto Modellista)
(BG Screenshot: Auto Modellista)
DRR HUD
Anime styled racing game HUD.
(BG Screenshot: Auto Modellista)
(BG Screenshot: Auto Modellista)
RPG Menu
Dungeon crawler RPG menu.
(BG Assets: Sami Briggs, RPG Maker)
(BG Assets: Sami Briggs, RPG Maker)
RPG Battle
Dungeon crawler RPG battle UI.
(BG Assets: Sami Briggs, RPG Maker)
(BG Assets: Sami Briggs, RPG Maker)
Scaleform Menu
UDK Scaleform Menu
MXRevenge Music Select
Music select for a rhythm game.
(BG Assets: Sami Briggs)
(BG Assets: Sami Briggs)
MXRevenge Gameplay
In-game assets for a rhythm game.
Mech UI
HUD for an Armored Core style mech shooter.
(BG Assets: Sami Briggs, Armored Core V)
(BG Assets: Sami Briggs, Armored Core V)
{"items":["e38023ec-6fe0-43b1-8803-630e1833bfbc","5ab0cc1e-7587-4607-bb45-acdf75e35caa","f661bff5-5cd7-453f-9f3e-91ad6dbe398d","23aa45bc-9b19-477c-8bb7-63ff4e18cc9c","0b9f17d5-b994-4162-b3e1-1e9483ad6ea6","9b58fbce-55d4-4520-986a-2e7051e8a15e","e22832bf-fd9b-4eb2-b749-ef7c4673b121","377c5af1-5594-4027-9d24-07bce472154e","01535b56-b3bf-4775-95e5-4f687542c484","61efefbe-876a-4510-9b4f-fbc756eaa203","8344938f-ca79-432a-8067-ab21642062b6"],"styles":{"groupSize":1,"showArrows":false,"cubeImages":false,"cubeType":"fill","cubeRatio":1,"isVertical":false,"gallerySize":375,"collageAmount":0.8,"collageDensity":1,"groupTypes":"1","oneRow":false,"imageMargin":5,"galleryMargin":0,"floatingImages":0,"chooseBestGroup":true,"smartCrop":false,"hasThumbnails":false,"enableScroll":true,"isGrid":false,"isSlider":false,"isColumns":false,"isSlideshow":false,"cropOnlyFill":false,"fixedColumns":0,"enableInfiniteScroll":1,"isRTL":false,"minItemSize":120,"rotatingGroupTypes":"","rotatingCubeRatio":"","gallerySliderImageRatio":1.7777777777777777,"numberOfImagesPerRow":3,"numberOfImagesPerCol":1,"groupsPerStrip":0,"borderRadius":0,"boxShadow":0,"gridStyle":0,"mobilePanorama":false,"placeGroupsLtr":false,"viewMode":"preview","thumbnailSpacings":9,"galleryThumbnailsAlignment":"bottom","isMasonry":true,"isAutoSlideshow":false,"slideshowLoop":false,"autoSlideshowInterval":4,"useCustomButton":false,"bottomInfoHeight":0,"titlePlacement":"SHOW_ON_HOVER","galleryHorizontalAlign":"flex-start","galleryTextAlign":"left","galleryVerticalAlign":"flex-end","scrollSnap":false,"itemClick":"expand","fullscreen":true,"allowSocial":false,"allowDownload":false,"allowTitle":true,"allowDescription":true,"loveButton":false,"loveCounter":false,"videoPlay":"hover","scrollAnimation":"SLIDE_UP","scrollDirection":0,"overlayAnimation":"SLIDE_UP","arrowsPosition":0,"arrowsSize":23,"watermarkOpacity":40,"watermarkSize":40,"useWatermark":true,"watermarkDock":{"top":"auto","left":"auto","right":0,"bottom":0,"transform":"translate3d(0,0,0)"},"loadMoreAmount":"all","defaultShowInfoExpand":1,"allowTitleExpand":true,"allowDescriptionExpand":true,"allowLinkExpand":true,"expandInfoPosition":0,"allowFullscreenExpand":true,"fullscreenLoop":false,"galleryAlignExpand":"left","addToCartBorderWidth":1,"addToCartButtonText":"","slideshowInfoSize":200,"playButtonForAutoSlideShow":false,"allowSlideshowCounter":false,"hoveringBehaviour":"APPEARS","thumbnailSize":120,"magicLayoutSeed":1,"imageHoverAnimation":"NO_EFFECT","calculateTextBoxHeightMode":"AUTOMATIC","textBoxHeight":0,"textImageSpace":10,"textBoxBorderRadius":0,"textBoxBorderWidth":0,"textsVerticalPadding":0,"textsHorizontalPadding":0,"titleDescriptionSpace":6,"customButtonText":"","customButtonBorderWidth":1,"customButtonBorderRadius":0,"loadMoreButtonText":"Load More","loadMoreButtonBorderWidth":1,"loadMoreButtonBorderRadius":0,"imageInfoType":"NO_BACKGROUND","itemBorderWidth":0,"itemBorderRadius":0,"itemEnableShadow":false,"itemShadowBlur":20,"itemShadowDirection":135,"itemShadowSize":10,"imageLoadingMode":"BLUR","expandAnimation":"NO_EFFECT","imageQuality":90,"usmToggle":false,"usm_a":0,"usm_r":0,"usm_t":0,"videoSound":false,"videoSpeed":1,"videoLoop":true,"gotStyleParams":true,"selectedLayout":"1|bottom|1|fill|false|0|1","showVideoPlayButton":true,"galleryImageRatio":2,"sharpParams":{"quality":90,"usm":{}},"imageLoadingWithColorMode":"PICKED_COLOR","imageRatioType":"FIXED","numberOfDisplayedItems":3,"itemBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemShadowOpacityAndColor":{"themeName":"color_15","value":"rgba(65,65,65,0.2)"},"textBoxBorderColor":"color-5","textBoxFillColor":"color-2","alwaysShowHover":false,"isStoreGallery":false,"previewHover":false,"galleryLayout":1,"itemOpacity":{"themeName":"color_11","value":"rgba(255,255,255,0.37)"},"itemFont":{"style":{"bold":false,"italic":false,"underline":false},"family":"proxima-n-w01-reg","preset":"Heading-S","editorKey":"font_6","size":22,"fontStyleParam":true,"displayName":"Small Heading","value":"font:normal normal normal 22px/1.4em proxima-n-w01-reg,sans-serif;"},"itemFontSlideshow":{"family":"avenir-lt-w01_85-heavy1475544","displayName":"Basic Heading","style":{"bold":false,"italic":false,"underline":false},"size":22,"preset":"Custom","editorKey":"font_5","fontStyleParam":true,"value":"font:normal normal normal 22px/27px avenir-lt-w01_85-heavy1475544,sans-serif;"},"itemDescriptionFontSlideshow":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemDescriptionFont":{"family":"avenir-lt-w01_35-light1475496","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Custom","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/18px avenir-lt-w01_35-light1475496,sans-serif;"},"itemFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"itemDescriptionFontColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"itemDescriptionFontColorSlideshow":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonFont":{"family":"proxima-n-w01-reg","displayName":"Paragraph 2","style":{"bold":false,"italic":false,"underline":false},"size":15,"preset":"Body-M","editorKey":"font_8","fontStyleParam":true,"value":"font:normal normal normal 15px/1.4em proxima-n-w01-reg,sans-serif;"},"loadMoreButtonFontColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"loadMoreButtonColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"loadMoreButtonBorderColor":{"themeName":"color_15","value":"rgba(65,65,65,1)"},"arrowsColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"oneColorAnimationColor":{"themeName":"color_11","value":"rgba(255,255,255,1)"},"isAccessible":false,"allowLeanGallery":false,"layoutsVersion":2,"selectedLayoutV2":1,"isSlideshowFont":false,"externalInfoHeight":0},"container":{"top":"","bottom":"","left":"","right":"","width":959,"height":1920,"position":"","avoidGallerySelfMeasure":true,"galleryWidth":969,"galleryHeight":1920,"scrollBase":0}}